课程 | 中国海洋大学22夏《移动软件开发》 |
实验名称 | 实验6:仿微app首页 |
一、实验目标
-
了解安卓的历史及架构;
-
搭建安卓开发环境 ;
-
第一个 Android 应用小程序。
二、实验步骤
1. 创建项目
2. 视图
-
顶部图片;
-
顶部菜单栏;
-
中部消息模块;(选做)
-
底部Tab按钮。
4. 代码实现
4.1.创建父布局
-
首先设计一个外部总垂直布局,包含所有的列表组;
-
设置父布局的垂直方向;
-
运用 ScrollView 。
<?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:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
</ScrollView>
</LinearLayout>
-
创建 ScrollView 内部父布局
<?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:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
</LinearLayout>
4.2.创建顶部首页显示栏
-
设置宽高;
-
设置文字;
-
设置字体样式;
-
设置字体颜色;
-
字体居中。
<TextView
android:textSize="18dp"
android:textColor="#333"
android:textStyle="bold"
android:text="首页"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="50dp"/>
4.3.创建顶部图片
-
图标
将图片素材拖入 mipmap 文件夹。注意文件命名须为英文小写开头。
点击 Refactor 。图片文件被保存进项目文件夹。
-
设置宽高;
-
src 加载图片;
-
设置边距。
<ImageView android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:src="@mipmap/test_img" android:layout_width="match_parent" android:layout_height="200dp"/>
-
4.4.菜单栏模块
-
首先我们创建一个横向的 LinearLayout 来作为菜单栏的父布局;
-
再次创建一个 LinearLayout 作为单个按钮的父布局;
-
创建上边的图片按钮,并设置其属性;
-
设置按钮底部文字并赋予其属性。
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:background="@mipmap/test_icon1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="验房"/>
</LinearLayout>
4.5.消息模块
-
首先我们创建一个横向的LinearLayout来作为菜单栏的父布局;
-
创建待办 Textview 。
<LinearLayout
android:layout_marginTop="20dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="待办(10)"
android:textStyle="bold"
android:textColor="#333"
android:textSize="16dp"/>
<TextView
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="更多"
android:textColor="#666"/>
</LinearLayout>
4.6.底部 Tab 模块
-
首先我们创建一个横向的 LinearLayout 来作为菜单栏的父布局;
-
再次创建一个 LinearLayout 作为单个按钮的父布局;
-
按钮这个地方使用了 RelativeLayout 编写;
-
补全所有布局。
<?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:orientation="vertical"> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:textSize="18dp" android:textColor="#333" android:textStyle="bold" android:text="首页" android:gravity="center" android:layout_width="match_parent" android:layout_height="50dp"/> <ImageView android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:src="@mipmap/test_img" android:layout_width="match_parent" android:layout_height="200dp"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:orientation="horizontal" android:weightSum="4"> <LinearLayout android:layout_width="0dp" android:layout_height="100dp" android:layout_weight="1" android:orientation="vertical"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginTop="10dp" android:background="@mipmap/test_icon1"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="验房"/> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="100dp" android:layout_weight="1" android:orientation="vertical"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginTop="10dp" android:background="@mipmap/test_icon2"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="日常巡检"/> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="100dp" android:layout_weight="1" android:orientation="vertical"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginTop="10dp" android:background="@mipmap/keys"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="钥匙管理"/> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="100dp" android:layout_weight="1" android:orientation="vertical"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginTop="10dp" android:background="@mipmap/statistical_analysis" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="统计分析" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_marginTop="20dp" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:text="待办(10)" android:textStyle="bold" android:textColor="#333" android:textSize="16dp"/> <TextView android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="更多" android:textColor="#666"/> </LinearLayout> <LinearLayout android:layout_marginTop="400dp" android:layout_width="match_parent" android:layout_height="80dp" android:weightSum="4"> <RelativeLayout android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent"> <ImageView android:id="@+id/img" android:layout_width="30dp" android:layout_height="30dp" android:layout_centerHorizontal="true" android:layout_marginTop="15dp" android:background="@mipmap/test_icon3"/> <TextView android:layout_marginTop="5dp" android:layout_below="@+id/img" android:layout_centerHorizontal="true" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="首页"/> </RelativeLayout> <RelativeLayout android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent"> <ImageView android:id="@id/img" android:layout_width="30dp" android:layout_height="30dp" android:layout_centerHorizontal="true" android:layout_marginTop="15dp" android:background="@mipmap/to_do_list"/> <TextView android:layout_marginTop="5dp" android:layout_below="@+id/img" android:layout_centerHorizontal="true" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="首页"/> </RelativeLayout> <RelativeLayout android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent"> <ImageView android:id="@id/img" android:layout_width="30dp" android:layout_height="30dp" android:layout_centerHorizontal="true" android:layout_marginTop="15dp" android:background="@mipmap/report_form"/> <TextView android:layout_marginTop="5dp" android:layout_below="@+id/img" android:layout_centerHorizontal="true" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="首页"/> </RelativeLayout> <RelativeLayout android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent"> <ImageView android:id="@id/img" android:layout_width="30dp" android:layout_height="30dp" android:layout_centerHorizontal="true" android:layout_marginTop="15dp" android:background="@mipmap/management"/> <TextView android:layout_marginTop="5dp" android:layout_below="@+id/img" android:layout_centerHorizontal="true" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="首页"/> </RelativeLayout> </LinearLayout> </LinearLayout> </ScrollView> </LinearLayout>
总结与体会
-
线性布局须理解列表之间互相嵌套的关系,否则最终呈现效果出错。
-
学习 LinearLayout 组件、RelativeLayout 组件的使用。
-
插件之间的穿插使用、相对布局比线性布局更繁琐但更自由。
页面整体使用 RelativeLayout 组件编写
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:rotationX="-2">
<TextView
android:id="@+id/a"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="首页"
android:textColor="#333"
android:textSize="18dp"
android:textStyle="bold" />
<ImageView
android:id="@+id/b"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="@id/a"
android:layout_centerInParent="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="@mipmap/test_img" />
<RelativeLayout
android:id="@+id/c"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/b"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/yanfang"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="40dp"
android:layout_marginTop="10dp"
android:background="@mipmap/test_icon1" />
<TextView
android:id="@+id/text1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_below="@id/yanfang"
android:layout_marginLeft="25dp"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="验房" />
<ImageView
android:id="@+id/richangxunjian"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="70dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="@id/yanfang"
android:background="@mipmap/test_icon2" />
<TextView
android:id="@+id/text2"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_below="@id/richangxunjian"
android:layout_marginLeft="40dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="@id/text1"
android:gravity="center"
android:text="日常巡检" />
<ImageView
android:id="@+id/yaoshiguanli"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="70dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="@id/richangxunjian"
android:background="@mipmap/keys" />
<TextView
android:id="@+id/text3"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_below="@id/yaoshiguanli"
android:layout_marginLeft="40dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="@id/text2"
android:gravity="center"
android:text="钥匙管理" />
<ImageView
android:id="@+id/tongjifenxi"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="70dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="@id/yaoshiguanli"
android:background="@mipmap/statistical_analysis" />
<TextView
android:id="@+id/text4"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_below="@id/tongjifenxi"
android:layout_marginLeft="42dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="@id/text3"
android:gravity="center"
android:text="统计分析" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/d"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/c"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:id="@+id/daiban"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="待办(10)"
android:textColor="#333"
android:textSize="16dp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="400dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="@id/daiban"
android:text="更多"
android:textColor="#666" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginTop="750dp"
android:orientation="horizontal">
<ImageView
android:id='@+id/shouye'
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="55dp"
android:layout_marginTop="15dp"
android:background="@mipmap/test_icon3" />
<TextView
android:id="@+id/text5"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_below="@+id/shouye"
android:layout_marginLeft="20dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="首页" />
<ImageView
android:id='@+id/yanfang2'
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="90dp"
android:layout_marginTop="15dp"
android:layout_toRightOf="@id/shouye"
android:background="@mipmap/to_do_list" />
<TextView
android:id="@+id/text6"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_below="@id/yanfang2"
android:layout_marginLeft="20dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="@id/text5"
android:gravity="center"
android:text="验房" />
<ImageView
android:id='@+id/tongji'
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="90dp"
android:layout_marginTop="15dp"
android:layout_toRightOf="@id/yanfang2"
android:background="@mipmap/report_form" />
<TextView
android:id="@+id/text7"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_below="@id/tongji"
android:layout_marginLeft="20dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="@id/text6"
android:gravity="center"
android:text="统计" />
<ImageView
android:id='@+id/shezhi'
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="90dp"
android:layout_marginTop="15dp"
android:layout_toRightOf="@id/tongji"
android:background="@mipmap/management" />
<TextView
android:id="@+id/text8"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_below="@id/shezhi"
android:layout_marginLeft="22dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="@id/text7"
android:gravity="center"
android:text="设置" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>