仿写微信页面

一、实验目标

  1. 模仿微信“发现”页创建列表布局;
  2. 学习使用Textview imageview、LinearLayout。

二、实验步骤

一、逻辑梳理

  1. 页面上主要包含5组列表,每组列表包含1-2个列表项。
    具体内容解释如下:
    • 列表组1:“朋友圈”单行列表项;
    • 列表组2:“扫一扫”和“摇一摇”两行列表项;
    • 列表组3:“看一看”和“搜一搜”两行列表项;
    • 列表组4:“购物”和“游戏”两行列表项;
    • 列表组5:“小程序”单行列表项。

  2. 梳理步骤

    • 首先设计一个外部总垂直布局,包含所有的列表组
    • 写五个LinearLayout来构建这五个列表组
    • 每个列表组的单独构建
    • 列表组之间的间隔样式搭建

二、代码实现

  1. 创建父布局,给父布局设置背景色和垂直方向

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:background="#CCC8C8"
        android:layout_height="match_parent"
        android:orientation="vertical">
    </LinearLayout>
    
  2. 构建第一个列表组,设置宽高、背景色、垂直方向

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

  1. 创建列表组里的第一个图标,设置宽高、背景色、与左边的距离、居中

    <LinearLayout
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="#fff"
            android:orientation="horizontal">
    
            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="15dp"
                android:background="@mipmap/icon_pengyou" />
    

  2. 创建列表组中的汉字,设置汉字、宽高、字体颜色等

    <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:textStyle="bold"
                android:textColor="#333"
                android:textSize="18dp"
                android:gravity="center_vertical"
                android:layout_weight="1"
                android:text="朋友圈" />
    
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginRight="15dp"
                android:background="@mipmap/right" />
    

  3. 创建列表组右边的箭头,设置宽高、背景、与右边的距离。

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

  4. 按照上述步骤进行编写接下来的列表组,增设图标、填写文本。

三、程序运行结果

最终在手机上运行结果如下:

四、问题总结与体会

  1. 这次是我第一次写app相关的内容,感觉十分新奇,虽然从安装环境开始就出现了一些小插曲,但最后还是顺利解决了。
  2. 在写同一个列表组时,中间隔开两个表的线我苦恼了很久应该如何解决,后来经过老师开导只要将两个表之间加一些间距就可以了。
  3. 这次实验让我觉得 写APP也充满了乐趣,自己设计页面的心情非常新奇,也非常愉悦。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值