如何保持图像按钮宽高比在android系统？

Question

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

我想怎么把它做的是扩展宽度适合整齐地在屏幕的底部（其它现在OK）并排的一面，但具有高度自动缩放，以匹配的宽度为好。这可能吗？我不想因为那时它把周围的ImageButton边框使用setImageSource。

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

Answer 2

而不是

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> 

Answer 3

我相信你想有相同宽度的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> 

Answer 4

我在试图让我的按钮也有类似的头痛行。我找到的解决方案是结合使用（代码setImageSource）ImageButton和android:src财产与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> 

Answer 5

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

Answer 6

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

您可以指定按钮的高度在价值观xhdpi或价值观sw720dp为例为：

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

然后你可以使用指定的高度时，该扪值：

android:layout_height="@dimen/button_height" 

Answer 7

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

Answer 8

调查制作自定义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" /> 

Answer 9

您可以使用谷歌的百分比相对布局，可以帮助您管理视图长宽比。

可以使用像这样

 <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