如何在android中的图像按钮上保持宽高比?

时间:2011-01-11 11:12:48

标签: android imagebutton aspect-ratio

我有5个方形的ImageButtons,我想在屏幕的底部并排排列。我将每一组(不同的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,因为它在图像按钮周围放置了一个边框。

9 个答案:

答案 0 :(得分:32)

   <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);
    }
}

答案 1 :(得分:29)

我试图连续按下按钮时遇到了类似的麻烦。我找到的解决方案是将ImageButtonandroid:src属性(代码中为setImageSource)与android:background="@null"

结合使用

据我了解,图片按钮的背景不会受到adjustViewBounds的影响,只有您在imageView中设置的android:src

然后默认行为是为您提供一个方形按钮,其中间有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>

答案 2 :(得分:12)

而不是

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>

答案 3 :(得分:3)

您可以使用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

答案 4 :(得分:1)

我相信你想拥有EQUAL宽度/高度的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>

答案 5 :(得分:1)

从今年开始检查Google I / O示例应用程序后,我发现Google正在使用维度值来根据屏幕类型指定varios高度或宽度。有关详细信息,您可以查看http://code.google.com/p/iosched/的源代码。

您可以在values-xhdpi或values-sw720dp中将按钮的高度指定为例如:

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

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

android:layout_height="@dimen/button_height"

答案 6 :(得分:0)

将ImageButtons的宽度设置为fill_parent,并将scaletype fitStart用于拥抱左边距的图像,将fitEnd用于右边的图像。应该这样做,至少就你的示例图像而言。如果图像的比例宽度超出屏幕宽度,则可能会出现间距问题,但它应该适合您。

答案 7 :(得分:0)

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

答案 8 :(得分:0)

研究制作自定义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" />