类微信小程序首页框架（一）

首页框架介绍

1. activity_main.xml文件写页面布局，分为上中下三个部分，包括为顶层的top.xml,中部的framelayout,底部的buttom.xml；
2. top.xm内容为页面标题，我的微信；
3. 中部framelayout包括四个framgment.xml文件，显示页面内容，例如----这是XX界面
4. 底部为button.xml文件，包括四个底部选择框，通过点击选择框，对应页面内容发生改变，且点击后选择框图片颜色会改变；

设计思路

1.导入资源

图片资源导入/res/drawable目录下

自定义颜色在/res/values/color.xml中添加

2.页面布局（.xml文件的编写）

.xml文件都在/res/layout目录下

2.1 activity_main.xml文件

LinearLayout下调用top.xml，FrameLayout控件，button.xml

<include layout="@layout/top"/>

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

    </FrameLayout>

    <include layout="@layout/button"/>

2.2 top.xml文件

LinearLayout下调用TextView控件，显示首页标题

<TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="我的微信"
        android:textColor="@color/white"
        android:textSize="40sp" />

2.3 fragment.xml文件

LinearLayout下调用TextView控件，显示页面内容

• fragment_weixin.xml 显示 这是微信界面
• fragment_friend.xml 显示 这是通讯录界面
• fragment_find.xml 显示 这是发现界面
• fragment_setting.xml 显示 这是设置界面

2.4 button.xml文件

在竖向的LinearLayout嵌入四个横向的LinearLayout，每个横向的LinearLayout中包括一个ImageView和一个TextView,存放图标和名称。

<LinearLayout
        android:id="@+id/tab01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight