实训三、用Fragment实现点击页面的切换

进行实训操作

1. 前台代码
   （1）
   创建fragment1，插入图片1
   创建fragment2，插入图片2
   创建fragment3，插入图片3
   创建fragment4，插入图片4
   
   
   （2）主函数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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="lesson10.computer.lesson19_training.MainActivity">
    <!-- 主题部分-->
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"></FrameLayout>
    <!-- 导航部分-->
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#000000">

    </View>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        >
        <!-- 消息按钮-->
        <LinearLayout
            android:id="@+id/message_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/message"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="消息"
                />
        </LinearLayout>
        <View
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:background="#000000">

        </View>
        <!-- 联系人按钮-->
        <LinearLayout
            android:id="@+id/contacts_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/contacts"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="联系人"
                />
        </LinearLayout>
        <View
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:background="#000000">

        </View>
        <!-- 动态按钮-->
        <LinearLayout
            android:id="@+id/news_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/news"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="动态"
                />
        </LinearLayout>
        <View
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:background="#000000">

        </View>
        <!-- 设置-->
        <LinearLayout
            android:id="@+id/setting_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/setting"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="设置"
                />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

效果图

2. 后台代码
   主函数MainActivity

package lesson10.computer.lesson19_training;

import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private View messageBtn;
    private View contactsBtn;
    private View newsBtn;
    private View settingBtn;
    private MyFragment1 fragment1;
    private MyFragment2 fragment2;
    private MyFragment3 fragment3;
    private MyFragment4 fragment4;
    private FragmentManager manager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    /**
     * 初始化
     */
    private void init() {
//        //创建全局的Fragment实例
//        fragment1 = new MyFragment1();
//        fragment2 = new MyFragment2();
//        fragment3 = new MyFragment3();
//        fragment4 = new MyFragment4();
        //获取FragmentManager实例
        manager = this.getSupportFragmentManager();

        messageBtn = findViewById(R.id.message_layout);
        contactsBtn = findViewById(R.id.contacts_layout);
        newsBtn = findViewById(R.id.news_layout);
        settingBtn = findViewById(R.id.setting_layout);
        //设置点击事件的监听
        messageBtn.setOnClickListener(this);
        contactsBtn.setOnClickListener(this);
        newsBtn.setOnClickListener(this);
        settingBtn.setOnClickListener(this);
    }

    @Override
    //点击画面就会调用此函数
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.message_layout:
                //消息按钮
                setSelectionTab(0);
                break;
            case R.id.contacts_layout:
                //联系人按钮
                setSelectionTab(1);
                break;
            case R.id.news_layout:
                //动态按钮
                setSelectionTab(2);
                break;
            case R.id.setting_layout:
                //设置按钮
                setSelectionTab(3);
                break;
        }
    }

    /**
     * 设置选中的Tab页面
     *  @param index
     * 0：消息 1：联系人 2：动态 3：设置
     */
    public  void setSelectionTab(int index){
        //1.创建Fragment实例
        //2. 获取FragmentManager实例 ，getSupportFragmentManager()方法
        //3.利用2中得到了manage实例，开启事务beginTransaction（）
        //4.利用3中开启的事务，把Fragment添加、移除、显示、隐藏、容器中
        //5. 提交事务
        FragmentTransaction trans = manager.beginTransaction();
        //设置所有的按钮都是非选择状态
        setUnSelect();
        //隐藏所有的Fragment
        hideFragments(trans);
        //切换按钮的选中状态
        switch (index){
            case 0:
                //设置消息按钮的选择状态，ff是透明度，00是完全不透明，后六位是颜色，此为蓝色、透明
                this.messageBtn.setBackgroundColor(0xff0000ff);
                if(fragment1==null) {
                    fragment1 = new MyFragment1();
                    trans.add(R.id.content,fragment1);
                }else{
                    trans.show(fragment1);
                }
                break;
            case 1:
                //联系人按钮设置为蓝色
                this.contactsBtn.setBackgroundColor(0xff0000ff);
                if(fragment2==null) {
                    fragment2 = new MyFragment2();
                    trans.add(R.id.content,fragment2);
                }else{
                    trans.show(fragment2);
                }
                break;
            case 2:
                //动态按钮设置为选择状态
                this.newsBtn.setBackgroundColor(0xff0000ff);
                if(fragment3==null) {
                    fragment3 = new MyFragment3();
                    trans.add(R.id.content,fragment3);
                }else{
                    trans.show(fragment3);
                }
                break;
            case 3:
                //设置按钮设置的选择状态
                this.settingBtn.setBackgroundColor(0xff0000ff);
                if(fragment4==null) {
                    fragment4 = new MyFragment4();
                    trans.add(R.id.content,fragment4);
                }else{
                    trans.show(fragment4);
                }
                break;
        }
        //提交事务
        trans.commit();
    }

    /**
     * 隐藏所有的Fragment
     * @param trans
     */
    private void hideFragments(FragmentTransaction trans) {
        if(fragment1 != null) {
            trans.hide(fragment1);
        }
        if(fragment2 != null) {
            trans.hide(fragment2);
        }
        if(fragment3 != null) {
            trans.hide(fragment3);
        }
        if(fragment4 != null) {
            trans.hide(fragment4);
        }
    }

    /**
     * 将所有按钮设置为非选择状态
     */
    private void setUnSelect() {
        this.messageBtn.setBackgroundColor(0xffffffff);
        this.contactsBtn.setBackgroundColor(0xffffffff);
        this.newsBtn.setBackgroundColor(0xffffffff);
        this.settingBtn.setBackgroundColor(0xffffffff);
    }
}

效果图