Question

在我的UI设计中，我有一个可变宽度的区域（取决于显示大小和方向）。这个区域我想用一组方括号ImageButton来填充以下约束

按钮填充区域的整个宽度，并自动适应不同的显示方向和宽度
例外：按钮不会超过某个最大尺寸，并且在此之后左对齐
按钮是并保持方形
按钮图像相当大（300x300像素），应按比例缩小以填充按钮

为此，我使用水平方向的LinearLayout，如下面的XML所示。 LinearLayout有layout_height = wrap_content，但它似乎伸展到可用高度，导致按钮不是正方形。此外，max_width设置似乎没有任何效果。

如何更改xml以获得所需的布局？

 <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     android:id="@+id/layoutImageButtons">

     <ImageButton
         android:layout_width="0dp"
         android:maxWidth="50dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:scaleType="fitXY"
         android:id="@+id/imageButton1" />

     <ImageButton
         android:layout_width="0dp"
         android:maxWidth="50dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:scaleType="fitXY"
         android:id="@+id/imageButton2" />

     <ImageButton
         android:layout_width="0dp"
         android:maxWidth="50dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:scaleType="fitXY"
         android:id="@+id/imageButton3" />

     <ImageButton
         android:layout_width="0dp"
         android:maxWidth="50dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:scaleType="fitXY"
         android:id="@+id/imageButton4" />

 </LinearLayout>

Answer 1

我们建议您，对于height width和ImageButton的不同屏幕尺寸，您应该在值目录中使用不同的维度。

我尝试对布局进行一些更改，您可以根据需要重新配置。请注意，如果你增加width的{{1}}而不论ImageButton height它将成为来自rectangle square >

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

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:layout_weight="0.25"
        android:gravity="center"
        android:padding="4dp">

        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:maxHeight="50dp"
            android:minHeight="50dp"
            android:scaleType="fitXY" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:layout_weight="0.25"
        android:gravity="center"
        android:padding="4dp">

        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:maxHeight="50dp"
            android:minHeight="50dp"
            android:scaleType="fitXY" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:layout_weight="0.25"
        android:gravity="center"
        android:padding="4dp">

        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:maxHeight="50dp"
            android:minHeight="50dp"
            android:scaleType="fitXY" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:layout_weight="0.25"
        android:gravity="center"
        android:padding="4dp">

        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:maxHeight="50dp"
            android:minHeight="50dp"
            android:scaleType="fitXY" />
    </LinearLayout>

</LinearLayout>

输出

Answer 2

我发现ImageButton在调整图像大小时不能很好地保持图像的宽高比。替代方案是创建自己的按钮控件并添加缺少的行为，或者只使用ImageViews和OnClickListeners以及下面的布局。

将封闭的LinearLayout宽度设置为wrap_content并将其封装在另一个容器（例如GridLayout）中可确保图像在达到最大尺寸后左对齐。

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/layoutImages">

         <ImageView
            android:layout_width="0dp"
            android:layout_weight="0.25"
            android:adjustViewBounds="true"
            android:layout_height="wrap_content"
            android:maxHeight="50dp"
            android:layout_margin="2dp"
            android:id="@+id/ImageView1" />
        <ImageView
            android:layout_width="0dp"
            android:layout_weight="0.25"
            android:adjustViewBounds="true"
            android:layout_height="wrap_content"
            android:maxHeight="50dp"
            android:layout_margin="2dp"
            android:id="@+id/ImageView2" />
        <ImageView
            android:layout_width="0dp"
            android:layout_weight="0.25"
            android:adjustViewBounds="true"
            android:layout_height="wrap_content"
            android:maxHeight="50dp"
            android:layout_margin="2dp"
            android:id="@+id/ImageView3" />
        <ImageView
            android:layout_width="0dp"
            android:layout_weight="0.25"
            android:adjustViewBounds="true"
            android:layout_height="wrap_content"
            android:maxHeight="50dp"
            android:layout_margin="2dp"
            android:id="@+id/ImageView4" />

    </LinearLayout>

</GridLayout>

而且，为了完整起见，Java代码：

public class ExampleActivity extends Activity {

    ImageView mImageView1;
    ImageView mImageView2;
    ImageView mImageView3;
    ImageView mImageView4;


    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_example);

        // ...

        mImageView1 = (ImageView) findViewById(R.id.ImageView1);
        mImageView2 = (ImageView) findViewById(R.id.ImageView2);
        mImageView3 = (ImageView) findViewById(R.id.ImageView3);
        mImageView4 = (ImageView) findViewById(R.id.ImageView4);

        mImageView1.setClickable(true);
        mImageView1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // ...
            }
        });
        mImageView2.setClickable(true);
        mImageView2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // ...
            }
        });
        mImageView3.setClickable(true);
        mImageView3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // ...
            }
        });
        mImageView4.setClickable(true);
        mImageView4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // ...
            }
        });
    }
}

用于填充可用空间的ImageButtons集

2 个答案: