类微信界面的设计与实现

一，设计目标与实现内容展示

设计目标

1.页面能显示标题“微信”，但不显示Andriod Studio项目标题
2.页面中间能显示内容，例如“这是微信界面”
3.页面底部具有选择框，并且具有选择事件
4.页面底部的选择框改变时，中间的显示内容能按照要求同步改变
5.页面的布局清晰

实现内容展示：

二，详细思路以及实现

布局文件的设计

主页面上顶和下底的XML直接使用include引用，中间内容则使用Fragment组件显示
上顶显示App的标题
中间内容显示相对应的内容，由于我们要显示4个界面，所以应该有4个XML文件
下底则由4个LinearLayout组成，而每一个LinearLayout又由一个ImageButton和一个TextView组成

主页面代码示例：

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

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

    <include layout="@layout/bottom"></include>
</LinearLayout>

事件控制的设计

控制流程：用户点击bottom中的选择框 -->onClick()返回给setselect()值 -->Fragment控件根据setselect()中的值进行对应的事件控制

点击下底的Button，中间的Fragment能够进行相应的跳转
对下底的控件进行监听
将监听到的下底的控件的点击事件，传递给对应的Fragment控件进行事件控制

监听点击事件：

 /**
     * 设置对底部LinearLayout监听
     */
    private void initEvent(){
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabContacts.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);
    }

Fragment控件进行事件控制并设置相应的LinearLayout和Image：

/**
     *通过onClick传递的值进行中间显示Fragment的控制
     * @param i: onClick传递的值
     */
    private void setSelect(int i) {
        FragmentTransaction transaction = fm.beginTransaction();
        //隐藏Fragment
        hideFragment(transaction);
        //点亮Fragment并设置区域内容
        switch (i) {
            case 0:
                transaction.show(mTab01);
                mImgWeixin.setImageResource(R.drawable.weixin_2_pressed);
                break;
            case 1:
                transaction.show(mTab02);
                mImgFrd.setImageResource(R.drawable.frd_pressed);
                break;
            case 2:
                transaction.show(mTab03);
                mImgContacts.setImageResource(R.drawable.contacts_pressed);
                break;
            case 3:
                transaction.show(mTab04);
                mImgSettings.setImageResource(R.drawable.settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }

三，总结

本项目的难点在于对点击事件的监听和Fragement的事件控制。另外在初始化FragmentManager的时候应该使用getSupportFragmentManager()。消除项目标题应把AndriodManifest.xml中修改

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

本项目只是提供了一个类微信界面的框架，大家可以按照自己的喜好去修改。另外附上gitee源代码和阿里矢量图标库

PS.第一次写blog,第一个Android Studio 项目，不足之处还请各路大佬指正。

Android Studio 学习（一）