微信界面框架

​ 微信主界面总共又三个模块构成：顶部标题，底部按钮和主界面。

顶部标题设计

​ 顶部模块中的内容极少，只设计一个TextView的编辑和操作。为了适配整个界面和美观，设置TextView的长为wrap_content，高度自定并且文本文字居中。部分设置如下：

android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:textSize="50sp"

底部按钮设计

底部按钮较为复杂，主要在两个方面。

1. 结构方面：底部整体又一个水平的LinearLayout模块组成，而这个模块中的每个选项都又一个垂直的LinearLayout组成。通过这样的设计可以使得整个界面更加可控，并且外观更加友好。整个水平Layout模块高度为wrap_content适配内部垂直Layout的高度，宽度则为match_parent适配整个主界面。
2. 内容方面：每个垂直的LinearLayout都由一个图标类型ImageView和一个文本类型TextView组成。二者组成的整体构成一个界面选项。

在设计底部按钮图标过程中，出现了一个问题：在IDE编辑中显示正常，但是放在虚拟机中则无法显示图标图片，经过测试发现，需要修改ImageView中图片的路径设置：

android:src="@drawable/png"

通过src参数传入图片地址，并且图片需要保存在工程文件夹下的drawable目录中。

主界面设计

​ 主界面由一个FrameLayout组成，其中叠加了四个选项的界面框架，每一个主界面都由一个Fragment对象构成，将4个Fragment放入主界面的Frame框架中以实现该功能。

功能设计

​ 整个框架主要实现了一个功能：点击某个图标就可以显示该图标指向的界面。

初始化函数

​ 要实现这个功能，首先需要先初始化四个Fragment界面。例如声明微信的聊天界面：

private Fragment fragment_wechat = new fragment_wechat();

​ 其中，使用Fragment类型来创建一个页面对象，fragment_wechat( )就是自定义的微信聊天界面（在layout目录下创建的xml文件）。

​ 同时还需要4个LinearLayout对象来创建4个图标。

private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

​ 然后在Oncreate函数中将这4个对象绑定到buttom文件中的垂直Layout模块，也就是图标。

linearLayout1 = findViewById(R.id.layout1);
linearLayout2 = findViewById(R.id.layout2);
linearLayout3 = findViewById(R.id.layout3);
linearLayout4 = findViewById(R.id.layout4);

​ 其中的findViewById函数的参数为4个图标文件的id。

​ 由于用户需要点击图标来返回界面，所以在函数中还需要设置一个监听函数（以linearLayout1为例）：

linearLayout1.setOnClickListener(this);

​ 使用setOnClickListener( )函数来实现该功能，参数this指向环境变量中的监听操作。要想使用这个函数，整个mainactivity类需要继承监听函数的父类View.OnClickListener。同时需要创建反馈函数OnClick来实现切换界面的操作。

​ 在创建好这些变量之后，就需要初始化整个程序：

private void InitFragment(){
    fragmentManager = getSupportFragmentManager();
    FragmentTransaction transaction = fragmentManager.beginTransaction();
    transaction.add(R.id.id_content, fragment_wechat);
    transaction.add(R.id.id_content, fragment_friend);
    transaction.add(R.id.id_content, fragment_contact);
    transaction.add(R.id.id_content, fragment_config);
    transaction.commit();
    HideFragment(transaction);
}

​ 在初始化函数中，需要创建一个transaction对象，该对象用于操作Fragment，使用对象的add方法来将4个页面（初始创建的4个Fragment对象）压入主xml文件中的FrameLayout中。之后再使用commit( )函数提交修改。

​ 通过上述操作已经实现了初始化的操作，但是如果打开虚拟机会发现4个界面会重合在一起显示在屏幕中，如果想要使初始界面为空，则需要在初始化函数中调用HideFragment函数：

private void HideFragment(FragmentTransaction transaction) {
    transaction.hide(fragment_wechat);
    transaction.hide(fragment_config);
    transaction.hide(fragment_friend);
    transaction.hide(fragment_contact);
}

​ 这样函数就实现了完整的初始化功能，界面如下图：

操作函数

​ 完成初始化工作之后，就需要设计反馈函数onClick来实现点击图标切换页面。函数的核心功能可以采用switch-case条件判断来实现：

switch (view.getId()) {
            case R.id.layout1:
                showfragment(0);
                break;
            case R.id.layout2:
                showfragment(1);
                break;
            case R.id.layout3:
                showfragment(2);
                break;
            case R.id.layout4:
                showfragment(3);
                break;
            default:
                break;
        }

​ 通过传入用户点击的图标的id，经过条件筛选之后获取一个特征值，再将这个值绑定到对应的页面中。绑定和回显的过程可以通过showfragment函数实现：

private void showfragment(int i) {
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        HideFragment(transaction);
        switch (i) {
            case 0:
                transaction.show(fragment_wechat);
                break;
            case 1:
                transaction.show(fragment_contact);
                break;
            case 2:
                transaction.show(fragment_friend);
                break;
            case 3:
                transaction.show(fragment_config);
                break;
            default:
                break;
        }
        transaction.commit();
    }

​ 在设计时我使用了最简单的整型数据类型（int）来实现绑定，绑定的过程仍然可以通过switch-case条件选择。在调用该函数时首先调用HideFragment( )函数来清空页面，然后通过传入的特征值来确定需要回显的页面。在回显操作上使用了transaction对象的show方法，通过传入的Fragment对象来绑定对应的页面。执行完这些操作后commit( )函数提交。

过程仍然可以通过switch-case条件选择。在调用该函数时首先调用HideFragment( )函数来清空页面，然后通过传入的特征值来确定需要回显的页面。在回显操作上使用了transaction对象的show方法，通过传入的Fragment对象来绑定对应的页面。执行完这些操作后commit( )函数提交。

Github链接：https://github.com/masterluoh/Wechat