移动软件开发:第一个安卓应用小程序

一、实验目标

  1. 仿微信“发现”页创建列表布局
  2. 仿微信“个人”页创建列表布局

二、实验步骤

1. 逻辑梳理

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

2. 布局

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

3. 代码实现

  1. 首先我们创建他们的父布局
  2. 对父布局进行设置背景色
  3. 设置父布局的垂直方向
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#e5e5e5"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="206dp"
        tools:layout_editor_absoluteY="-31dp">
  1. 构建第一个列表组
  2. 设置宽高
  3. 设置背景色
  4. 设置垂直方向
<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="#fff"
            android:orientation="horizontal">
  1. 创建列表组里的第一个图标
  2. 设置宽高
  3. 设置背景色
  4. 设置与左边的距离
  5. 设置居中
<ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="15dp"
                android:background="@mipmap/icon_pengyou"></ImageView>

  1. 创建列表组中的汉字
  2. 设置汉字
  3. 设置宽高
  4. 设置字体颜色
  5. 设置字体样式
  6. 设置字体大小
  7. 设置与左侧的距离
  8. 设置字体居中
<TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:text="朋友圈"
                android:textColor="#333"
                android:textSize="18dp"
                android:textStyle="bold" />
  1. 创建列表组右边的箭头
  2. 设置宽和高
  3. 设置背景
  4. 设置水平居中
  5. 设置与右边的距离
 <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="15dp"
                android:background="@mipmap/right" />
  1. 重复以上的代码,最后添加margin

4. 微信个人页面

代码如下

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#c0c0c0">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:background="#686f79"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/textView6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0.00"
            android:textColor="#FFFFFF"
            android:textSize="17dp"
            app:layout_constraintEnd_toEndOf="@+id/textView5"
            app:layout_constraintStart_toStartOf="@+id/textView5"
            app:layout_constraintTop_toBottomOf="@+id/textView5" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="银行卡"
            android:textColor="#FFFFFF"
            android:textSize="17dp"
            app:layout_constraintBottom_toBottomOf="@+id/textView5"
            app:layout_constraintEnd_toEndOf="@+id/imageView3"
            app:layout_constraintStart_toStartOf="@+id/imageView3"
            app:layout_constraintTop_toTopOf="@+id/textView5" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="零钱"
            android:textColor="#FFFFFF"
            android:textSize="17dp"
            app:layout_constraintBottom_toBottomOf="@+id/textView3"
            app:layout_constraintEnd_toEndOf="@+id/imageView2"
            app:layout_constraintStart_toStartOf="@+id/imageView2"
            app:layout_constraintTop_toTopOf="@+id/textView3" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:text="钱包"
            android:textColor="#FFFFFF"
            android:textSize="15dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/icon_pay" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:text="收付款"
            android:textColor="#FFFFFF"
            android:textSize="17dp"
            app:layout_constraintEnd_toEndOf="@+id/imageView"
            app:layout_constraintStart_toStartOf="@+id/imageView"
            app:layout_constraintTop_toBottomOf="@+id/imageView" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="32dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/icon_k" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/imageView3"
            app:layout_constraintHorizontal_bias="0.514"
            app:layout_constraintStart_toEndOf="@+id/imageView"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.503"
            app:srcCompat="@drawable/icon_q" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout2"
        android:layout_width="match_parent"
        android:layout_height="420dp"
        android:layout_marginTop="12dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/constraintLayout">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout333"
            android:layout_width="132dp"
            android:layout_height="124dp"
            android:layout_marginStart="2dp"
            android:layout_marginTop="125dp"
            android:background="#FFFFFF"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/constraintLayout33">

            <ImageView
                android:id="@+id/imageView444"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginTop="24dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/icon_gy" />

            <TextView
                android:id="@+id/textView888"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="腾讯公益"
                android:textSize="17dp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="@+id/imageView444"
                app:layout_constraintStart_toStartOf="@+id/imageView444"
                app:layout_constraintTop_toBottomOf="@+id/imageView444" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout555"
            android:layout_width="0dp"
            android:layout_height="124dp"
            android:layout_marginStart="2dp"
            android:layout_marginTop="125dp"
            android:layout_marginEnd="2dp"
            android:background="#FFFFFF"
            app:layout_constraintEnd_toStartOf="@+id/constraintLayout6"
            app:layout_constraintStart_toEndOf="@+id/constraintLayout3"
            app:layout_constraintTop_toTopOf="@id/constraintLayout55">

            <ImageView
                android:id="@+id/imageView555"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginTop="24dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/icon_bx" />

            <TextView
                android:id="@+id/textView999"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="保险服务"
                android:textSize="17dp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="@+id/imageView555"
                app:layout_constraintHorizontal_bias="0.416"
                app:layout_constraintStart_toStartOf="@+id/imageView555"
                app:layout_constraintTop_toBottomOf="@+id/imageView555" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout666"
            android:layout_width="132dp"
            android:layout_height="124dp"
            android:layout_marginTop="125dp"
            android:layout_marginEnd="2dp"
            android:background="#FFFFFF"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/constraintLayout66"/>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout66"
            android:layout_width="132dp"
            android:layout_height="124dp"
            android:layout_marginTop="125dp"
            android:layout_marginEnd="2dp"
            android:background="#FFFFFF"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/constraintLayout6">

            <ImageView
                android:id="@+id/imageView66"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginTop="24dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/icon_cs" />

            <TextView
                android:id="@+id/textView100"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="城市服务"
                android:textSize="17dp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView66" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout55"
            android:layout_width="0dp"
            android:layout_height="124dp"
            android:layout_marginStart="2dp"
            android:layout_marginTop="125dp"
            android:layout_marginEnd="2dp"
            android:background="#FFFFFF"
            app:layout_constraintEnd_toStartOf="@+id/constraintLayout6"
            app:layout_constraintStart_toEndOf="@+id/constraintLayout3"
            app:layout_constraintTop_toTopOf="@id/constraintLayout5">

            <ImageView
                android:id="@+id/imageView55"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginTop="24dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/icon_qb" />

            <TextView
                android:id="@+id/textView99"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="Q币充值"
                android:textSize="17dp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="@+id/imageView55"
                app:layout_constraintHorizontal_bias="0.416"
                app:layout_constraintStart_toStartOf="@+id/imageView55"
                app:layout_constraintTop_toBottomOf="@+id/imageView55" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout33"
            android:layout_width="132dp"
            android:layout_height="124dp"
            android:layout_marginStart="2dp"
            android:layout_marginTop="125dp"
            android:background="#FFFFFF"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/constraintLayout3">

            <ImageView
                android:id="@+id/imageView44"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginTop="24dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/icon_sh" />

            <TextView
                android:id="@+id/textView88"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="生活缴费"
                android:textSize="17dp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="@+id/imageView44"
                app:layout_constraintStart_toStartOf="@+id/imageView44"
                app:layout_constraintTop_toBottomOf="@+id/imageView44" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout3"
            android:layout_width="132dp"
            android:layout_height="124dp"
            android:layout_marginStart="2dp"
            android:layout_marginTop="42dp"
            android:background="#FFFFFF"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/linearLayout">

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginTop="24dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/icon_xyk" />

            <TextView
                android:id="@+id/textView8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="信用卡还款"
                android:textSize="17dp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="@+id/imageView4"
                app:layout_constraintStart_toStartOf="@+id/imageView4"
                app:layout_constraintTop_toBottomOf="@+id/imageView4" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout5"
            android:layout_width="0dp"
            android:layout_height="124dp"
            android:layout_marginStart="2dp"
            android:layout_marginTop="42dp"
            android:layout_marginEnd="2dp"
            android:background="#FFFFFF"
            app:layout_constraintEnd_toStartOf="@+id/constraintLayout6"
            app:layout_constraintStart_toEndOf="@+id/constraintLayout3"
            app:layout_constraintTop_toTopOf="@+id/linearLayout">

            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginTop="24dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/icon_sj" />

            <TextView
                android:id="@+id/textView9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="手机充值"
                android:textSize="17dp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="@+id/imageView5"
                app:layout_constraintHorizontal_bias="0.416"
                app:layout_constraintStart_toStartOf="@+id/imageView5"
                app:layout_constraintTop_toBottomOf="@+id/imageView5" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="#FFFFFF"
            android:orientation="horizontal"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:id="@+id/textView7"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:gravity="center_vertical"
                android:text="腾讯服务" />
        </LinearLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout6"
            android:layout_width="132dp"
            android:layout_height="124dp"
            android:layout_marginTop="42dp"
            android:layout_marginEnd="2dp"
            android:background="#FFFFFF"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/linearLayout">

            <ImageView
                android:id="@+id/imageView6"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginTop="24dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/icon_lct" />

            <TextView
                android:id="@+id/textView10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="理财通"
                android:textSize="17dp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView6" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

三、程序运行结果

在这里插入图片描述
在这里插入图片描述

四、问题总结与体会

在对第二排元素进行重复的时候发现报错,查询资源后,为最外层的盒子添加属性,改为纵向布局之后成功解决

android:orientation="vertical"
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值