安卓开发——微信UI界面

一、功能说明

本次作业开发的是类似微信的主页面框架，UI布局为上中下结构，用户可通过点击底部导航栏切换板块内容，其中共包含四个板块，分别是“微信”、“通讯录”、“发现”和“我的”。

二、设计流程

2.1 页面设计

微信的界面布局分为上中下三个部分。

（1）第一部分，主要是显示界面的标题。

（2）第二部分，主要是“微信”、“通讯录”、“发现”和“我的”四个板块的具体内容。

（3）第三部分，主要是“微信”、“通讯录”、“发现”和“我的”四个板块的切换控件。

2.2 功能设计

实现点击底部控件切换到对应的板块界面。

（1）创建Fragment类及其对应的layout文件

（2）创建FragmentManager管理Fragment，以及FragmentTransaction

（3）设置监听

（4）设置控件被点击后的响应事件

三、核心代码详解

3.1 界面布局代码

3.1.1 总体布局 activity_main.xml

   ·<!--界面顶部-->
    <include layout="@layout/top"></include>

    <!--界面中部-->
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"></FrameLayout>

    <!--界面底部-->
    <include layout="@layout/bottom"></include>

<include>标签可以实现在一个layout文件中引用另一个layout文件的布局

此处则是在activity_main.xml文件中引入了top.xml文件和bottom.xml文件的布局

在FrameLayout中设置属性layout_weight=1可将FrameLayout填满界面中除了top和bottom的中间部分。

3.1.2 界面顶部 top.xml

<TextView
        android:id="@+id/top_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="微信"
        android:textSize="40sp" />

3.1.3 界面中部

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:t