一.设计目的
使用fragment,activity等设计一个类微信的门户页面框架。
不使用UNIAPP技术进行开发(H5或小程序)。
二.功能说明
程序运行后进入门户页面,共包含4个tab页面,页面有顶部、主页面和底部三个部分。通过点击底部的微信、朋友、通讯录、设置四个按钮可以跳转到对应的主页面。进行页面跳转时,只改变门户主页面的元素,顶部和底部都不变。
三.代码解析
顶部部分:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:layout_weight="1"
android:text="WeChat"
android:textColor="#ffffff"
android:textSize="40sp" />
</LinearLayout>
主页面:
<?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">
<include layout="@layout/top" />
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom" />
</LinearLayout>
底部部分:
<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">
<LinearLayout
android:id="@+id/id_tab_weixin"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:background="@drawable/bottom_bar"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_weixin_img"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_weight="1"
android:clickable="false"
android:background="#000000"
app:srcCompat="@drawable/weixin2"
tools:ignore="SpeakableTextPresentCheck" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:saveEnabled="false"
android:text="微信"
android:textColor="#ffffff"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_frd"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:background="@drawable/bottom_bar"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_frd_img"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_weight="1"
android:clickable="false"
android:background="#000000"
app:srcCompat="@drawable/friend2"
tools:ignore="SpeakableTextPresentCheck" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:saveEnabled="false"
android:text="朋友"
android:textColor="#ffffff"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_contact"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:background="@drawable/bottom_bar"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_contact_img"
android:layout_width="match_parent"
android:layout_height="80dp"
android:clickable="false"
android:layout_weight="1"
android:background="#000000"
app:srcCompat="@drawable/address2"
tools:ignore="SpeakableTextPresentCheck" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:saveEnabled="false"
android:text="通讯录"
android:textColor="#ffffff"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_settings"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:background="@drawable/bottom_bar"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_settings_img"
android:layout_width="match_parent"
android:layout_height="80dp"
android:clickable="false"
android:layout_weight="1"
android:background="#000000"
app:srcCompat="@drawable/setting2"
tools:ignore="SpeakableTextPresentCheck" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:saveEnabled="false"
android:text="设置"
android:textColor="#ffffff"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>
四.运行展示截图
五.源码仓库地址
gzgit0808/gz_wechar (github.com)https://github.com/gzgit0808/gz_wechar