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

首页框架介绍

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"/>
1
2
3
4
5
6
7
8
9
10
11

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" />
1
2
3
4
5
6
7
8
9