一、实验目标
- 做一个APP首页,包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。
- 学习 ScrollView、RelativeLayout以及插件之间的穿插使用。
二、实验步骤
1. 逻辑梳理
做一个app首页,包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。
2. ScrollView
layout_width:宽,layout_height:高,ScrollView内部有且仅有一个控件
3. 父布局种类
LinearLayout(线性布局)、RelativeLayout(相对布局)、AbsoluteLayout(绝对布局)、TableLayout(表格布局)、FrameLayout(框架布局)
4. RelativeLayout布局
RelativeLayout,顾名思义,相对布局,也是非常常用的布局,他比LinearLayout更加灵活,可以实现非常复杂的UI。
参数如下:
相对其他控件对齐方式
5. 代码实现
5.1 创建父布局
新建ScrollView,创建ScrollView 内部父布局。
5.2 创建顶部图片
设置宽高、src加载图片、设置边距。
5.3 菜单栏模块
首先我们创建一个横向的tLinearLayout来作为菜单栏的父布局;再次创建一个LinearLayout作为单个按钮的父布局;创建上边的图片按钮,并设置其属性;设置按钮底部文字并赋予其属性。
使用四个LinearLayou创建四个菜单图标。
5.4 消息模块
首先我们创建一个横向的LinearLayout来作为菜单栏的父布局;创建待办Textview;创建更多Textview。
创建消息管理小图标
创建图标下方消息框文字
钥匙管理区域代码如下:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:background="#dcdcdc">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#ffff">
<LinearLayout
android:layout_width="80dp"
android:layout_height="25dp"
android:background="#0000ff">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="钥匙管理"
android:textColor="#ffff"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
图标下方消息框文字代码如下:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#dcdcdc"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#fff"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="鼎世华府1号8单元801业主提报钥匙借用申请 "
android:textSize="14dp"
android:textStyle="bold" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="@mipmap/right123" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginTop="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="3665"
android:textColor="#ff0000"
android:textSize="25dp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="30dp"
android:text=" 条"
android:textSize="18dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
重复两次上方部分即可实现消息模块,实现效果如下:
5.5 底部Tab模块
首先我们创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局;再次创建一个LinearLayout作为单个按钮的父布局;使用RelativeLayout编写。
实现效果如下:
代码部分如下:
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="10dp"
android:weightSum="4"
android:layout_height="80dp">
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/shouye"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@mipmap/s1" />
<TextView
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_below="@+id/shouye"
android:layout_centerHorizontal="true"
android:text="首页"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/yanfang"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@mipmap/s2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/yanfang"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="验房" />
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/tongji"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@mipmap/s3" />
<TextView
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_below="@+id/tongji"
android:layout_centerHorizontal="true"
android:text="统计"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/set"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@mipmap/s4" />
<TextView
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_below="@+id/set"
android:layout_centerHorizontal="true"
android:text="设置"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
</LinearLayout>
三、程序运行结果
最终效果图如下
四、问题总结与体会
问题总结
1.设计多层文本框时不能纵向排列
解决方法:添加android:orientation="vertical"即可实现纵向排列
2.使用RelativeLayout时id属性报错重定义
解决方法:为不同的RelativeLayout组件设置不同的id即可。
例如:统计图标的id
设置图标的id
心得体会
通过此次实验,我使用Android Studio完成了一个APP首页的设计,包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。同时学习 ScrollView、RelativeLayout以及插件之间的穿插使用,受益匪浅。我初步学会了使用Android Studio设计app首页的方法。此次实验,对于我《移动软件开发》这门课的学习有非常大的帮助,同时也为我以后计算机专业的学习打下了坚实基础。
附:Android Studio源码:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent">
<!--整个区域-->
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--第一块区域-->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textSize="18dp"
android:textColor="#333"
android:textStyle="bold"
android:gravity="center"
android:text="首页"
android:layout_width="match_parent"
android:layout_height="50dp">
</TextView>
<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_marginLeft="10dp"
android:layout_marginRight="10dp"
android:weightSum="4"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="100dp">
<ImageView
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:background="@mipmap/test_icon1"
android:layout_width="50dp"
android:layout_height="50dp">
</ImageView>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="验房"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="100dp">
<ImageView
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:background="@mipmap/test_icon2"
android:layout_width="50dp"
android:layout_height="50dp">
</ImageView>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="日常巡检"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="100dp">
<ImageView
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:background="@mipmap/test_icon3"
android:layout_width="50dp"
android:layout_height="50dp">
</ImageView>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="钥匙管理"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="100dp">
<ImageView
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:background="@mipmap/test_icon4"
android:layout_width="50dp"
android:layout_height="50dp">
</ImageView>
<TextView
android:layout_marginTop="10dp"
android:gravity="center"
android:text="统计分析"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:background="#dcdcdc"
android:layout_height="20dp"/>
<LinearLayout
android:orientation="horizontal"
android:background="#dcdcdc"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_weight="1"
android:textStyle="bold"
android:textColor="#333"
android:textSize="16dp"
android:layout_marginLeft="10dp"
android:text="待办(10)"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_marginRight="10dp"
android:textColor="#666"
android:layout_marginLeft="10dp"
android:text="更多"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:background="#dcdcdc"
android:layout_width="match_parent"
android:layout_height="10dp">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:background="#dcdcdc">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#ffff">
<LinearLayout
android:layout_width="80dp"
android:layout_height="25dp"
android:background="#0000ff">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="钥匙管理"
android:textColor="#ffff"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#dcdcdc"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#fff"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="鼎世华府1号8单元801业主提报钥匙借用申请 "
android:textSize="14dp"
android:textStyle="bold" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="@mipmap/right123" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginTop="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="3665"
android:textColor="#ff0000"
android:textSize="25dp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="30dp"
android:text=" 条"
android:textSize="18dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="20dp"
android:layout_height="25dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#ffff">
<LinearLayout
android:layout_width="80dp"
android:layout_height="25dp"
android:background="#0000ff">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="验房"
android:textColor="#ffff"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#fff"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="海尔世纪公馆1期12号楼三单元101房价问题待指派 "
android:textSize="14dp"
android:textStyle="bold" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="@mipmap/right123" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginTop="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="3"
android:textColor="#ff0000"
android:textSize="25dp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="30dp"
android:text=" 条"
android:textSize="18dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="10dp"
android:weightSum="4"
android:layout_height="80dp">
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/shouye"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@mipmap/s1" />
<TextView
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_below="@+id/shouye"
android:layout_centerHorizontal="true"
android:text="首页"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/yanfang"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@mipmap/s2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/yanfang"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="验房" />
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/tongji"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@mipmap/s3" />
<TextView
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_below="@+id/tongji"
android:layout_centerHorizontal="true"
android:text="统计"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="@+id/set"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:background="@mipmap/s4" />
<TextView
android:layout_marginTop="5dp"
android:gravity="center"
android:layout_below="@+id/set"
android:layout_centerHorizontal="true"
android:text="设置"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>