一、实验目标
模仿微信“发现”页创建列表布局,学习使用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_***中图片显示的尺寸不同