移动软件开发五——仿微信发现界面

2022年夏季《移动软件开发》实验报告

一、实验目标

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

二、实验步骤

1. 搭建开发环境

在此之前我的电脑已经安装并使用过android studio和java sdk

详情参见我大一写的博客

安卓小白实战

2.视图设计

观察实验要求，对于该界面可划分为如下区域

用一个大的线性布局将整个界面包起来，并将线性布局的排列设置为垂直分布

在分别用小的线性布局实现如下的效果，其中的间隔部分可以使用view实现

其中一个每部分的xml代码如下

<LinearLayout
        android:background="#fff"
        android:layout_width="match_parent"
        android:layout_height="60dp">
        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/icon_pengyou"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical">
        </ImageView>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:textSize="18dp"
            android:textColor="#333"
            android:textStyle="bold"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:text="朋友圈">
        </TextView>
        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/right"
            android:layout_marginRight="15dp"
            android:layout_gravity="center_vertical">

        </ImageView>
    </LinearLayout>

代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:background="#e5e5e5"
    tools:context=".MainActivity">
    <View
        android:layout_width="match_parent"
        android:layout_height="10dp">

    </View>
    <LinearLayout
        android:background="#fff"
        android:layout_width="match_parent"
        android:layout_height="60dp">
        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/icon_pengyou"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical">
        </ImageView>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:textSize="18dp"
            android:textColor="#333"
            android:textStyle="bold"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:text="朋友圈">
        </TextView>
        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/right"
            android:layout_marginRight="15dp"
            android:layout_gravity="center_vertical">

        </ImageView>
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="20dp">

    </View>
    <LinearLayout
        android:background="#fff"
        android:layout_width="match_parent"
        android:layout_height="60dp">
        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/sao"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical">
        </ImageView>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:textSize="18dp"
            android:textColor="#333"
            android:textStyle="bold"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:text="扫一扫">
        </TextView>
        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/right"
            android:layout_marginRight="15dp"
            android:layout_gravity="center_vertical">

        </ImageView>
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp">

    </View>
    <LinearLayout
        android:background="#fff"
        android:layout_width="match_parent"
        android:layout_height="60dp">
        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/yao"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical">
        </ImageView>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:textSize="18dp"
            android:textColor="#333"
            android:textStyle="bold"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:text="摇一摇">
        </TextView>
        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/right"
            android:layout_marginRight="15dp"
            android:layout_gravity="center_vertical">

        </ImageView>
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="20dp">

    </View