模仿微信页创建列表布局

最新推荐文章于 2023-03-03 23:37:49 发布

沈辞-

最新推荐文章于 2023-03-03 23:37:49 发布

阅读量769

点赞数

文章标签： android

本文链接：https://blog.csdn.net/weixin_51178398/article/details/126469578

版权

这篇实验教程详细介绍了如何使用LinearLayout和TextView、ImageView组件在Android中模仿微信的"发现"页面创建列表布局。通过设置背景色、边距、布局方向以及图标和文字的样式，实现了每个列表项的构建，并通过添加间隔实现列表分组效果。

摘要由CSDN通过智能技术生成

一、实验目标

1、模仿微信“发现”页创建列表布局；

2、学习使用Textview，imageview，LinearLayout。

二、实验步骤

1.逻辑梳理

页面上包含五组列表，每组包含1-2个列表项，设计方式如下：首先首先设计一个外部总垂直布局,包含所有的列表组，然后写五个LinearLayout来构建这五个列表组，最后进行列表组之间的间隔样式搭建。

2.代码实现

（1）创建父布局，然后对对父布局设置背景色和垂直方向。

（2）构建第一个列表组，设置设置宽高，背景色以及垂直方向。

（3）创建列表组里的第一个图标，设置宽高、背景色、距离左边的距离等。

（4）创建列表组中的汉字，设置汉字宽高、字体颜色、字体样式、字体大小、与左侧的距离等。
（5）创建列表组右边的箭头，设置宽和高，背景，与右边的距离等。

（5）根据第一个列表组创建其他的列表组。

（6）设计间隔样式，在需要间隔的列表中添加android:layout_marginTop属性。

三、程序代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#C0C0C0"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="60dp">

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

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

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

        </ImageView>

    </LinearLayout>
    <LinearLayout
        android:layout_marginTop="15dp"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:orientation="vertical">
    <LinearLayout
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="60dp">

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

        </ImageView>

        <TextView
            android:layout_marginLeft="10dp"
            android:textStyle="bold"
            android:textColor="#333"
            android:textSize="18dp"
            android:gravity="center_vertical"
            android:layout_weight="1"
            android:text="扫一扫"
            android:layout_width="0dp"
            android:layout_height="match_parent">

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

        </ImageView>

    </LinearLayout>

    <LinearLayout
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="60dp">

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

        </ImageView>
        <TextView
            android:layout_marginLeft="10dp"
            android:textStyle="bold"
            android:textColor="#333"
            android:textSize="18dp"
            android:gravity="center_vertical"
            android:layout_weight="1"
            android:text="摇一摇"
            android:layout_width="0dp"
            android:layout_height="match_parent">

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

        </ImageView>

    </LinearLayout>

    </LinearLayout>
    <LinearLayout
        android:layout_marginTop="15dp"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:orientation="vertical">

        <LinearLayout
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="60dp">

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

        </ImageView>
        <TextView
            android:layout_marginLeft="10dp"
            android:textStyle="bold"
            android:textColor="#333"
            android:textSize="18dp"
            android:gravity="center_vertical"
            android:layout_weight="1"
            android:text="看一看"
            android:layout_width="0dp"
            android:layout_height="match_parent">

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

        </ImageView>

    </LinearLayout>

        <LinearLayout
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="60dp">

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

        </ImageView>
        <TextView
            android:layout_marginLeft="10dp"
            android:textStyle="bold"
            android:textColor="#333"
            android:textSize="18dp"
            android:gravity="center_vertical"
            android:layout_weight="1"
            android:text="搜一搜"
            android:layout_width="0dp"
            android:layout_height="match_parent">

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

        </ImageView>

    </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_marginTop="15dp"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:orientation="vertical">
        <LinearLayout
            android:background="#fff"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="60dp">

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

            </ImageView>
            <TextView
                android:layout_marginLeft="10dp"
                android:textStyle="bold"
                android:textColor="#333"
                android:textSize="18dp"
                android:gravity="center_vertical"
                android:layout_weight="1"
                android:text="购物"
                android:layout_width="0dp"
                android:layout_height="match_parent">

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

            </ImageView>

        </LinearLayout>

        <LinearLayout
            android:background="#fff"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="60dp">

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

            </ImageView>
            <TextView
                android:layout_marginLeft="10dp"
                android:textStyle="bold"
                android:textColor="#333"
                android:textSize="18dp"
                android:gravity="center_vertical"
                android:layout_weight="1"
                android:text="游戏"
                android:layout_width="0dp"
                android:layout_height="match_parent">

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

            </ImageView>

        </LinearLayout>

    </LinearLayout>
    <LinearLayout
        android:layout_marginTop="15dp"
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="60dp">

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

        </ImageView>
        <TextView
            android:layout_marginLeft="10dp"
            android:textStyle="bold"
            android:textColor="#333"
            android:textSize="18dp"
            android:gravity="center_vertical"
            android:layout_weight="1"
            android:text="小程序"
            android:layout_width="0dp"
            android:layout_height="match_parent">

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

        </ImageView>

    </LinearLayout>

</LinearLayout>