要填充的 ImageButton 集可用 Space

Question

在我的 UI 设计中，我有一个宽度可变的区域（取决于显示尺寸和方向）。这个区域我想用一组正方形 ImageButtons 填充，具有以下约束

按钮填满区域的整个宽度并自动适应不同的显示方向和宽度
例外：按钮不会增长到超过某个最大尺寸，然后左对齐
按钮是正方形并保持正方形
按钮图片相当大 (300x300px)，应按比例缩小以填充按钮

为此，我使用 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.

的值目录中应该有不同的维度

我尝试对布局进行一些更改，您可以根据需要重新配置。请注意，如果您增加 ImageButton 的 width，而不管它是 height，它将从 square

变为 rectangle

<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>

Output

Answer 2

我发现 ImageButtons 在调整大小时不能很好地保持图像的纵横比。替代方法是创建自己的按钮控件并添加缺失的行为，或者简单地使用 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) {
                // ...
            }
        });
    }
}

要填充的 ImageButton 集可用 Space

Set of ImageButtons to Fill Available Space

android

android-layout

android-linearlayout

android-imagebutton