android - Androidの画像ボタンの縦横比を維持するにはどうすればよいですか?

Question

画面の下部に並べて配置したい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 を使用したくないのは、イメージボタンの周りに境界線を配置するためです。

score 34 · Accepted Answer

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

score 33 · Accepted Answer

ボタンを一列に並べようとして、同様の頭痛がしました。私が見つけた解決策はImageButton、android:srcプロパティ（setImageSourceコード内）と組み合わせて使用することでしたandroid:background="@null"

私が理解しているように、画像ボタンの背景はの影響を受けず、で設定したadjustViewBoundsのみです。imageViewandroid:src

デフォルトの動作では、中央に imageView がある正方形のボタンが表示されます。背景をに設定することでこれをオーバーライドできます。これにより@null、画像だけが残ります。

次に、LinearLayoutまたはテーブルを使用してボタンをレイアウトできます。すべてを XML で行い、次のレイアウトを使用して、画面の下部に 2 つのボタンの行を作成しました。これらのボタンは、さまざまなデバイスの画面サイズで縦横比を維持しながら拡大または縮小します。お役に立てれば。

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

score 12 · Accepted Answer

それ以外の

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>

score 3 · Accepted Answer

ビューのアスペクト比を管理するのに役立つ Google の Percent Relative Layout を使用できます。

こんな感じで使えます

     <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 が期待する形式です

こちらで詳しく読めます

score 1 · Accepted Answer

今年の Google I/O サンプルアプリケーションを確認したところ、Google が画面の種類に基づいてさまざまな高さまたは幅を指定するために dimen 値を使用していることがわかりました。詳細については、http://code.google.com/p/iosched/からソースコードを確認できます。

たとえば、values-xhdpi または values-sw720dp でボタンの高さを次のように指定できます。

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

そして、高さを指定するときにこの寸法値を使用できます。

android:layout_height="@dimen/button_height"

score 1 · Accepted Answer

等幅/高さの 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>

score 0 · Accepted Answer

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

score 0 · Accepted Answer

カスタム ImageButton の作成を検討してください。1つのクラスなので、私はこれが好きです。これは、画像の縦横比に基づいて高さを調整するボタンです。ニーズに合わせて微調整できると思います：

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

score 0 · Accepted Answer

ImageButtons の幅をに設定し、左余白に収まる画像と右端の画像にfill_parentscaletype を使用します。少なくともサンプル画像に関する限り、トリックを行う必要があります。画像の比例幅が画面幅を超えると、間隔の問題が発生する可能性がありますが、問題はありません。fitStartfitEnd

android - Androidの画像ボタンの縦横比を維持するにはどうすればよいですか?

9 に答える 9

Related

Reference