如何缩放3个图像以适应屏幕宽度

时间:2015-12-11 14:10:54

标签: android android-layout

这是我追求的结果: 3 images

基本上我想缩放3张图像,使它们具有相同的高度,并且一起填充屏幕宽度。原始图像都具有相同的高度。

这可以使用布局完成,不需要代码进行宽度计算吗?

4 个答案:

答案 0 :(得分:1)

只需使用布局权重。

在主布局或包含ImageViews的布局中,输入

android:weightSum="10"

然后在单个ImageView中,将layout_weights放在下面,或者达到您的要求。

enter image description here 这基本上意味着图像的宽度分别为25%,55%和20%

答案 1 :(得分:0)

您可以使用指定权重属性的线性布局,如下所示:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="0dp"
        android:src="@drawable/bg_canvas"
        android:layout_height="300dp"
        android:layout_weight="0.33"/>
    <ImageView
        android:layout_width="0dp"
        android:src="@drawable/bg_canvas"
        android:layout_height="300dp"
        android:layout_weight="0.33"/>
    <ImageView
        android:layout_width="0dp"
        android:layout_height="300dp"
        android:src="@drawable/bg_canvas"
        android:layout_weight="0.33"/>
</LinearLayout>

如果您需要任何进一步的信息,请在下方评论

答案 2 :(得分:0)

试试这个:

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_weight="3"
  android:orientation="horizontal">

  <ImageView
    android:id="@+id/imageView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    .../>
  <ImageView
    android:id="@+id/imageView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    .../>
  <ImageView
    android:id="@+id/imageView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    .../>
</LinearLayout>

“魔法”在重量组件中。您在布局中定义总重量为3,图像视图应占三分之一,因此值为1.

答案 3 :(得分:0)

对于我的情况,图像需要在运行时更新,因此没有一个答案是完全适合的。 我最终扩展了LinearLayout并编写了一个统一所有图像高度的小程序,并确保所有图像一起填充LinearLayout宽度。如果有人试图实现相同的目标,我的代码如下所示:

public class MyImgLayout extends LinearLayout
{

public MyImgLayout(Context context)
{
  super(context);
}

public void setup(ArrayList<String> images)
{
        this.setOrientation(LinearLayout.HORIZONTAL);
    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0);
    this.setLayoutParams(layoutParams); //set 0 height until we calculate it in onMeasure

    for (String image : images) {
        ImageView ivArticle = new ImageView(getContext());
        setImageFromName(image, ivArticle); //this where you set the image
        this.addView(ivArticle);
    }

}

private void scaleImages()
{
    if(getMeasuredHeight() == 0 && getMeasuredWidth() > 0) {
        if (isHorizontal) {
            double childRatioSum = 0;
            int images = 0;
            for (int i = 0; i < getChildCount(); i++) {
                ImageView iv = (ImageView) getChildAt(i);
                double width = iv.getDrawable().getIntrinsicWidth();
                double height = iv.getDrawable().getIntrinsicHeight();
                if (height > 0) {
                    childRatioSum += width / height;
                    images++;
                }
            }

            if (childRatioSum > 0 && images == getChildCount()) {
                //all images are downloaded, calculate the container height
                //(add a few pixels to makes sure we fill the whole width)
                double containerHeight = (int) (getMeasuredWidth() / childRatioSum) + images * 0.5;

                for (int i = 0; i < getChildCount(); i++) {
                    ImageView iv = (ImageView) getChildAt(i);
                    double width = iv.getDrawable().getIntrinsicWidth();
                    double height = iv.getDrawable().getIntrinsicHeight();
                    iv.setLayoutParams(new LinearLayout.LayoutParams((int) (width * (containerHeight / height)), (int) containerHeight));
                    iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
                }

                LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) this.getLayoutParams();
                params.width = LayoutParams.MATCH_PARENT;
                params.height = (int) containerHeight;
                this.setLayoutParams(params);
                requestLayout();
            }
        }
    }
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    scaleImages();
}
}