web-dev-qa-db-ja.com

Androidの画像ボタンのアスペクト比を維持するにはどうすればよいですか？

画面の下部に並べて配置したい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を使用したくないのは、imagebuttonの周りに境界線が配置されるためです。

androidimagebuttonaspect-ratio
34
clayton33
   <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);
    }
}
32
neteinstein

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

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

デフォルトの動作では、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>
29
leafcutter

の代わりに

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

ビューのアスペクト比を管理するのに役立つ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が期待する形式です

詳細に読むことができます こちら

3
Tushar

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

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

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

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

Android:layout_height="@dimen/button_height"
1
bogdan

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>
1
Paresh Mayani

カスタム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" />
0
yeahdixon
ViewGroup.LayoutParams params = imageButtonName.getLayoutParams();
// Changes the height(or width) and width(or height) to the specified 
params.height = layout.getWidth();
0
Massimo Variolo

ImageButtonsの幅をfill_parentに設定し、左マージンを抱き締める画像にはscaletype fitStartを使用し、右側の画像にはfitEndを使用します。少なくともサンプル画像の範囲内で、トリックを行う必要があります。画像の比例幅が画面の幅を超える場合、間隔の問題が発生する可能性がありますが、それはうまくいくはずです。

0
user647826