画面の下部に並べて配置したい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の周りに境界線が配置されるためです。
<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);
}
}
ボタンを一列に並べようとすると、同様の頭痛の種があります。私が見つけた解決策は、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>
の代わりに
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>
ビューのアスペクト比を管理するのに役立つ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が期待する形式です
詳細に読むことができます こちら
今年から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"
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>
カスタム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" />
ViewGroup.LayoutParams params = imageButtonName.getLayoutParams();
// Changes the height(or width) and width(or height) to the specified
params.height = layout.getWidth();
ImageButtonsの幅をfill_parent
に設定し、左マージンを抱き締める画像にはscaletype fitStart
を使用し、右側の画像にはfitEnd
を使用します。少なくともサンプル画像の範囲内で、トリックを行う必要があります。画像の比例幅が画面の幅を超える場合、間隔の問題が発生する可能性がありますが、それはうまくいくはずです。