安卓应用开发实验5

一、实验目标

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

二、实验步骤

1、实验准备

1、电脑安装jdk

2、配置JAVA环境

3、安装Androidstudio（含SDK）

注意Androidstudio的下载需要一些国外的资源，会很慢。

2、实验设计

2.1 组件

预计使用以下几种组件

• Learnerlayout:线性布局组件

• TextView:文本组件

• ImageView:图片组件

2.2 页面构造

页面的构成如下图所示:

• 整体：将下面组件全部放入整体当中；

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

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

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

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

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

 

 

2.3 页面设计

2.3.1 整体

如下图所示，建造一个LinearLayout组件

<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>

2.3.1 列表组1

在整体中加入下面的布局

<LinearLayout
    android:layout_width="match_parent"  //设置组件的宽度最大
    android:layout_height="60dp"         //设置组建的高度为60dp
    android:background="#fff"            //设置背景颜色为白色
    android:orientation="horizontal">    //设置内部组件为水平放置
​
    <ImageView                           //设置内部组件1为图片
        android:layout_width="40dp"      //设置组件宽度
        android:layout_height="40dp"     //设置组件高度
        android:layout_gravity="center_vertical"    //设置图片相对于父布局垂直居中
        android:layout_marginLeft="15dp"            //设置图片距父布局左侧的距离
        android:background="@mipmap/icon_pengyou" />  //设置组件背景图片
​
    <TextView
        android:layout_width="0dp"               //设置宽度
        android:layout_height="match_parent"     //设置高度
        android:gravity="center_vertical"        //设置文字在这个组件的垂直居中位置
        android:layout_marginLeft="10dp"         
        android:layout_weight="1"                //设置这个组件的权重
        android:text="朋友圈"                     //设置文字
        android:textColor="#333"                 //设置文字颜色
        android:textSize="18dp"                  //设置文字大小
        android:textStyle="bold" />              //设置文字加粗
​
    <ImageView
        android:layout_width="wrap_content"      //设置宽度为弹性
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"   
        android:layout_marginRight="15dp"
        android:background="@mipmap/right" />
</LinearLayout>

上述代码注意：

1、组件的宽度和高度设定wrap_content和match_parent，前者是弹性的，后者是拉伸到最大。image组件宽高都设定为wrap_content可以使图片不会拉伸变形。

2、关于权重，组件在布局中可能不会占据全部的空间。当权重为0（默认权重）的组件将空间占用完毕，剩下的空间会按照权重分配给其他的组件。

3、关于图片，请放到项目的res文件夹下相应的minmpa-***中，注意不同的后缀的文件夹储存的图片尺寸不同。

4、关于layout_gravity和gravity，这两个组件一个设定相对于父布局的位置，一个设置相对于当前组件的位置

2.3.1 列表组2

下面是组件2的设置

<LinearLayout                                 //建造一个大布局
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="15dp"           //设定当前组件相对于上面的组件的距离
    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_gravity="center_vertical"
        android:layout_marginLeft="15dp"
        android:background="@mipmap/sao" />
​
    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:layout_marginLeft="10dp"
        android:layout_weight="1"
        android:text="扫一扫"
        android:textColor="#333"
        android:textSize="18dp"
        android:textStyle="bold" />
​
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginRight="15dp"
        android:background="@mipmap/right" />
</LinearLayout>
​
<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_gravity="center_vertical"
        android:layout_marginLeft="15dp"
        android:background="@mipmap/yao" />
​
    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:layout_marginLeft="10dp"
        android:layout_weight="1"
        android:text="摇一摇"
        android:textColor="#333"
        android:textSize="18dp"
        android:textStyle="bold" />
​
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginRight="15dp"
        android:background="@mipmap/right" />
</LinearLayout>
</LinearLayout>

其余列表组和列表组1、2的设置类似。

三、程序运行结果

最终效果如下图所示

 

模拟在手机上运行如下图所示

 

四、问题总结与体会

问题1：关于文字设置了居中但是不能居中

解决：产看textview中是设置了gravity还是layout_graviy，设置文字垂直居中应该设置前者为centr_vertical

问题2：图片的尺寸和颜色很奇怪

解决：查看图片在本地的位置，不同的minmap_***中图片显示的尺寸不同