1.任务
内容:请根据课程实操实现APP门户界面框架设计,至少包含4个tab页,能实现tab页之间的点击切换
技术:使用布局和分段,对控件进行点击监听
2.技术要求
使用布局(layouts)和分段(fragment),对控件进行点击监听
3.思路
使用四个fragment,通过覆盖显示来完成界面。
实现过程
一、界面框架设计思路
我们发现对于APP的四个tab页面来说,每个页面都是由三个部分组成的:顶部的固定部分,用来显示自己APP的名字;中间部分的主页面,用来显示不同页面的主内容;底部的导航页面,用来帮助使用者清晰的切换页面。同时由于要实现页面之间的交互(中间的主内容随底部导航切换而切换),因此我们的设计思路为设计三个框架进行拼接:顶部的top、底部的bottom、中间的分段以及最后的总框架。以下是各部分的实现方法:
1.页面顶部 top.xml
该部分的实现方法为:最外层使用一个水平的linearlayout布局,然后使用一个textview即可。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="65dp"
android:gravity="center"
android:background="#000000"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="MyWeChat"
android:textColor="#FD98BA"
android:textSize="30sp"/>
</LinearLayout>
实验后页面如图
2.页面底端 bottom.xml
该部分的设计思路:在该部分中一共有4个按钮以及4个对应文字,每一个文字和一个按钮组成一个垂直方向的元素,四个元素又组成一个水平方向的大框架。因此对于此部分,最外层采用水平的linearlayout的布局,在水平布局下又放四个垂直方向的linearlayout的布局,在每个垂直布局下又放上一个imageview和一个textview(imageview放在textview上层)。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_weight="1"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:background="#8AD6DD">
<LinearLayout
android:id="@+id/LinearLayout_xiaoxi"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="70dp"
app:srcCompat="@android:drawable/ic_popup_reminder" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:rotationX="0"
android:rotationY="0"
android:text="消息" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout_tongxunlu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="76dp"
app:srcCompat="@android:drawable/ic_menu_my_calendar" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="通讯录" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout_pyq"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView3"
android:layout_width="match_parent"
android:layout_height="70dp"
app:srcCompat="@android:drawable/ic_menu_myplaces" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="朋友圈" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout_my"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView4"
android:layout_width="match_parent"
android:layout_height="70dp"
tools:srcCompat="@tools:sample/avatars" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="我的" />
</LinearLayout>
</LinearLayout>
设置对应组件树结构
3.整体框架activity_main.xml
整体框架就是将top,bottom以及中间的主内容进行拼接。相当于一个桥接的作用
那么最外层就需要使用一个垂直方向的lineaarlayout,然后将top和bottom部分liclude进来(top在上,bottom在下,中间放主内容),同时中间的主内容使用framelayout,以便进行接下来的交互设计。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/top"/>
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="683dp"
android:layout_weight="1"></FrameLayout>
<include
layout="@layout/bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"></include>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayou
实现如下
二、交互设计思路
想要实现四个tab界面的交互,那么就需要activity调用FragmentManager来获取不同的Fragment,因此首先我们需要创建四个不同的Fragment,用于创建不同tab页面的主页面,之后通过一系列的调用实现不同页面的交互
创建
通过建立4个Fragment,将4个Fragment文件放入java文件中
然后通过fragment的代码与4个.xml文件相连接
中间fragment.xml文件
这个是聊天界面的fragment设计,第一个界面消息界面
实现后
其他三个文件相似
实现结果
进行变量声明
对每个变量和id进行一一对应,LinearLayout是指bottom.xml中的4个LinearLayout,ImageView是指bottom中的4个图标
接口实现
定义事件启动函数
MainActivity实现接口View.OnClickListener,默认会对界面进行全屏监听,这里我们只需要对四个控件进行监听,因此自定义initEvent()函数来缩小监听范围
初始化监听事件
控制tab变换
自定义setSelect(int i)函数来显示不同界面内容。一共有四个tab,我们给每个tab设置一个index作为标记。
重写onClick:
用户点击哪个tab,就调用setSelect方法设置对应的i值。注意这里还需要对图片进行统一变灰处理。resetImgs方法实现该功能。
private void initEvent(){
mTabxiaoxi.setOnClickListener(this);
mTabtongxunlu.setOnClickListener(this);
mTabpyq.setOnClickListener(this);
mTabmy.setOnClickListener(this);
}
private void showfragment(int i) {
FragmentTransaction transaction = fragmentManager.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(xiaoxiFragment);
break;
case 1:
transaction.show(tongxunluFragment);
break;
case 2:
transaction.show(pyqFragment);
break;
case 3:
transaction.show(myFragment);
break;
default:
break;
}
transaction.commit();
}
运行效果(虚拟机)
代码仓库
gitee地址