Как сохранить соотношение сторон на кнопках изображения в android?

У меня есть 5 квадратных кнопок изображения, которые я хочу выстроить рядом друг с другом в нижней части экрана. У меня есть каждый набор (разные идентификаторы) как:

<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, потому что тогда он помещает рамку вокруг кнопки изображения.

Solutions Collecting From Web of "Как сохранить соотношение сторон на кнопках изображения в android?"

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

У меня была аналогичная головная боль, пытаясь получить мои кнопки подряд. Решение, которое я нашел, это использовать ImageButton и свойство android:src ( setImageSource в коде) в сочетании с android:background="@null"

Насколько я понимаю, фон кнопки изображения не влияет на adjustViewBounds , это только изображение, которое вы установили в android:src .

Поведение по умолчанию – это дать вам квадратную кнопку с изображением в середине. Вы можете переопределить это, установив фон на @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> 

Вместо

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

Я уверен, что вы хотите иметь 5 кнопок ширины / высоты EQUAL. Если это так, то возьмите 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> 

Вы можете использовать относительную компоновку процента от 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 с этого года я обнаружил, что Google использует значения dimen для указания высоты или ширины varios на основе типа экрана. Подробнее о исходном коде можно узнать на странице http://code.google.com/p/iosched/ .

Вы можете указать высоту кнопки для примера в значениях-xhdpi или values-sw720dp как:

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

И тогда вы можете просто использовать это значение dimen при указании высоты:

 android:layout_height="@dimen/button_height" 

Задайте ширину ImageButtons для fill_parent и используйте scaletype fitStart для изображений, которые обнимают левое поле, и fitEnd для тех, которые fitEnd справа. Должен сделать трюк, по крайней мере, насколько ваш пример изображения. У вас могут быть некоторые проблемы с интервалом, если пропорциональная ширина изображений превышает ширину экрана, но она должна работать для вас.

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

Посмотрите на создание пользовательского 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" />