Question

在此界面中，底部有一个图片和文字。如何创建此类型的UI。实际上我无法理解它的UI类型。

Here is the Image Reference

Answer 1

使用自定义列表视图并为行创建自定义视图，用于创建自定义行布局用户，相对布局，内部相对布局使用图像视图按高度和宽度= fill_parent / match_parent。并且比用户一个textview为bottom并设置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，在自定义适配器的onView方法上使用充气器，如下所示，

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

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

或者您也可以使用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

您可以使用linear layout以这种方式创建3个垂直剖面布局

<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以创建标题。

如何在Android应用中创建此类UI？

4 个答案: