创建微信发现页列表布局实践-优快云博客

一、实验目标

模仿微信“发现”页创建列表布局，学习使用Textview、imageview、LinearLayout

二、实验步骤

准备工作

首先下载好所需的素材，图标素材提前放进mipmap文件夹中。

页面编写

首先设置一个外部总垂直布局，包含所有的列表数组。用到线性布局<LinearLayout>，让控件在线性方向上依次排列。

创建列表组的父布局，对父布局设置背景色和垂直方向。这里的match_parent是让视图的宽/高被设置为充满整个父布局。

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

然后在父布局中用几个<LinearLayout>来分别构建每个列表组。

用<LinearLayout>构建第一个列表组，设置好宽高、背景色后，构建<TextView>文本框，设置好字体颜色大小等属性。layout_marginBottom可以设置该组件和下一组件的距离。

    <!--发现页面-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="8dp"
        android:background="#e5e5e5"
        android:orientation="horizontal">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="18dp"
            android:textColor="#0b1219"
            android:text="发现"
            android:gravity="center"
            android:textStyle="bold"/>

    </LinearLayout>

第一个列表只包含“朋友圈”一个程序，其中包含三个元素，分别是图标、文字和箭头。

首先设置好列表的宽高和背景色，每个程序的元素都是水平排列的，所以设置方向为horizontal。第一个组件<ImageView>用来显示图标图片，第二组件<TextView>用来显示文字，第三个组件<ImageView>用来显示箭头图片。其中center_vertical限定了组件的内容要垂直居中展示。

    <!--第一个列表-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:background="#fff">

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/icon_pengyou"  />

        <TextView
            android:layout_width="299dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:text="朋友圈"
            android:textColor="#333"
            android:textSize="20dp"
            android:textStyle="bold" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="@mipmap/right" />

    </LinearLayout>

第二个列表包含两个小程序，所以在列表中需要两个<LinearLayout>来分别布局两个程序。代码结构和上述差不多，所以不再赘述，一定要注意组件排列方向和各组件之间的位置关系。

    <!--第三个列表-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:background="#fff"
        android:layout_marginTop="15dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginLeft="15dp"
                android:layout_gravity="center_vertical"
                android:background="@mipmap/insurance"  />

            <TextView
                android:layout_width="299dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:text="保险"
                android:textColor="#333"
                android:textSize="20dp"
                android:textStyle="bold" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:background="@mipmap/right" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginLeft="15dp"
                android:layout_gravity="center_vertical"
                android:background="@mipmap/shenghuojiaofei"  />

            <TextView
                android:layout_width="299dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:text="生活缴费"
                android:textColor="#333"
                android:textSize="20dp"
                android:textStyle="bold" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:background="@mipmap/right" />

        </LinearLayout>