APP门户界面设计

• 微信聊天界面
  
• 微信通讯录界面
  
• 微信发现界面
  
• 微信设置页面
  

上述界面可以分为三部分分别进行开发，一是顶部的标题栏，二是中间的内容栏，三是底部的菜单栏，接下来分析三部分分别如何设计开发。

底部需要有四个按钮来回切换，所以可以将底部分为四个空间，每个空间都由textView和imageButton组成。

顶部标题只需一个TextView控件即可，所以在top.xml中进行简单布局即可

中间内容需要在点击不同的按钮时进行切换，且其他部分不变，因此可以引入fragment实现。通过inflate方法将xml布局压缩到一个fragment中，当在主程序中通过按钮调用时，实际上中间切换的是fragment，每一个fragment拥有自己的界面。

• 核心代码

public class news extends Fragment {

    public news() {
        // Required empty public constructor
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        //将xml文件压缩至container
        return inflater.inflate(R.layout.fragment_news, container, false);
    }
}

整体布局在activity_main.xml文件中体现，通过include标签引入top.xml和bottom.xml布局文件

• 核心思路：通过fragment的控制达到显示所需页面而隐藏其他页面，就可以实现四个页面的相互切换。
• 核心代码
  • 初始化fragment，将xml布局装入container

private Fragment news = new news();
private Fragment friends = new friends();
private Fragment address =new address();
private Fragment setting = new setting();
private FragmentManager fragmentManager;

private void init_Fragment(){
        fragmentManager =getFragmentManager();
        
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.add(R.id.frame_container,news);
        fragmentTransaction.add(R.id.frame_container,friends);
        fragmentTransaction.add(R.id.frame_container,address);
        fragmentTransaction.add(R.id.frame_container,setting);
        fragmentTransaction.commit();
        showFragment(0);
        
        news_button.setImageResource(R.drawable.tab_weixin_pressed);
    }

• 隐藏所有fragment

    private void hide_Fragment(FragmentTransaction fragmentTransaction)
    {
        fragmentTransaction.hide(news);
        fragmentTransaction.hide(friends);
        fragmentTransaction.hide(address);
        fragmentTransaction.hide(setting);
    }

• 显示特定的fragment

private void showFragment(int i) {
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        hide_Fragment(fragmentTransaction);
        switch (i){
            case 0:
                fragmentTransaction.show(news);
                break;
            case 1:
                fragmentTransaction.show(friends);
                break;
            case 2:
                fragmentTransaction.show(setting);
                break;
            case 3 :
                fragmentTransaction.show(address);
                break;
            default:
                break;
        }
        fragmentTransaction.commit();
    }

• 定义onClick()响应监听，并在监听到点击动作时显示相应fragment。
• 四个Button响应时分别向showFragment()函数传入参数0、1、2、3，showFragment()函数中通过switch语句重设资源图片和transaction，实现点击后按钮图片变绿且其余变灰同时fragment内容发生切换。

@Override
    public void onClick(View view) {
        resetButton();

        switch (view.getId()){
            case R.id.id_tab_news:
                showFragment(0);
                news_button.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case R.id.id_tab_friends:
                showFragment(1);
                friends_button.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case R.id.id_tab_setting:
                showFragment(2);
                setting_button.setImageResource(R.drawable.tab_settings_pressed);
                break;
            case R.id.id_tab_address:

                showFragment(3);
                address_button.setImageResource(R.drawable.tab_address_pressed);
                break;
            default:
                break;
        }
    }

• 核心思路：提前准备正常状态下和按压状态下的按钮图片，当监听到点击事件时，在显示fragment的同时，重设imageButton的图片资源，设置为按压后的按钮，当切换按钮时，重设所有按钮的状态。
• 核心代码：
  • 重设按钮图片资源

    private void resetButton(){
        news_button.setImageResource(R.drawable.tab_weixin_normal);
        friends_button.setImageResource(R.drawable.tab_find_frd_normal);
        address_button.setImageResource(R.drawable.tab_address_normal);
        setting_button.setImageResource(R.drawable.tab_settings_normal);
    }

• 切换按钮图片资源

···
news_button.setImageResource(R.drawable.tab_weixin_pressed);
···

启动APP时，会出现所有fragment同时显示的问题，即所有fragment在初始化后全部显示，导致页面杂乱。

• 在进行fragment初始化结束后，设置默认显示页面，并隐藏其他页面即可解决。

    private void init_Fragment(){
        fragmentManager =getFragmentManager();
		//初始化，代码省略
        showFragment(0);
        //默认显示第一个页面
        news_button.setImageResource(R.drawable.tab_weixin_pressed);
        //默认第一个按钮为按压状态
    }

gitee仓库地址