比例视图及其分层子视图相对 [英] Scale a view and its layered subviews relatively

问题描述

（这是有点在的Andr​​oid后续：如何扩展多个视图在一起？）

我的任务是端口一个iPhone / iPad应用程序在Android上，由上动画的绝对位置在上面运行一个简单的图像视图。虽然这听起来在iOS上，你只需要针对一些可能的屏幕尺寸比较容易，它变得相当混乱与Android。

我的当前的设置是这样的：甲RelativeLayout的，其中我将我的主（背景）的图像上向左= 0，顶部= 0和用作动画容器被定位相对向的左上角多个ViewFlipper实例父布局实例。

该方法有两个基本问题：

1. 的定位动画是错误置位只要布局的实际尺寸不匹配主背景图像的大小

2. 的位置动画也是错误大小，因为自他们通常有足够的空间在自己的周围，Android不扩展他们融入RelativeLayout的（也不会相对扩展他们原来的背景。

由于动画本身必须是互动的，它不是一个解决方案，以放置和位置所有动画上具有相同的尺寸为主体（背景）图像的透明层的，因为它们会彼此重叠，并且只有最上面的是互动的。

我想不同的解决方案：

1. 要获得主图像的比例因子，我可以检索其是measuredWidth 和是measuredHeight 并设置到视图的原宽度和高度的关系这一点。然后，我用这个比例系数进行自定义定位，最终的自定义缩放。但是，显然是measuredWidth / - 高度属性只的 onMeasure（）打电话，这就是所谓的组件树建成后，所以我不知道这个方案是可行的。

2. 实现自己的布局管理器和规模/位置的相应意见。我看了一下 RelativeLayout的的实施，但不得不承认，<一个href="http://grep$c$c.com/file/repository.grep$c$c.com/java/ext/com.google.android/android/2.3.4_r1/android/widget/RelativeLayout.java#299"相对=nofollow> onMeasure（）方法让我害怕了一下。

你会在我的情况吗？难道有什么我还没有考虑到？

在此先感谢。

解决方案

好了，回答我的问题 - 这里是我解决这个问题的方式：

1. 我放在背景图像上我的的ImageView顶部与 ImageView.setScaleType（ScaleType.FIT_START）
2. 在我计算了我的背景图片的比例因子，像这样：

    窗口管理经理=（窗口管理器）上下文
                .getSystemService（Context.WINDOW_SERVICE）;
    DisplayMetrics指标=新DisplayMetrics（）;
    mgr.getDefaultDisplay（）getMetrics（度量）。
    绘制的图像= context.getResources（）getDrawable（R.drawables.someImage）。
    浮规模= metrics.widthPixels /（浮点）image.getIntrinsicWidth（）;

1. 最后，我用这个规模在加载覆盖定位和规模的看法正确的自定义ImageView的类：

    公共类OverlayImage扩展的ImageView
    {
        私人诠释imgWidth，imgHeight;
        私人最终浮动规模;

        公共OverlayImage（上下文的背景下，诠释XPOS，INT yPos，浮动比例）
        {
            超（上下文）;
            this.scale =规模;

            的LayoutParams animParams =新的LayoutParams（LayoutParams.WRAP_CONTENT，
                    LayoutParams.WRAP_CONTENT）;
            animParams.addRule（RelativeLayout.ALIGN_PARENT_LEFT）;
            animParams.addRule（RelativeLayout.ALIGN_PARENT_TOP）;
            animParams.leftMargin =（INT）（规模* XPOS）;
            animParams.topMargin =（INT）（规模* yPos）;
            setLayoutParams（animParams）;

            。可绘制博士= context.getResources（）getDrawable（R.id.someImage）;
            setBackgroundDrawable（DR）;
            imgWidth = dr.getIntrinsicWidth（）;
            imgHeight = dr.getIntrinsicHeight（）;
        }

        @覆盖
        保护无效onMeasure（INT widthMeasureSpec，INT heightMeasureSpec）
        {
            setMeasuredDimension（（INT）（规模* imgWidth）
                    （INT）（规模* imgHeight））;
        }
    }

(This is somewhat a follow-up on Android: How do you scale multiple views together?)

My task is to port an iPhone / iPad app on Android that consists of a simple image view on which animations are layered on top in absolute positions. While this sounds rather easy on iOS where you only have to target a few possible screen sizes, it gets rather messy with Android.

My current setup is this: A RelativeLayout in which I place my main (background) image on left = 0, top = 0 and multiple ViewFlipper instances used as "animation containers" that are positioned relatively to the upper left corner of the parent layout instance.

This approach has two basic problems:

1. The positioned "animations" are mis-positioned as soon as the actual size of the layout does not match the size of the main background image.

2. The positioned "animations" are also mis-sized, because since they usually have "enough space" around themselves, Android doesn't scale them to fit into the RelativeLayout (nor would it scale them relatively to the original background.

Since the animations itself must be interactive, its not a solution to place and position all of the animations on a transparent layer that has the same size as the main (background) image, as they'd overlap each other and only the upper-most would be interactive at all.

I thought of different solutions:

1. To get the the scale factor of the main image, I could retrieve its measuredWidth and measuredHeight and set this into relation of the original width and height of the view. Then I'd use this scale factor for custom positioning and eventually custom scaling. But, apparently the measuredWidth/-Height properties are only set during the onMeasure() call and this is called after the component tree was built, so I don't know if this solution is feasible at all.

2. Implement my own layout manager and scale / position the views accordingly. I had a look at the implementation of RelativeLayout, but have to admit that the onMeasure() method scares me a bit.

What would you do in my case? Is there anything I haven't yet taken into account?

Thanks in advance.

解决方案

Well, answering my own question - here is the way I resolved the issue:

1. I placed the background image on the top of my ImageView with ImageView.setScaleType(ScaleType.FIT_START)
2. I calculated the scale factor of my background image like so:

    WindowManager mgr = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
    DisplayMetrics metrics = new DisplayMetrics();
    mgr.getDefaultDisplay().getMetrics(metrics);
    Drawable image = context.getResources().getDrawable(R.drawables.someImage);
    float scale = metrics.widthPixels / (float) image.getIntrinsicWidth();

1. Finally, I used this scale in a custom ImageView class that loads the overlays to position and scale the view properly:

    public class OverlayImage extends ImageView
    {
        private int imgWidth, imgHeight;
        private final float scale;

        public OverlayImage(Context context, int xPos, int yPos, float scale)
        {
            super(context);
            this.scale = scale;

            LayoutParams animParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
                    LayoutParams.WRAP_CONTENT);
            animParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
            animParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
            animParams.leftMargin = (int) (scale * xPos);
            animParams.topMargin = (int) (scale * yPos);
            setLayoutParams(animParams);

            Drawable dr = context.getResources().getDrawable(R.id.someImage);
            setBackgroundDrawable(dr);
            imgWidth = dr.getIntrinsicWidth();
            imgHeight = dr.getIntrinsicHeight();
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
        {
            setMeasuredDimension((int) (scale * imgWidth),
                    (int) (scale * imgHeight));
        }
    }

这篇关于比例视图及其分层子视图相对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！