如何在Android應用程序中創建此類型的用戶界面？

Question

在此用戶界面中，有一個圖片和文字底部。我如何創建這種類型的用戶界面。其實我不明白它是哪種類型的用戶界面。

Answer 1

使用自定義列表視圖和用於行創建自定義視圖， 用於創建自定義佈局行用戶，相對佈局，相對佈局使用圖像視圖內按高度和寬度爲= FILL_PARENT/match_parent。並比用戶一個textview的底部和設置transperent色彩風格，做一些填充，設置屬性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放置在每個底部以創建標題。