如何保持android中图像按钮的纵横比？答案

【问题标题】：How do I keep the aspect ratio on image buttons in android?如何保持android中图像按钮的纵横比？
【发布时间】：2011-06-07 02:50:36
【问题描述】：

我有 5 个方形 ImageButton，我想在屏幕底部并排排列。我将每一组（不同的 id）设置为：

        <ImageButton
         android:id="@+id/box1" 
         android:layout_width="fill_parent"
         android:layout_height="wrap_content" 
         android:layout_gravity="center"
         android:adjustViewBounds="true"
         android:scaleType="fitXY"
         android:layout_weight="1"
         android:layout_margin="1dp"
         />

我在主 java 中分配了这样的背景：

    int[] imageIds = new int[] {R.id.box1,R.id.box2,R.id.box3,R.id.box4,R.id.box5};
    for(int i = 0; i<5; i++){
        imageButtons[i] = (ImageButton) findViewById(imageIds[i]);
        imageButtons[i].setBackgroundResource(R.drawable.blank);
    }

我想让它做的是缩放宽度以整齐地并排放置在屏幕底部（现在可以了），但高度也会自动缩放以匹配宽度。这可能吗？我不想使用 setImageSource，因为它会在图像按钮周围设置边框。

【问题讨论】：

标签： android imagebutton aspect-ratio

【解决方案1】：

   <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:id="@+id/layoutButtons">

     <com.package.SquareButton         
        android:layout_height="fill_parent"
        android:layout_width="0dip"          
        android:layout_weight="1"

        <ImageView
        android:id="@+id/box1"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:layout_height="wrap_content"
        android:layout_width="0dp"          
        android:layout_weight="1" 
        android:layout_marginLeft="5dp" 
        android:layout_marginRight="5dp"/>

      </com.package.SquareButton>

      <com.package.SquareButton         
        android:layout_height="fill_parent"
        android:layout_width="0dip"          
        android:layout_weight="1"

        <ImageView
        android:id="@+id/box2"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"          
        android:layout_marginLeft="5dp" 
        android:layout_marginRight="5dp"/>

</com.package.SquareButton>

   .........          
 </LinearLayout>

然后添加这个自定义按钮类：

public class SquareButton extends LinearLayout {

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

    public SquareButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    // This is used to make square buttons.
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }
}

【讨论】：

终于！这为我做了。在我看来，应该有一个更简单的方法，但判断它花了将近一年的时间才得到一个对我有用的答案，我认为就是这样。非常感谢！
SquareButton直接派生自ImageButton而不是LinearLayout不是更好吗？ UI 线程会很感激的，我敢肯定 :)
你能解释一下区别吗？
你知道你会让一个图像保持它的纵横比并与父右边而不是中心对齐吗？
最好将其命名为 SquareLayout

【解决方案2】：

在尝试将按钮排成一排时，我也有类似的头痛。我找到的解决方案是结合使用ImageButton 和android:src 属性（代码中的setImageSource）与android:background="@null"

据我了解，图像按钮的背景不受adjustViewBounds 的影响，它只是您在android:src 中设置的imageView。

默认行为是给你一个方形按钮，中间有 imageView。您可以通过将背景设置为 @null 来覆盖它，这样您就只剩下图像了。

然后您可以使用LinearLayout 或表格来布局您的按钮。我在 XML 中完成了所有操作，并使用以下布局在屏幕底部创建了一排两个按钮，这些按钮可按比例放大或缩小，以保持不同设备屏幕尺寸的纵横比。希望这会有所帮助。

<TableLayout    
    android:id="@+id/tableLayout2"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="20dip"
    android:stretchColumns="*">

    <TableRow>

     <ImageButton
        android:id="@+id/button_one"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="0.5"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"  
        android:onClick="clickOne"
        android:background="@null"
        android:src="@drawable/button_one_drawable" />

    <ImageButton
        android:id="@+id/button_two"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="0.5"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"  
        android:onClick="clickTwo"
        android:background="@null"
        android:src="@drawable/button_two_drawable" />

    </TableRow>      
</TableLayout>

【讨论】：

这就是我一直在寻找的答案！您的解释帮助我更好地理解 ImageButton。 :D
这是最好的答案。如果您想固定高度并希望宽度根据纵横比自动缩放，则效果很好。 +1
做得很好。在弄乱了 GridLayout 一天之后，这非常有效。谢谢。
这个对我来说比 SquareButton 类效果更好，因为该类对我来说仍然存在一些裁剪问题，大概是因为它在布局管理器中未被识别为“图像类型”。谢谢。
效果很好！但我无法将背景设置为空，所以我让它透明：android:background="#00000000"

【解决方案3】：

代替

android:scaleType="fitXY"

使用：

android:scaleType="centerInside"

EDIT1：试试这个：

    <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/layoutToInflateButtons"
            >
    <ImageButton 
        android:id="@+id/box1"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"          
        android:layout_weight="1"          
        android:layout_margin="1dp"
        />          
    </LinearLayout>

【讨论】：

聪明的回答（并且没有弄乱子类），谢谢！
我必须将android:layout_width="wrap_content" android:layout_height="0dp" 添加到ImageButton 才能使这段代码工作。

【解决方案4】：

您可以使用 Google 的百分比相对布局来帮助您管理视图纵横比。

你可以这样使用它

     <android.support.percent.PercentRelativeLayout
             xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:app="http://schemas.android.com/apk/res-auto"
             android:layout_width="match_parent"
             android:layout_height="match_parent">

         <ImageButton
             android:id="@+id/box1" 
             android:layout_width="fill_parent"
             android:layout_height="wrap_content" 
             android:layout_gravity="center"
             android:adjustViewBounds="true"
             android:scaleType="fitXY"
             app:layout_aspectRatio="100%"
             android:layout_weight="1"
             /> 
     </android.support.percent.PercentFrameLayout>

纵横比 100% 将使宽度与高度相同。

示例：

android:layout_width="300dp"
app:layout_aspectRatio="178%"

宽度为高度的 178%。这是 layout_aspectRatio 期望的格式

可以详细阅读here

【讨论】：

【解决方案5】：

我确定您希望拥有 5 个宽度/高度相等的按钮。如果是这种情况，请使用 LinearLayout 并将所有这 5 个按钮与 layout_width="0dip" 和 layout_weight="1"

例如：

<LinearLayout
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:id="@+id/layoutButtons">

    <ImageButton 
        android:id="@+id/box1"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:layout_height="wrap_content"
        android:layout_width="0dip"          
        android:layout_weight="1"/>

    <ImageButton 
        android:id="@+id/box2"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:layout_height="wrap_content"
        android:layout_width="0dip"          
        android:layout_weight="1"/>    

   .........          
 </LinearLayout>

【讨论】：

不，我试过你的代码，它看起来像这样：i.imgur.com/3piDS.jpg 它应该看起来像这样imgur.com/4FFzD（忽略添加的边距）。我让它工作的唯一方法是通过改变边距和周围的东西来作弊，但是当我使用不同的显示器尺寸（如平板电脑）时，一切都搞砸了。所以现在我要回到我的原始代码并尝试让它工作。如果有帮助，图片是 90x90 像素。

【解决方案6】：

在检查了今年的 Google I/O 示例应用程序后，我发现 Google 使用维度值来根据屏幕类型指定不同的高度或宽度。详情可以查看http://code.google.com/p/iosched/的源代码。

您可以在 values-xhdpi 或 values-sw720dp 中指定按钮的高度，例如：

 <resources>
    <dimen name="button_height">50dp</dimen>
</resources>

然后你可以在指定高度时使用这个维度值：

android:layout_height="@dimen/button_height"

【讨论】：

【解决方案7】：

将 ImageButtons 的宽度设置为 fill_parent 并使用 scaletype fitStart 用于紧靠左边距的图像，fitEnd 用于右侧的图像。至少就您的示例图像而言，应该做到这一点。如果图像的比例宽度超过屏幕宽度，您可能会遇到一些间距问题，但它应该适合您。

【讨论】：

【解决方案8】：

ViewGroup.LayoutParams params = imageButtonName.getLayoutParams();
// Changes the height(or width) and width(or height) to the specified 
params.height = layout.getWidth();

【讨论】：

【解决方案9】：

考虑制作自定义 ImageButton。我喜欢这个，因为它是一类。这是一个根据图像纵横比调整其高度的按钮。我想您可以根据自己的需要进行调整：

public class AspectImageButton extends ImageButton {


public AspectImageButton(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
    this.getDrawable();

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int width = getMeasuredWidth();

    Drawable d=this.getDrawable(); //grab the drawable

    float fAspectRatio=(float)d.getIntrinsicWidth()/(float)d.getIntrinsicHeight();

    float fHeight=(float)width/fAspectRatio;//get new height

    setMeasuredDimension(width, (int)fHeight);
}

public AspectImageButton(Context context, AttributeSet attrs) {
    super(context, attrs);

    // TODO Auto-generated constructor stub
}

public AspectImageButton(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    // TODO Auto-generated constructor stub
}

}

然后在 xml 中像这样使用它：

<com.package.AspectImageButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/home_1b"
                android:background="@null"
                android:scaleType="fitXY"
                android:adjustViewBounds="true" />

【讨论】：