草庐IT

android - 如何维护多层 ImageView 并根据最大的一个保持它们的纵横比?

coder 2023-12-18 原文

假设我有多个图像需要将一个放在另一个之上,有些可能会出现某种动画,有些甚至可能是可拖动的。

通常占据整个屏幕的最大的一个将是 Z 坐标的底部(我们称它为 backgroundImageView ),而其余所有出现在它的顶部(以及其他顶部)。

像这样:

  • backgroundImageView
  • imageView1,居中。
  • imageView2 , 在 60%, 左上角的 60%
  • ...

如果我使用 FrameLayout(这似乎是最好的解决方案),backgroundImageView 的大小会很好地适应,但我如何强制其他层相应地调整自己的大小?

我想我需要以某种方式找到放置其他图层的位置以及如何设置它们的大小。

最简单的方法是确保所有层都具有完全相同的大小,但这可能会占用大量内存并且在动画或拖动 View 时变得非常慢。如果某些图层的内容非常少,那将是一种巨大的浪费。

最佳答案

这是一个显示带有附加层的图像的类:

import java.util.ArrayList;
import java.util.Iterator;

import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.net.Uri;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.TypedValue;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Transformation;
import android.widget.ImageView;

public class LayeredImageView extends ImageView {
    private final static String TAG = "LayeredImageView";

    private ArrayList<Layer> mLayers;
    private Matrix mDrawMatrix;

    private Resources mResources;

    public LayeredImageView(Context context) {
        super(context);
        init();
    }

    public LayeredImageView(Context context, AttributeSet set) {
        super(context, set);
        init();

        int[] attrs = {
                android.R.attr.src
        };
        TypedArray a = context.obtainStyledAttributes(set, attrs);
        TypedValue outValue = new TypedValue();
        if (a.getValue(0, outValue)) {
            setImageResource(outValue.resourceId);
        }
        a.recycle();
    }

    private void init() {
        mLayers = new ArrayList<Layer>();
        mDrawMatrix = new Matrix();
        mResources = new LayeredImageViewResources();
    }

    @Override
    protected boolean verifyDrawable(Drawable dr) {
        for (int i = 0; i < mLayers.size(); i++) {
            Layer layer = mLayers.get(i);
            if (layer.drawable == dr) {
                return true;
            }
        }
        return super.verifyDrawable(dr);
    }

    @Override
    public void invalidateDrawable(Drawable dr) {
        if (verifyDrawable(dr)) {
            invalidate();
        } else {
            super.invalidateDrawable(dr);
        }
    }

    @Override
    public Resources getResources() {
        return mResources;
    }

    @Override
    public void setImageBitmap(Bitmap bm) throws RuntimeException {
        String detailMessage = "setImageBitmap not supported, use: setImageDrawable() " +
                "or setImageResource()";
        throw new RuntimeException(detailMessage);
    }

    @Override
    public void setImageURI(Uri uri) throws RuntimeException {
        String detailMessage = "setImageURI not supported, use: setImageDrawable() " +
                "or setImageResource()";
        throw new RuntimeException(detailMessage);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Matrix matrix = getImageMatrix();
        if (matrix != null) {
            int numLayers = mLayers.size();
            boolean pendingAnimations = false;
            for (int i = 0; i < numLayers; i++) {
                mDrawMatrix.set(matrix);
                Layer layer = mLayers.get(i);
                if (layer.matrix != null) {
                    mDrawMatrix.preConcat(layer.matrix);
                }
                if (layer.animation == null) {
                    draw(canvas, layer.drawable, mDrawMatrix, 255);
                } else {
                    Animation a = layer.animation;
                    if (!a.isInitialized()) {
                        Rect bounds = layer.drawable.getBounds();
                        Drawable parentDrawable = getDrawable();
                        if (parentDrawable != null) {
                            Rect parentBounds = parentDrawable.getBounds();
                            a.initialize(bounds.width(), bounds.height(), parentBounds.width(), parentBounds.height());
                        } else {
                            a.initialize(bounds.width(), bounds.height(), 0, 0);
                        }
                    }
                    long currentTime = AnimationUtils.currentAnimationTimeMillis();
                    boolean running = a.getTransformation(currentTime, layer.transformation);
                    if (running) {
                        // animation is running: draw animation frame
                        Matrix animationFrameMatrix = layer.transformation.getMatrix();
                        mDrawMatrix.preConcat(animationFrameMatrix);

                        int alpha = (int) (255 * layer.transformation.getAlpha());
//    Log.d(TAG, "onDraw ********** [" + i + "], alpha: " + alpha + ", matrix: " + animationFrameMatrix);
                        draw(canvas, layer.drawable, mDrawMatrix, alpha);
                        pendingAnimations = true;
                    } else {
                        // animation ended: set it to null
                        layer.animation = null;
                        draw(canvas, layer.drawable, mDrawMatrix, 255);
                    }
                }
            }
            if (pendingAnimations) {
                // invalidate if any pending animations
                invalidate();
            }
        }
    }

    private void draw(Canvas canvas, Drawable drawable, Matrix matrix, int alpha) {
        canvas.save(Canvas.MATRIX_SAVE_FLAG);
        canvas.concat(matrix);
        drawable.setAlpha(alpha);
        drawable.draw(canvas);
        canvas.restore();
    }

    public Layer addLayer(Drawable d, Matrix m) {
        Layer layer = new Layer(d, m);
        mLayers.add(layer);
        invalidate();
        return layer;
    }

    public Layer addLayer(Drawable d) {
        return addLayer(d, null);
    }

    public Layer addLayer(int idx, Drawable d, Matrix m) {
        Layer layer = new Layer(d, m);
        mLayers.add(idx, layer);
        invalidate();
        return layer;
    }

    public Layer addLayer(int idx, Drawable d) {
        return addLayer(idx, d, null);
    }

    public void removeLayer(Layer layer) {
        layer.valid = false;
        mLayers.remove(layer);
    }

    public void removeAllLayers() {
        Iterator<Layer> iter = mLayers.iterator();
        while (iter.hasNext()) {
            LayeredImageView.Layer layer = iter.next();
            layer.valid = false;
            iter.remove();
        }
        invalidate();
    }

    public int getLayersSize() {
        return mLayers.size();
    }

    public class Layer {
        private Drawable drawable;
        private Animation animation;
        private Transformation transformation;
        private Matrix matrix;
        private boolean valid;

        private Layer(Drawable d, Matrix m) {
            drawable = d;
            transformation = new Transformation();
            matrix = m;
            valid = true;
            Rect bounds = d.getBounds();
            if (bounds.isEmpty()) {
                if (d instanceof BitmapDrawable) {
                    int right = d.getIntrinsicWidth();
                    int bottom = d.getIntrinsicHeight();
                    d.setBounds(0, 0, right, bottom);
                } else {
                    String detailMessage = "drawable bounds are empty, use d.setBounds()";
                    throw new RuntimeException(detailMessage);
                }
            }
            d.setCallback(LayeredImageView.this);
        }

        public void startLayerAnimation(Animation a) throws RuntimeException {
            if (!valid) {
                String detailMessage = "this layer has already been removed";
                throw new RuntimeException(detailMessage);
            }
            transformation.clear();
            animation = a;
            if (a != null) {
                a.start();
            }
            invalidate();
        }

        public void stopLayerAnimation(int idx) throws RuntimeException {
            if (!valid) {
                String detailMessage = "this layer has already been removed";
                throw new RuntimeException(detailMessage);
            }
            if (animation != null) {
                animation = null;
                invalidate();
            }
        }
    }

    private class LayeredImageViewResources extends Resources {

        public LayeredImageViewResources() {
            super(getContext().getAssets(), new DisplayMetrics(), null);
        }

        @Override
        public Drawable getDrawable(int id) throws NotFoundException {
            Drawable d = super.getDrawable(id);
            if (d instanceof BitmapDrawable) {
                BitmapDrawable bd = (BitmapDrawable) d;
                bd.getBitmap().setDensity(DisplayMetrics.DENSITY_DEFAULT);
                bd.setTargetDensity(DisplayMetrics.DENSITY_DEFAULT);
            }
            return d;
        }
    }
}

以及如何使用它:

    final LayeredImageView v = new LayeredImageView(this);
    Resources res = v.getResources();

    v.setImageResource(R.drawable.background);

    Matrix m;

    m = new Matrix();
    m.preTranslate(81, 146); // pixels to offset
    final Layer layer1 = v.addLayer(res.getDrawable(R.drawable.layer1), m);

    m = new Matrix();
    m.preTranslate(62, 63); // pixels to offset
    final Layer layer0 = v.addLayer(0, res.getDrawable(R.drawable.layer0), m);


    final AnimationDrawable ad = new AnimationDrawable();
    ad.setOneShot(false);
    Drawable frame1, frame2;
    frame1 = res.getDrawable(R.drawable.layer0);
    frame2 = res.getDrawable(R.drawable.layer1);
    ad.addFrame(frame1, 3000);
    ad.addFrame(frame2, 1000);
    ad.addFrame(frame1, 250);
    ad.addFrame(frame2, 250);
    ad.addFrame(frame1, 250);
    ad.addFrame(frame2, 250);
    ad.addFrame(frame1, 250);
    ad.addFrame(frame2, 250);
    ad.setBounds(200, 20, 300, 120);
    v.addLayer(1, ad);
    v.post(new Runnable() {
        @Override
        public void run() {
            ad.start();
        }
    });

    int[] colors = {
            0xeeffffff,
            0xee0038a8,
            0xeece1126,
    };
    GradientDrawable gd = new GradientDrawable(Orientation.TOP_BOTTOM, colors);
    gd.setBounds(0, 0, 100, 129);
    gd.setCornerRadius(20);
    gd.setStroke(5, 0xaa666666);
    final Matrix mm = new Matrix();
    mm.preTranslate(200, 69); // pixels to offset
    mm.preRotate(20, 50, 64.5f);
    final Layer layer2 = v.addLayer(2, gd, mm);

    final Animation as = AnimationUtils.loadAnimation(this, R.anim.anim_set);

    final Runnable action1 = new Runnable() {
        @Override
        public void run() {
            Animation a;
            Interpolator i;

            i = new Interpolator() {
                @Override
                public float getInterpolation(float input) {
                    return (float) Math.sin(input * Math.PI);
                }
            };
            as.setInterpolator(i);
            layer0.startLayerAnimation(as);

            a = new TranslateAnimation(0, 0, 0, 100);
            a.setDuration(3000);
            i = new Interpolator() {
                @Override
                public float getInterpolation(float input) {
                    float output = (float) Math.sin(Math.pow(input, 2.5f) * 12 * Math.PI);
                    return (1-input) * output;
                }
            };
            a.setInterpolator(i);
            layer1.startLayerAnimation(a);

            a = new AlphaAnimation(0, 1);
            i = new Interpolator() {
                @Override
                public float getInterpolation(float input) {
                    return (float) (1 - Math.sin(input * Math.PI));
                }
            };
            a.setInterpolator(i);
            a.setDuration(2000);
            layer2.startLayerAnimation(a);
        }
    };
    OnClickListener l1 = new OnClickListener() {
        @Override
        public void onClick(View view) {
            action1.run();
        }
    };
    v.setOnClickListener(l1);
    v.postDelayed(action1, 2000);

//    final float[] values = new float[9];
//    final float[] pts = new float[2];
//    final Matrix inverse = new Matrix();;
//    OnTouchListener l = new OnTouchListener() {
//        @Override
//        public boolean onTouch(View view, MotionEvent event) {
//            int action = event.getAction();
//            if (action != MotionEvent.ACTION_UP) {
//                if (inverse.isIdentity()) {
//                    v.getImageMatrix().invert(inverse);
//                    Log.d(TAG, "onTouch set inverse");
//                }
//                pts[0] = event.getX();
//                pts[1] = event.getY();
//                inverse.mapPoints(pts);
//
//                mm.getValues(values);
//                // gd's bounds are (0, 0, 100, 129);
//                values[Matrix.MTRANS_X] = pts[0] - 100 / 2;
//                values[Matrix.MTRANS_Y] = pts[1] - 129 / 2;
//                mm.setValues(values);
//                v.invalidate();
//            }
//            return false;
//        }
//    };
//    v.setOnTouchListener(l);
    setContentView(v);

anim_set.xml 看起来像:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="true"
>
    <rotate
        android:fromDegrees="0"
        android:toDegrees="30"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="2500"
    />
    <scale
        android:fromXScale="1"
        android:toXScale="1.8"
        android:fromYScale="1"
        android:toYScale="1.8"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="2500"
    />
</set>

带有以下图片:

background.png:

layer0.png:

layer1.png:

结果是:

重要 为了防止资源在从不同的 drawable-* 文件夹加载时自动缩放,您必须使用从 LayeredImageView.getResources() 方法获取的 Resources 对象

玩得开心!

关于android - 如何维护多层 ImageView 并根据最大的一个保持它们的纵横比?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16729169/

有关android - 如何维护多层 ImageView 并根据最大的一个保持它们的纵横比?的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  4. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息? 最佳答案 在Rails3中,update_all不返回任何有意义的信息,除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  5. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  6. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  7. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  8. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们? - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  9. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  10. ruby - 使用 Vim Rails,您可以创建一个新的迁移文件并一次性打开它吗? - 2

    使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta

随机推荐