微信的门户页面框架设计

先对button.xml界面进去设计分析，下面是显示的界面。

然后分别建立四个.xml文件weixin.xml、friend.xml、contact.xml、config.xml，显示所需的四个界面的文本内容，图片如下图所示。 

                                            weixin.xml的文本内容 

                                              friend.xml的文本内容

                                          contact.xml的文本内容

                                          config.xml的文本内容

 接着通过top.xml文件对微信界面的顶部进去分析设计。

 activity_main.xml主要代码如下：

<?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"/>

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

    </FrameLayout>

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

最后实现实现界面之间的跳转

通过建立4个Fragment，将4个Fragment文件放入java文件中。

 然后通过fragment的代码与4个.xml文件相连接。如图展示一个weixinFragment代码：

package com.example.mywork;

import android.os.Bundle;

import android.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class weixinFragment extends Fragment {


    public weixinFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.weixin, container, false);
    }
}

对四个控件进行监听,四个监听代码基本一样

    private void  initFragment(){
        fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.id_content, weixinFragment);
        transaction.add(R.id.id_content, friendFragment);
        transaction.add(R.id.id_content, configFragment);
        transaction.add(R.id.id_content, contactFragment);
        transaction.commit();

    }
    private void  hideFragment(FragmentTransaction transaction) {
        transaction.hide(weixinFragment);
        transaction.hide(friendFragment);
        transaction.hide(configFragment);
        transaction.hide(contactFragment);
    }

    private void showfragment(int i){
        FragmentTransaction transaction= fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch(i) {
            case 0:
                Log.d("showfragment","1");
                transaction.show(weixinFragment);
                migweixin.setImageResource(R.drawable.weixin);
                break;
            case 1:
                transaction.show(friendFragment);
                migfriend.setImageResource(R.drawable.friend);
                break;
            case 2:
                transaction.show(contactFragment);
                migcontact.setImageResource(R.drawable.contact);
                break;
            case 3:
                transaction.show(configFragment);
                migconfig.setImageResource(R.drawable.config);
                break;
            default:
                break;
        }
        transaction.commit();
    }

    @Override
    public void onClick(View v) {
        Log.d("onClick","1");
        resetImg();
        switch(v.getId()){
            case R.id.LinearLayout1:
                showfragment(0);
                break;
            case R.id.LinearLayout2:
                showfragment(1);
                break;
            case R.id.LinearLayout3:
                showfragment(2);
                break;
            case R.id.LinearLayout4:
                showfragment(3);
                break;
            default:
                break;
        }
    }

}

结果展示：