Как создать этот тип пользовательского интерфейса в приложении для Android?

Question

В этом интерфейсе есть одно изображение Изображение и Текст внизу. Как создать этот тип интерфейса. На самом деле я не могу понять, какой тип UI есть.

Answer 1

Использовать пользовательский вид списка и создать пользовательское представление для строки, для создания пользовательского макета пользователь строки, относительное расположения, внутри относительно использование макета зрения изображения в соответствии с высоты и шириной = fill_parent/match_parent. и чем пользовательский текст для нижнего уровня и устанавливает для него стиль цветности, сделайте некоторое дополнение, установите свойство android: layout_alignParentBottom = "true".

Answer 2

Это в основном ListView с более высокими деталями в нем, состоящий из ImageView и TextView в каждом. Образец XML будет,

Нестандартная планировка для пункта row_layout.xml

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

    <ImageView 
     android:id="@+id/photo" 
     android:layout_width="48dp" 
     android:layout_height="48dp" /> 

    <TextView 
     android:id="@+id/label" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 

</LinearLayout> 

И главный файл макета,

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".MainActivity" > 

<ListView 
    android:id="@+id/list" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    /> 

</RelativeLayout> 

Загрузите этот row_layout.xml usign инфлятор по методу OnView из ваш пользовательский адаптер, например,

... 
    @Override 
    public View getView(int position, View convertView, ViewGroup parent) { 
     View rowView; 

     rowView = mInflater.inflate(R.layout.row_layout, null); 
     ... 
} 
... 

Альтернативно, вы можете als o используйте RecyclerView, CardLayout и отправьте все с помощью DataBinding. Что касается привязки данных, посмотрите на официальной документации https://developer.android.com/topic/libraries/data-binding/index.html

Answer 3

Вы можете попробовать этот макет в вашем RecyclerView или ListView адаптер

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

<android.support.v7.widget.CardView 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <ImageView 
     android:id="@+id/image" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:scaleType="fitXY" /> 

    <TextView 
     android:id="@+id/imageText" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="181dp" 
     android:gravity="center" 
     android:textColor="@color/white" 
     android:textStyle="bold"/> 

</android.support.v7.widget.CardView> 

<TextView 
    android:id="@+id/imageDesc" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"/> 

Answer 4

Вы можете создать 3 вертикальные секции макета с использованием linear layout таким образом

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" > 

    <LinearLayout 
     android:id="@+id/a" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_weight="1" > 
    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/b" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_weight="1" > 
    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/c" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_weight="1" > 
    </LinearLayout> 

</LinearLayout> 

И место text views внизу каждого, чтобы создать подпись.