类微信的门户页面框架设计

一.设计目的

使用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