Попытка понять макеты Android, размеры и отношения изображений

Question

Я разрабатываю приложения для Android уже более года с успехом, но для меня все еще проблема: Как создать макет с помощью комбинации TextViews, ImageViews и Buttons, сохраняя при этом связь между каждым элементом на разных размерах экрана.

Я хочу, чтобы построить макет так:

Это для ListView, используются многие из этих макетов. Приложение имеет разный формат для смартфонов и планшетов.

Таким образом, оранжевая кнопка справа должна иметь 3 строки текста, но должна иметь максимальную ширину, изображение слева должно иметь ту же высоту, что и кнопка справа. 3 строки текста в середине должны занимать столько места, сколько они могут. Звездное изображение должно иметь ту же самую высоту, что и текст справа.

мне удалось построить аналогичный тест макет с TableLayout, вот превью от AndroidStudio: Nexus S

Nexus 6

На нексус S размер экрана, макет в порядке, но на больших экранах это уродливо. Кнопка слишком маленькая, изображение слева тоже слишком мало.

Вот код для моего тестового макета:

<TableLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:stretchColumns="1" 
> 
<TableRow android:orientation="horizontal" 
      android:layout_height="wrap_content"> 
    <ImageView 
     android:id="@+id/iv1" 
     android:layout_width="80dp" 
     android:layout_height="match_parent" 
     android:contentDescription="@string/dummy" 
     android:padding="@dimen/raster4dp" 
     android:scaleType="fitXY" 
     android:src="@drawable/avatar_1" /> 

    <RelativeLayout 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:orientation="vertical"> 
     <TextView 
      android:id="@+id/tv1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="some nice text here" 
      android:layout_alignParentLeft="true" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      /> 
     <ImageView 
      android:id="@+id/iv2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_below="@id/tv1" 
      android:src="@drawable/ic_male_user_bw" 
      android:layout_alignParentLeft="true" 
      /> 
     <TextView 
      android:id="@+id/tv2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="more nice text" 
      android:layout_toRightOf="@id/iv2" 
      android:layout_alignBottom="@id/iv2" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      /> 
     <ImageView 
      android:id="@+id/iv3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_below="@id/iv2" 
      android:layout_alignParentLeft="true" 
      android:src="@drawable/ic_male_user_bw" 
      /> 
     <TextView 
      android:id="@+id/tv3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="more nice text" 
      android:layout_toRightOf="@id/iv3" 
      android:layout_alignBottom="@id/iv3" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      /> 
    </RelativeLayout> 

    <Button 
     android:id="@+id/btn1" 
     android:layout_width="80dp" 
     android:layout_height="wrap_content" 
     android:background="@drawable/button_dropshadow_black_xml" 
     android:text="Line1\nLine2\nLine3" 
     android:textColor="@android:color/white" /> 
</TableRow> 
</TableLayout> 

Так, надеюсь, что мой вопрос не слишком глупо, но у меня есть некоторые проблемы с пониманием того, как это исправить. В настоящее время я использую ширину фиксированного 80dp на кнопке и изображение слева. Я думаю, что это не так, как это работает на Android. Какие размеры мне нужно использовать здесь, какие макеты?

Разделы о sreensizes и т. Д. На сайте разработчика известны мне (https://developer.android.com/guide/practices/screens_support.html), но это было не так полезно для меня.

Спасибо за помощь! :)

Answer 1

Каждый терминал имеет разные размеры. Если вы нажмете кнопку с размером 80dp, когда другой экран терминала больше, эта кнопка будет меньше по сравнению с экраном терминала, на котором вы проводили тесты.

Вам необходимо сыграть с WEIGHT.

|    |       |   | 
|_____________|_________________________|____________| 
     0.3    0.5     0.2  0.3 + 0.5 + 0.2 = 1 <-Weight. 

Прочитано this, поможет. Также there's a question аналогичный вашему, проверьте его тоже.

Answer 2

DP предназначен для установки фиксированного количества пикселей, если вы не хотите рассматривать плотность пикселей экрана вашего устройства. Это позволяет вам отображать кнопку с таким же размером в Nexus 4,5 или в Samsung Galaxy Mini.

Тот же «абсолютный» размер. Это означает, что если ваш образ слишком велик, он может поместиться в Nexus, но нет в другом из-за его меньшего экрана. Это связано с тем, что он не зависит от размера экрана, ни от плотности пикселей.

Что я вряд ли рекомендую вам использовать LinearLayouts (с их весом атрибутов) и RelativeLayouts в качестве прямых детей (в случае необходимости). Это может быть «одинаково» (не совсем), чем использование «%» в CSS.

Здесь вы можете увидеть пример атрибута веса (второй ответ дает вам больше советов).

Linear Layout and weight in Android

Я надеюсь, что это помогает !!

Answer 3

проверка этого .... увеличение родительская высота макета при необходимости:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" > 

    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="2" 
     android:orientation="horizontal" > 

     <ImageView 
      android:id="@+id/iv1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:contentDescription="dummy" 
      android:src="@drawable/ic_launcher" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="6" 
     android:orientation="vertical" > 

     <TextView 
      android:id="@+id/tv1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="some nice text here" 
      android:textAppearance="?android:attr/textAppearanceMedium" /> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:orientation="horizontal" > 

      <ImageView 
       android:id="@+id/iv2" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/ic_launcher" /> 

      <TextView 
       android:id="@+id/tv2" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="more nice text" 
       android:textAppearance="?android:attr/textAppearanceMedium" /> 
     </LinearLayout> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:orientation="horizontal" > 

      <ImageView 
       android:id="@+id/iv3" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/ic_launcher" /> 

      <TextView 
       android:id="@+id/tv3" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="more nice text" 
       android:textAppearance="?android:attr/textAppearanceMedium" /> 
     </LinearLayout> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:orientation="horizontal" > 

      <ImageView 
       android:id="@+id/iv23" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/ic_launcher" /> 

      <ImageView 
       android:id="@+id/iv24" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/ic_launcher" /> 
     </LinearLayout> 
    </LinearLayout> 

    <Button 
     android:id="@+id/btn1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="2" 
     android:background="#565657" 
     android:text="Line1\nLine2\nLine3" 
     android:textColor="@android:color/white" /> 

</LinearLayout>