???????????????????????????实验6:APP首页
博客:
一、实验目标
做一个APP首页,包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。学习 ScrollView, 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" ????????android:layout_weight="1" ????????android:background="#f7f6fb">
????????<LinearLayout ????????????android:layout_width="match_parent" ????????????android:layout_height="match_parent" ????????????android:orientation="vertical">
????????????<TextView ????????????????android:layout_width="match_parent" ????????????????android:layout_height="50dp" ????????????????android:gravity="center" ????????????????android:text="首页" ????????????????android:textColor="#333" ????????????????android:textSize="22dp" ????????????????android:textStyle="bold" />
????????????<ImageView ????????????????android:layout_width="match_parent" ????????????????android:layout_height="200dp" ????????????????android:layout_marginLeft="10dp" ????????????????android:layout_marginRight="10dp" ????????????????android:src="@mipmap/test_img" /> ????????????<!--菜单栏模块--> ????????????<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"> ????????????????<!--验房--> ????????????????<RelativeLayout ????????????????????android:layout_width="0dp" ????????????????????android:layout_height="100dp" ????????????????????android:layout_weight="1" ????????????????????android:orientation="vertical">
????????????????????<ImageView ????????????????????????android:id="@id/image1" ????????????????????????android:layout_width="50dp" ????????????????????????android:layout_height="50dp" ????????????????????????android:layout_centerHorizontal="true" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:background="@mipmap/test_icon1" />
????????????????????<TextView ????????????????????????android:layout_width="match_parent" ????????????????????????android:layout_height="match_parent" ????????????????????????android:layout_below="@+id/image1" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:gravity="center" ????????????????????????android:text="验房" ????????????????????????android:textColor="@color/black"/> ????????????????</RelativeLayout> ????????????????<!--日常巡检--> ????????????????<RelativeLayout ????????????????????android:layout_width="0dp" ????????????????????android:layout_height="100dp" ????????????????????android:layout_weight="1" ????????????????????android:orientation="vertical">
????????????????????<ImageView ????????????????????????android:id="@id/image2" ????????????????????????android:layout_width="50dp" ????????????????????????android:layout_height="50dp" ????????????????????????android:layout_centerHorizontal="true" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:background="@mipmap/test_icon2" />
????????????????????<TextView ????????????????????????android:layout_width="match_parent" ????????????????????????android:layout_height="match_parent" ????????????????????????android:layout_below="@+id/image2" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:gravity="center" ????????????????????????android:text="日常巡检" ????????????????????????android:textColor="@color/black"/> ????????????????</RelativeLayout> ????????????????<!--钥匙管理--> ????????????????<RelativeLayout ????????????????????android:layout_width="0dp" ????????????????????android:layout_height="100dp" ????????????????????android:layout_weight="1" ????????????????????android:orientation="vertical">
????????????????????<ImageView ????????????????????????android:id="@id/image3" ????????????????????????android:layout_width="50dp" ????????????????????????android:layout_height="50dp" ????????????????????????android:layout_centerHorizontal="true" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:background="@mipmap/yaoshi" />
????????????????????<TextView ????????????????????????android:layout_width="match_parent" ????????????????????????android:layout_height="match_parent" ????????????????????????android:layout_below="@+id/image3" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:gravity="center" ????????????????????????android:text="钥匙管理" ????????????????????????android:textColor="@color/black"/> ????????????????</RelativeLayout> ????????????????<!--统计分析--> ????????????????<RelativeLayout ????????????????????android:layout_width="0dp" ????????????????????android:layout_height="100dp" ????????????????????android:layout_weight="1" ????????????????????android:orientation="vertical">
????????????????????<ImageView ????????????????????????android:id="@id/image4" ????????????????????????android:layout_width="50dp" ????????????????????????android:layout_height="50dp" ????????????????????????android:layout_centerHorizontal="true" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:background="@mipmap/tongji" />
????????????????????<TextView ????????????????????????android:layout_width="match_parent" ????????????????????????android:layout_height="match_parent" ????????????????????????android:layout_below="@+id/image4" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:gravity="center" ????????????????????????android:text="统计分析" ????????????????????????android:textColor="@color/black"/> ????????????????</RelativeLayout> ????????????</LinearLayout>
????????????<LinearLayout ????????????????android:layout_width="match_parent" ????????????????android:layout_height="wrap_content" ????????????????android:layout_marginTop="20dp" ????????????????android:orientation="horizontal">
????????????????<TextView ????????????????????android:layout_width="wrap_content" ????????????????????android:layout_height="wrap_content" ????????????????????android:layout_marginLeft="10dp" ????????????????????android:layout_weight="1" ????????????????????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="10dp" ????????????????????android:layout_marginRight="10dp" ????????????????????android:text="更多" ????????????????????android:textColor="#666" /> ????????????</LinearLayout>
????????????<!--消息--> ????????????<LinearLayout ????????????????android:layout_width="match_parent" ????????????????android:layout_height="wrap_content" ????????????????android:orientation="vertical" ????????????????android:layout_marginLeft="10dp" ????????????????android:layout_marginRight="10dp"> ????????????????<LinearLayout ????????????????????android:layout_width="300dp" ????????????????????android:layout_height="90dp" ????????????????????android:layout_marginLeft="30dp" ????????????????????android:orientation="vertical" ????????????????????android:layout_marginBottom="30dp" ????????????????????android:background="#0099ff"> ????????????????????<TextView ????????????????????????android:layout_width="match_parent" ????????????????????????android:layout_height="50dp" ????????????????????????android:layout_marginBottom="-4dp" ????????????????????????android:text="*鼎世华府1号楼8单元801业主提报钥匙借用申请" ????????????????????????android:textColor="@color/black"/>
????????????????</LinearLayout> ????????????????<LinearLayout ????????????????????android:layout_width="300dp" ????????????????????android:layout_height="90dp" ????????????????????android:orientation="vertical" ????????????????????android:layout_marginLeft="30dp" ????????????????????android:layout_marginBottom="20dp" ????????????????????android:background="#CCCCFF"> ????????????????????<TextView ????????????????????????android:layout_width="match_parent" ????????????????????????android:layout_height="50dp" ????????????????????????android:layout_marginBottom="-4dp" ????????????????????????android:text="*海尔世纪公馆1期12号楼3单元101房间问题待指派" ????????????????????????android:textColor="@color/black"/> ????????????????</LinearLayout>
????????????</LinearLayout>
????????</LinearLayout> ????</ScrollView>
????<!--底部按钮--> ????<LinearLayout ????????android:layout_width="match_parent" ????????android:layout_height="80dp" ????????android:layout_gravity="bottom" ????????android:layout_weight="0" ????????android:weightSum="4">
????????<RelativeLayout ????????????android:layout_weight="1" ????????????android:layout_width="0dp" ????????????android:layout_height="match_parent">
????????????<ImageView ????????????????android:layout_width="30dp" ????????????????android:layout_height="30dp" ????????????????android:layout_marginTop="15dp" ????????????????android:layout_centerHorizontal="true" ????????????????android:id="@+id/image1" ????????????????android:src="@mipmap/test_icon3" />
????????????<TextView ????????????????android:layout_width="match_parent" ????????????????android:layout_height="wrap_content" ????????????????android:layout_below="@+id/image1" ????????????????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:layout_width="30dp" ????????????????android:layout_height="30dp" ????????????????android:layout_marginTop="15dp" ????????????????android:layout_centerHorizontal="true" ????????????????android:id="@+id/image2" ????????????????android:src="@mipmap/daiban" />
????????????<TextView ????????????????android:layout_width="match_parent" ????????????????android:layout_height="wrap_content" ????????????????android:layout_below="@+id/image2" ????????????????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:layout_width="30dp" ????????????????android:layout_height="30dp" ????????????????android:layout_marginTop="15dp" ????????????????android:layout_centerHorizontal="true" ????????????????android:id="@+id/image3" ????????????????android:src="@mipmap/baobiao" />
????????????<TextView ????????????????android:layout_width="match_parent" ????????????????android:layout_height="wrap_content" ????????????????android:layout_below="@+id/image3" ????????????????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:layout_width="30dp" ????????????????android:layout_height="30dp" ????????????????android:layout_marginTop="15dp" ????????????????android:layout_centerHorizontal="true" ????????????????android:id="@+id/image4" ????????????????android:src="@mipmap/guanli" />
????????????<TextView ????????????????android:layout_width="match_parent" ????????????????android:layout_height="wrap_content" ????????????????android:layout_below="@+id/image4" ????????????????android:layout_centerHorizontal="true" ????????????????android:gravity="center" ????????????????android:text="设置" /> ????????</RelativeLayout>
????</LinearLayout>
</LinearLayout>
步骤分析:
首先我们创建他们的父布局
新建ScrollView ,创建ScrollView 内部父布局,创建顶部首页显示栏,创建顶部图片
菜单栏模块,首先我们创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局,再次创建一个LinearLayout作为单个按钮的父布局,创建上边的图片按钮,并设置其属性,设置按钮底部文字并赋予其属性
消息模块,首先我们创建一个横向的LinearLayout来作为菜单栏的父布局,创建待办Textview,创建更多Textview
底部Tab模块,首先我们创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局,再次创建一个LinearLayout作为单个按钮的父布局
按钮
代码解析:大linearlayout里面套几个小linealayout就行,然后小linearout用margintop控制各个组件之间的区域就行,然后加入图像和文本组件,填写图标和项目名称
问题:其实最大的问题是不了解变量大小,dp,rpx究竟是多大,通过此次实验,学习了如何使用RelativeLayout创建了列表布局,了解了了ScrollView的用法,对Android开发的有了进一步了解
体会:感觉和微信小程序的前端设计原理差不多,都是靠一个个组件完成的,唯一有区别的可能是安卓开发的界面设计更容易明白,他的小函数都挺容易理解的。
???????????????????????????实验6:APP首页
姓名:艾圣明 学号:20170001001
博客:
一、实验目标
做一个APP首页,包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。学习 ScrollView, 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" ????????android:layout_weight="1" ????????android:background="#f7f6fb">
????????<LinearLayout ????????????android:layout_width="match_parent" ????????????android:layout_height="match_parent" ????????????android:orientation="vertical">
????????????<TextView ????????????????android:layout_width="match_parent" ????????????????android:layout_height="50dp" ????????????????android:gravity="center" ????????????????android:text="首页" ????????????????android:textColor="#333" ????????????????android:textSize="22dp" ????????????????android:textStyle="bold" />
????????????<ImageView ????????????????android:layout_width="match_parent" ????????????????android:layout_height="200dp" ????????????????android:layout_marginLeft="10dp" ????????????????android:layout_marginRight="10dp" ????????????????android:src="@mipmap/test_img" /> ????????????<!--菜单栏模块--> ????????????<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"> ????????????????<!--验房--> ????????????????<RelativeLayout ????????????????????android:layout_width="0dp" ????????????????????android:layout_height="100dp" ????????????????????android:layout_weight="1" ????????????????????android:orientation="vertical">
????????????????????<ImageView ????????????????????????android:id="@id/image1" ????????????????????????android:layout_width="50dp" ????????????????????????android:layout_height="50dp" ????????????????????????android:layout_centerHorizontal="true" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:background="@mipmap/test_icon1" />
????????????????????<TextView ????????????????????????android:layout_width="match_parent" ????????????????????????android:layout_height="match_parent" ????????????????????????android:layout_below="@+id/image1" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:gravity="center" ????????????????????????android:text="验房" ????????????????????????android:textColor="@color/black"/> ????????????????</RelativeLayout> ????????????????<!--日常巡检--> ????????????????<RelativeLayout ????????????????????android:layout_width="0dp" ????????????????????android:layout_height="100dp" ????????????????????android:layout_weight="1" ????????????????????android:orientation="vertical">
????????????????????<ImageView ????????????????????????android:id="@id/image2" ????????????????????????android:layout_width="50dp" ????????????????????????android:layout_height="50dp" ????????????????????????android:layout_centerHorizontal="true" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:background="@mipmap/test_icon2" />
????????????????????<TextView ????????????????????????android:layout_width="match_parent" ????????????????????????android:layout_height="match_parent" ????????????????????????android:layout_below="@+id/image2" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:gravity="center" ????????????????????????android:text="日常巡检" ????????????????????????android:textColor="@color/black"/> ????????????????</RelativeLayout> ????????????????<!--钥匙管理--> ????????????????<RelativeLayout ????????????????????android:layout_width="0dp" ????????????????????android:layout_height="100dp" ????????????????????android:layout_weight="1" ????????????????????android:orientation="vertical">
????????????????????<ImageView ????????????????????????android:id="@id/image3" ????????????????????????android:layout_width="50dp" ????????????????????????android:layout_height="50dp" ????????????????????????android:layout_centerHorizontal="true" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:background="@mipmap/yaoshi" />
????????????????????<TextView ????????????????????????android:layout_width="match_parent" ????????????????????????android:layout_height="match_parent" ????????????????????????android:layout_below="@+id/image3" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:gravity="center" ????????????????????????android:text="钥匙管理" ????????????????????????android:textColor="@color/black"/> ????????????????</RelativeLayout> ????????????????<!--统计分析--> ????????????????<RelativeLayout ????????????????????android:layout_width="0dp" ????????????????????android:layout_height="100dp" ????????????????????android:layout_weight="1" ????????????????????android:orientation="vertical">
????????????????????<ImageView ????????????????????????android:id="@id/image4" ????????????????????????android:layout_width="50dp" ????????????????????????android:layout_height="50dp" ????????????????????????android:layout_centerHorizontal="true" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:background="@mipmap/tongji" />
????????????????????<TextView ????????????????????????android:layout_width="match_parent" ????????????????????????android:layout_height="match_parent" ????????????????????????android:layout_below="@+id/image4" ????????????????????????android:layout_marginTop="10dp" ????????????????????????android:gravity="center" ????????????????????????android:text="统计分析" ????????????????????????android:textColor="@color/black"/> ????????????????</RelativeLayout> ????????????</LinearLayout>
????????????<LinearLayout ????????????????android:layout_width="match_parent" ????????????????android:layout_height="wrap_content" ????????????????android:layout_marginTop="20dp" ????????????????android:orientation="horizontal">
????????????????<TextView ????????????????????android:layout_width="wrap_content" ????????????????????android:layout_height="wrap_content" ????????????????????android:layout_marginLeft="10dp" ????????????????????android:layout_weight="1" ????????????????????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="10dp" ????????????????????android:layout_marginRight="10dp" ????????????????????android:text="更多" ????????????????????android:textColor="#666" /> ????????????</LinearLayout>
????????????<!--消息--> ????????????<LinearLayout ????????????????android:layout_width="match_parent" ????????????????android:layout_height="wrap_content" ????????????????android:orientation="vertical" ????????????????android:layout_marginLeft="10dp" ????????????????android:layout_marginRight="10dp"> ????????????????<LinearLayout ????????????????????android:layout_width="300dp" ????????????????????android:layout_height="90dp" ????????????????????android:layout_marginLeft="30dp" ????????????????????android:orientation="vertical" ????????????????????android:layout_marginBottom="30dp" ????????????????????android:background="#0099ff"> ????????????????????<TextView ????????????????????????android:layout_width="match_parent" ????????????????????????android:layout_height="50dp" ????????????????????????android:layout_marginBottom="-4dp" ????????????????????????android:text="*鼎世华府1号楼8单元801业主提报钥匙借用申请" ????????????????????????android:textColor="@color/black"/>
????????????????</LinearLayout> ????????????????<LinearLayout ????????????????????android:layout_width="300dp" ????????????????????android:layout_height="90dp" ????????????????????android:orientation="vertical" ????????????????????android:layout_marginLeft="30dp" ????????????????????android:layout_marginBottom="20dp" ????????????????????android:background="#CCCCFF"> ????????????????????<TextView ????????????????????????android:layout_width="match_parent" ????????????????????????android:layout_height="50dp" ????????????????????????android:layout_marginBottom="-4dp" ????????????????????????android:text="*海尔世纪公馆1期12号楼3单元101房间问题待指派" ????????????????????????android:textColor="@color/black"/> ????????????????</LinearLayout>
????????????</LinearLayout>
????????</LinearLayout> ????</ScrollView>
????<!--底部按钮--> ????<LinearLayout ????????android:layout_width="match_parent" ????????android:layout_height="80dp" ????????android:layout_gravity="bottom" ????????android:layout_weight="0" ????????android:weightSum="4">
????????<RelativeLayout ????????????android:layout_weight="1" ????????????android:layout_width="0dp" ????????????android:layout_height="match_parent">
????????????<ImageView ????????????????android:layout_width="30dp" ????????????????android:layout_height="30dp" ????????????????android:layout_marginTop="15dp" ????????????????android:layout_centerHorizontal="true" ????????????????android:id="@+id/image1" ????????????????android:src="@mipmap/test_icon3" />
????????????<TextView ????????????????android:layout_width="match_parent" ????????????????android:layout_height="wrap_content" ????????????????android:layout_below="@+id/image1" ????????????????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:layout_width="30dp" ????????????????android:layout_height="30dp" ????????????????android:layout_marginTop="15dp" ????????????????android:layout_centerHorizontal="true" ????????????????android:id="@+id/image2" ????????????????android:src="@mipmap/daiban" />
????????????<TextView ????????????????android:layout_width="match_parent" ????????????????android:layout_height="wrap_content" ????????????????android:layout_below="@+id/image2" ????????????????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:layout_width="30dp" ????????????????android:layout_height="30dp" ????????????????android:layout_marginTop="15dp" ????????????????android:layout_centerHorizontal="true" ????????????????android:id="@+id/image3" ????????????????android:src="@mipmap/baobiao" />
????????????<TextView ????????????????android:layout_width="match_parent" ????????????????android:layout_height="wrap_content" ????????????????android:layout_below="@+id/image3" ????????????????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:layout_width="30dp" ????????????????android:layout_height="30dp" ????????????????android:layout_marginTop="15dp" ????????????????android:layout_centerHorizontal="true" ????????????????android:id="@+id/image4" ????????????????android:src="@mipmap/guanli" />
????????????<TextView ????????????????android:layout_width="match_parent" ????????????????android:layout_height="wrap_content" ????????????????android:layout_below="@+id/image4" ????????????????android:layout_centerHorizontal="true" ????????????????android:gravity="center" ????????????????android:text="设置" /> ????????</RelativeLayout>
????</LinearLayout>
</LinearLayout>
步骤分析:
首先我们创建他们的父布局
新建ScrollView ,创建ScrollView 内部父布局,创建顶部首页显示栏,创建顶部图片
菜单栏模块,首先我们创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局,再次创建一个LinearLayout作为单个按钮的父布局,创建上边的图片按钮,并设置其属性,设置按钮底部文字并赋予其属性
消息模块,首先我们创建一个横向的LinearLayout来作为菜单栏的父布局,创建待办Textview,创建更多Textview
底部Tab模块,首先我们创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局,再次创建一个LinearLayout作为单个按钮的父布局
按钮
代码解析:大linearlayout里面套几个小linealayout就行,然后小linearout用margintop控制各个组件之间的区域就行,然后加入图像和文本组件,填写图标和项目名称
问题:其实最大的问题是不了解变量大小,dp,rpx究竟是多大,通过此次实验,学习了如何使用RelativeLayout创建了列表布局,了解了了ScrollView的用法,对Android开发的有了进一步了解
体会:感觉和微信小程序的前端设计原理差不多,都是靠一个个组件完成的,唯一有区别的可能是安卓开发的界面设计更容易明白,他的小函数都挺容易理解的。
|