Fragment实例之微信界面

今天我们来看看微信界面是怎么实现的。

（一）首先，我们先在主布局XML中实现三部分：

第一个部分：<include layout="@layout/activity_top"></include>，这里面用<include.../>元素设计出了微信界面头部的XML，这里面也是一个XML文件，开发人员可以随意在里面制作界面。

第二部分：运用<FrameLayout.../>元素构建一个容器，里面可以放入不同的frameLayout，创建容器的ID，让你能在java代码中找到。当然，你也可以使用ViewFlipper充当第二部分，采用 手势滑动。viewFlipper这里不作详解，以后会介绍。

第三部分：<includelayout="@layout/activity_bottom"></include>这里又运用了<include.../>元素制作微信底部。

下面是整个主XML布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.wc.wei_xin.MainActivity">

    <include layout="@layout/activity_top" ></include>
    <FrameLayout
        android:id="@+id/frame_content"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>
    <include layout="@layout/activity_bottom"></include>
</LinearLayout>

（二）创建微信底部的XML文件：

这里面使用了<LinearLayout.../>元素，里面包含了一个ImageView，这是微信的底部图片，图片的下面用一个TextView来显示文字。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:layout_gravity="bottom">

    <LinearLayout
        android:id="@+id/line1"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <ImageView
            android:layout_weight="1"
            android:id="@+id/ic_1"
            android:src="@drawable/weixin"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />
        <TextView
            android:text="微信"
            android:id="@+id/textview_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="11dp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/line2"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <ImageView
            android:layout_weight="1"
            android:id="@+id/ic_2"
            android:src="@drawable/tongxin"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />
        <TextView
            android:text="通讯录"
            android:id="@+id/textview_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="11dp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/line3"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <ImageView
            android:layout_weight="1"
            android:id="@+id/ic_3"
            android:src="@drawable/faxian"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />
        <TextView
            android:text="通讯录"
            android:id="@+id/textview_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="11dp"
            />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/line4"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <ImageView
            android:layout_weight="1"
            android:id="@+id/ic_04"
            android:src="@drawable/wo"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />
        <TextView
            android:text="我"
            android:id="@+id/textview_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="11dp"
            />
    </LinearLayout>
</LinearLayout>

（三）然后就是创建4个Fragment让他继承基类，然后实现onCreateView()方法返回一个视图。同时你也要创建相应的布局加载文件 weixin_layout ,布局文件里面可以创作很多你的想法，这里不给出。

public class Weixin extends Fragment {
    public Weixin(){};
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.weixin_layout,container,false);
    }
}

（四）编写主Activity的代码：

这里面使用了上一章介绍的Fragment的基础知识，可以去看下。由于篇幅过长，

我在代码的每块做了详细介绍。

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    //Fragment
    private Fragment Weixin;
    private Fragment Tongxin;
    private Fragment Faxian;
    private Fragment Wo;

    //底端菜单栏LinearLayout
    private LinearLayout linear_1;
    private LinearLayout linear_2;
    private LinearLayout linear_3;
    private LinearLayout linear_4;

    //底端菜单栏Imageview
    private ImageView iv_1;
    private ImageView iv_2;
    private ImageView iv_3;
    private ImageView iv_4;

    //底端菜单栏textView
    private TextView tv_1;
    private TextView tv_2;
    private TextView tv_3;
    private TextView tv_4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化各个控件
        InitView();

        //初始化点击触发事件
        InitEvent();

        //初始化Fragment
        InitFragment(1);

        //将第一个图标设置为选中状态
        iv_1.setImageResource(R.drawable.weixin);
    }

    private void InitView(){
//找到XML文件中的LinearLayout
        linear_1 = (LinearLayout) findViewById(R.id.line1);
        linear_2 = (LinearLayout) findViewById(R.id.line2);
        linear_3 = (LinearLayout) findViewById(R.id.line3);
        linear_4= (LinearLayout) findViewById(R.id.line4);
//绑定XML文件中的ImageView
        iv_1 = (ImageView) findViewById(R.id.ic_1);
        iv_2 = (ImageView) findViewById(R.id.ic_2);
        iv_3= (ImageView) findViewById(R.id.ic_3);
        iv_4= (ImageView) findViewById(R.id.ic_04);
//绑定XML文件中的TextView
        tv_1 = (TextView) findViewById(R.id.textview_1); 
       tv_2 = (TextView) findViewById(R.id.textview_2);  
      tv_3 = (TextView) findViewById(R.id.textview_3);   
     tv_4 = (TextView) findViewById(R.id.textview_4);    
} 
   private void InitFragment(int index){
//得到Fragment的布局管理器，目的是开启FragmentTransaction

        FragmentManager fragmentManager = getSupportFragmentManager();
        android.support.v4.app.FragmentTransaction transaction = fragmentManager.beginTransaction();

//使用transaction里面的add（）方法，向FragmentLayout容器里添加Fragment，第一个ID是容器的id。

        hideAllFragment(transaction);
        switch (index){
            case 1:
                if (Weixin== null){
                    Weixin = new Weixin();
                    transaction.add(R.id.frame_content,Weixin);
                }
                else{
                    transaction.show(Weixin);
                }
                break;

            case 2:
                if (Tongxin== null){
                    Tongxin = new Tongxin();
                    transaction.add(R.id.frame_content,Tongxin);
                }
                else{
                    transaction.show(Tongxin);
                }
                break;

            case 3:
                if (Faxian== null){
                    Faxian =new Faxian();
                    transaction.add(R.id.frame_content,Faxian);
                }
                else{
                    transaction.show(Faxian);
                }
                break;

            case 4:
                if (Wo== null){
                    Wo = new Wo();
                    transaction.add(R.id.frame_content,Wo);
                }
                else{
                    transaction.show(Wo);
                }
                break;

        }
        transaction.commit();
    }
    private void InitEvent(){
//把注册监听器放在一个方法里，有利于后期的维护。
        linear_1.setOnClickListener(this);
        linear_2.setOnClickListener(this);
        linear_3.setOnClickListener(this);
        linear_4.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
//单击事件，单击微信底部的LinearLayout，则呈现不同的Fragment
        switch(view.getId()){
            case R.id.line1:

                InitFragment(1);
                break;

            case R.id.line2:
                InitFragment(2);
                break;

            case R.id.line3:
                InitFragment(3);
                break;

            case R.id.line4:
                InitFragment(4);
                break;
        }
    }


    private void hideAllFragment(android.support.v4.app.FragmentTransaction transaction){
//使用transaction的隐藏方法，使Fragment隐藏。

        if (Weixin!= null){
            transaction.hide(Weixin);
        }

        if (Tongxin!= null){
            transaction.hide(Tongxin);
        }

        if (Faxian!= null){
            transaction.hide(Faxian);
        }
        if (Wo!= null){
            transaction.hide(Wo);
        }


}