实验目录
1、设计目标
2、功能说明
3、代码解析
4、运行展示截图
5、源码仓库地址
一、设计目标
完成类微信的门户页面框架设计,app包含四个tab界面,框架设计使用fragment,activity。
二、功能说明
设计出的类微信界面应该具备的功能:
1、可以展示出微信、通讯录、发现、我四个主界面
2、可以在四个主界面之间自由切换
3、界面正上方有微信标题居中,界面中间展示内容,页面内容随着下面四个小图标的点击而变换内容,且正在显示的页面图标显示为绿色,而还未显示页面的图标显示为灰色。
三、代码解析
1、XML代码
top.xml
界面上方居中显示标题,背景为黑色,显示白色字体
<?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="#ffffff"
android:textSize="30sp"/>
</LinearLayout>
bottom.xml
界面下方有四个图标可以切换,且点击图标后,图标为绿色,没有点击的图标为灰色,用LinearLayout中嵌套LinearLayout。
<?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"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#000000"
android:orientation="horizontal"
android:baselineAligned="false">
<LinearLayout
android:id="@+id/id_tab_weixin"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="#000000"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_weixin_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:clickable="false"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/tab_weixin_pressed"
/>
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:gravity="center"
android:text="微信"
android:textColor="#ffffff"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_frd"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#000000"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_frd_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:clickable="false"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/tab_tongxulu" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="通讯录"
android:clickable="false"
android:textColor="#ffffff"
android:gravity="center"
android:textSize&#