Набор кнопок изображения для заполнения пробела

Question

В моем дизайне пользовательского интерфейса у меня есть область переменной ширины (в зависимости от размера и ориентации дисплея). Этот регион Я хотел бы, чтобы заполнить с набором квадрата ImageButton S со следующими ограничениями

• кнопки заполнить всю ширину области и автоматически адаптироваться к различной ориентации дисплея и ширине
• исключения: кнопки не выйти за пределы определенного максимального размера, и выравнивание по левому краю после этого
• кнопки и остаются квадратной формы
• изображения кнопок довольно большой (300x300px) и должно быть уменьшено, чтобы заполнить кнопки

Для этого я использую LinearLayout с горизонтальной ориентацией, как показано ниже в XML. LinearLayout имеет layout_height = wrap_content, однако он, кажется, тянется к его доступной высоте, в результате чего кнопки не являются квадратными. Кроме того, настройка max_width, похоже, не имеет никакого эффекта.

Как мне изменить xml, чтобы получить желаемый макет?

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:id="@+id/layoutImageButtons"> 

    <ImageButton 
     android:layout_width="0dp" 
     android:maxWidth="50dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:scaleType="fitXY" 
     android:id="@+id/imageButton1" /> 

    <ImageButton 
     android:layout_width="0dp" 
     android:maxWidth="50dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:scaleType="fitXY" 
     android:id="@+id/imageButton2" /> 

    <ImageButton 
     android:layout_width="0dp" 
     android:maxWidth="50dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:scaleType="fitXY" 
     android:id="@+id/imageButton3" /> 

    <ImageButton 
     android:layout_width="0dp" 
     android:maxWidth="50dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:scaleType="fitXY" 
     android:id="@+id/imageButton4" /> 

</LinearLayout> 

Answer 1

я обнаружил, что ImageButton сек дон 't обрабатывать пропорции изображения очень хорошо, когда они изменяются. Альтернативами является создание собственного управления кнопками и добавление отсутствующего поведения или просто использование ImageViews с OnClickListeners с макетом ниже.

Установка заключающего LinearLayout «с шириной до wrap_content и ограждающего его в другом контейнере, такие как GridLayout гарантирует, что изображения выравниваются по левому краю после достижения максимального размера.

<GridLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:id="@+id/layoutImages"> 

     <ImageView 
      android:layout_width="0dp" 
      android:layout_weight="0.25" 
      android:adjustViewBounds="true" 
      android:layout_height="wrap_content" 
      android:maxHeight="50dp" 
      android:layout_margin="2dp" 
      android:id="@+id/ImageView1" /> 
     <ImageView 
      android:layout_width="0dp" 
      android:layout_weight="0.25" 
      android:adjustViewBounds="true" 
      android:layout_height="wrap_content" 
      android:maxHeight="50dp" 
      android:layout_margin="2dp" 
      android:id="@+id/ImageView2" /> 
     <ImageView 
      android:layout_width="0dp" 
      android:layout_weight="0.25" 
      android:adjustViewBounds="true" 
      android:layout_height="wrap_content" 
      android:maxHeight="50dp" 
      android:layout_margin="2dp" 
      android:id="@+id/ImageView3" /> 
     <ImageView 
      android:layout_width="0dp" 
      android:layout_weight="0.25" 
      android:adjustViewBounds="true" 
      android:layout_height="wrap_content" 
      android:maxHeight="50dp" 
      android:layout_margin="2dp" 
      android:id="@+id/ImageView4" /> 

    </LinearLayout> 

</GridLayout> 

И, для полноты картины, код Java:

public class ExampleActivity extends Activity { 

    ImageView mImageView1; 
    ImageView mImageView2; 
    ImageView mImageView3; 
    ImageView mImageView4; 


    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_example); 

     // ... 

     mImageView1 = (ImageView) findViewById(R.id.ImageView1); 
     mImageView2 = (ImageView) findViewById(R.id.ImageView2); 
     mImageView3 = (ImageView) findViewById(R.id.ImageView3); 
     mImageView4 = (ImageView) findViewById(R.id.ImageView4); 

     mImageView1.setClickable(true); 
     mImageView1.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       // ... 
      } 
     }); 
     mImageView2.setClickable(true); 
     mImageView2.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       // ... 
      } 
     }); 
     mImageView3.setClickable(true); 
     mImageView3.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       // ... 
      } 
     }); 
     mImageView4.setClickable(true); 
     mImageView4.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       // ... 
      } 
     }); 
    } 
} 

Answer 2

Я хотел бы предложить вам, что вы должны иметь различные размеры в каталоге значений для различных размеров экрана для height и width для ImageButton.

Я попытался внести некоторые изменения в макет, который вы можете перенастроить по своему усмотрению. Пожалуйста, обратите внимание, если вы увеличиваете width в ImageButton независимо от него это height он станет rectangle из square

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal"> 

    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_margin="4dp" 
     android:layout_weight="0.25" 
     android:gravity="center" 
     android:padding="4dp"> 

     <ImageButton 
      android:layout_width="50dp" 
      android:layout_height="50dp" 
      android:maxHeight="50dp" 
      android:minHeight="50dp" 
      android:scaleType="fitXY" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_margin="4dp" 
     android:layout_weight="0.25" 
     android:gravity="center" 
     android:padding="4dp"> 

     <ImageButton 
      android:layout_width="50dp" 
      android:layout_height="50dp" 
      android:maxHeight="50dp" 
      android:minHeight="50dp" 
      android:scaleType="fitXY" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_margin="4dp" 
     android:layout_weight="0.25" 
     android:gravity="center" 
     android:padding="4dp"> 

     <ImageButton 
      android:layout_width="50dp" 
      android:layout_height="50dp" 
      android:maxHeight="50dp" 
      android:minHeight="50dp" 
      android:scaleType="fitXY" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_margin="4dp" 
     android:layout_weight="0.25" 
     android:gravity="center" 
     android:padding="4dp"> 

     <ImageButton 
      android:layout_width="50dp" 
      android:layout_height="50dp" 
      android:maxHeight="50dp" 
      android:minHeight="50dp" 
      android:scaleType="fitXY" /> 
    </LinearLayout> 

</LinearLayout> 

Выход