【安卓小程序】仿微信页面

一、实验目标

1. 了解安卓的历史及架构；

2. 搭建安卓开发环境 ；

3. 第一个 Android 应用小程序。

二、实验步骤

1. 准备工作：环境搭建

1.1.安装 JDK

创建一个路径不含中文的文件夹，将下载好的 JDK 保存在该目录下。

 

进入安装页面，记住安装的路径

 

下载完成后开始 JRE 的下载。点击下一步即可

 

安装完成

1.2.配置 Java 环境

在 此电脑的 [高级系统设置] 处选择 [环境变量]

 

新建系统变量

变量名：Java_Home

变量值：C:\Program Files\Java\jdk1.8.0_331

进行 Path 配置。选择 Path ，点击编辑。新建两个变量。

变量 1 ：%Java_Home%\bin

变量 2 ：%Java_Home%\jre\bin

之后选中这两个变量，点击右侧的 [上移] 将两个变量置顶。

检测配置是否成功：

打开 命令提示符( cmd )，输入 Java 和 Java -version。可查看 Java 是否安装和 JDK 版本。

  

1.3.安装 AndroidStudio (含 SDK)

Android 工具下载地址：Download Android Studio & App Tools - Android Developers

自处下载 zip 版。在 bin 文件中找到 studio64.exe 文件，点击开始使用。

此处不用导入自己的设置，以后也可以改设置。

一个关于 SDK 的协议，选择 Accept，然后选择 Finish 。

2. 创建项目

点击加号。

选择 Empty Activity 。

创建项目。注意将 Language 改为 Java。

首次运行需要下载一些库，等待即可。注意保持网络连接通畅。

项目创建后开发工具会自行下载一个运行所需的 jar 包，等待即可。

3. 视图

• 页面上主要包含5组列表，每组列表包含1-2个列表项。

  • 列表组1：“朋友圈”单行列表项；

  • 列表组2：“扫一扫”和“摇一摇”两行列表项；

  • 列表组3：“看一看”和“搜一搜”两行列表项；

  • 列表组4：“购物”和“游戏”两行列表项；

  • 列表组5：“小程序”单行列表项。

4. 代码实现

在 app/res/layout/activity_main.xml 文件中编写页面。

 

打开文件后点击右上角 Split 即可看到代码和视图两个界面。

4.1.创建父布局

• 首先设计一个外部总垂直布局，包含所有的列表组；

• 对父布局进行设置背景色；

• 设置父布局的垂直方向。

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

• LinearLayout ：线性布局；

• layout_width ：宽；

• layout_height ：高；

• match_parent ：自适应满屏；

• background ：背景；

• orientation ：垂直方向；vertical ：纵向、horizontal ：横向。

4.2.构建第一个列表组

4.2.1.列表组基本设置

设置宽高、背景色、垂直方向：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e5e5e5"
    android:orientation="vertical">
​
   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#fff"
        android:orientation="horizontal">
        
        
        
   </LinerLayout>
​
</LinearLayout>

4.2.2.列表组内设置

1. 图标

   将图片素材拖入 mipmap 文件夹。注意文件命名须为英文小写开头。

    

   点击 Refactor 。图片文件被保存进项目文件夹。

   

   设置宽高、背景色、与左边的距离、居中。

   • layout_margiLeft ：与左边的距离。

     <?xml version="1.0" encoding="utf-8"?>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:background="#e5e5e5"
         android:orientation="vertical">
     ​
        <LinearLayout
             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_marginLeft="15dp"
                 android:layout_gravity="center_vertical"
                 android:background="@mipmap/icon_pengyou"/>
            
            
             
        </LinerLayout>
     ​
     </LinearLayout>

2. 文字

   设置汉字、宽高、字体颜色、字体样式、字体大小、与左侧的距离、字体居中。

   • layout_weight ：权重；

   • text ：所展现的字；

   • textSize ：字体大小；

   • textColor ：字体颜色；

   • textStyle ：字体样式 ；italic ：倾斜、bold ：加粗；

   • gravity ：在控件内部的位置(通用)；

   • wrap_content ：自适应大小。

     <?xml version="1.0" encoding="utf-8"?>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:background="#e5e5e5"
         android:orientation="vertical">
     ​
        <LinearLayout
             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_marginLeft="15dp"
                 android:layout_gravity="center_vertical"
                 android:background="@mipmap/icon_pengyou"/>
            
            <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:textStyle="bold"
                 android:textColor="#333"
                 android:textSize="18dp"/>
            
            
             
        </LinerLayout>
     ​
     </LinearLayout>

3. 右方箭头

   设置宽和高、背景、水平居中、与右边的距离。

   • layout_margiRight ：与左边的距离。

     <?xml version="1.0" encoding="utf-8"?>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:background="#e5e5e5"
         android:orientation="vertical">
     ​
        <LinearLayout
             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_marginLeft="15dp"
                 android:layout_gravity="center_vertical"
                 android:background="@mipmap/icon_pengyou"/>
            
            <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:textStyle="bold"
                 android:textColor="#333"
                 android:textSize="18dp"/>
            
            <ImageView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginRight="15dp"
                 android:layout_gravity="center_vertical"
                 android:background="@mipmap/right"/>
             
        </LinerLayout>
     ​
     </LinearLayout>

4.3.补完代码

仿照第一个列表组补完代码。

• 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:layout_height="match_parent"
      android:background="#e5e5e5"
      android:orientation="vertical">
  ​
      <LinearLayout
          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_marginLeft="15dp"
              android:layout_gravity="center_vertical"
              android:background="@mipmap/icon_pengyou"/>
  ​
          <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:textStyle="bold"
              android:textColor="#333"
              android:textSize="18dp"/>
  ​
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginRight="15dp"
              android:layout_gravity="center_vertical"
              android:background="@mipmap/right"/>
  ​
      </LinearLayout>
      <LinearLayout
          android:background="#fff"
          android:orientation="horizontal"
          android:layout_marginTop="30dp"
          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/scan"/>
  ​
          <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:textStyle="bold"
              android:textColor="#333"
              android:textSize="18dp"/>
  ​
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginRight="15dp"
              android:layout_gravity="center_vertical"
              android:background="@mipmap/right"/>
  ​
      </LinearLayout>
      <LinearLayout
          android:background="#fff"
          android:orientation="horizontal"
          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/shack"/>
  ​
          <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:textStyle="bold"
              android:textColor="#333"
              android:textSize="18dp"/>
  ​
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginRight="15dp"
              android:layout_gravity="center_vertical"
              android:background="@mipmap/right"/>
  ​
      </LinearLayout>
      <LinearLayout
          android:background="#fff"
          android:orientation="horizontal"
          android:layout_marginTop="30dp"
          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/look"/>
  ​
          <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:textStyle="bold"
              android:textColor="#333"
              android:textSize="18dp"/>
  ​
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginRight="15dp"
              android:layout_gravity="center_vertical"
              android:background="@mipmap/right"/>
  ​
      </LinearLayout>
      <LinearLayout
          android:background="#fff"
          android:orientation="horizontal"
          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/search"/>
  ​
          <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:textStyle="bold"
              android:textColor="#333"
              android:textSize="18dp"/>
  ​
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginRight="15dp"
              android:layout_gravity="center_vertical"
              android:background="@mipmap/right"/>
  ​
      </LinearLayout>
      <LinearLayout
          android:background="#fff"
          android:orientation="horizontal"
          android:layout_marginTop="30dp"
          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/buy"/>
  ​
          <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:textStyle="bold"
              android:textColor="#333"
              android:textSize="18dp"/>
  ​
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginRight="15dp"
              android:layout_gravity="center_vertical"
              android:background="@mipmap/right"/>
  ​
      </LinearLayout>
      <LinearLayout
          android:background="#fff"
          android:orientation="horizontal"
          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/game"/>
  ​
          <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:textStyle="bold"
              android:textColor="#333"
              android:textSize="18dp"/>
  ​
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginRight="15dp"
              android:layout_gravity="center_vertical"
              android:background="@mipmap/right"/>
  ​
      </LinearLayout>
      <LinearLayout
          android:background="#fff"
          android:orientation="horizontal"
          android:layout_marginTop="30dp"
          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/program"/>
  ​
          <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:textStyle="bold"
              android:textColor="#333"
              android:textSize="18dp"/>
  ​
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginRight="15dp"
              android:layout_gravity="center_vertical"
              android:background="@mipmap/right"/>
  ​
      </LinearLayout>
  ​
  ​
  </LinearLayout>

三、问题总结与体会

1. 遇到的问题及解决方法

设置父布局属性时须定义垂直方向，否则报错。

android:orientation="vertical"

2. 总结与体会

1. 线性布局须理解列表之间互相嵌套的关系，否则最终呈现效果出错。

2. 学习 LinearLayout 组件、TextView 组件和 ImageView 组件的使用。

3. 学习子组件的使用。