如何保持圖像按鈕寬高比在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