Android碎片Fragment之多标签切换效果（微信和QQ底

概述

最近公司的项目需要用到Android，需要实现一个类似于多标签滚动滚动切换的效果。今天参考的网上的各种资料，暂时只实现的一个点击底部按钮切换Fragment的效果，决定先记录下来，给其他跟我一样刚接触Android的新手做个参考。因为本人对Android的开发还是处于一知半解的阶段，以下代码或许有许多不合理的地方，请帮忙指出，谢谢！

实现效果

• 动态添加Fragment
• 新建Fragment时，给Fragment传值
• 隐藏和显示Fragment

效果图

device-2018-08-04-194613.gif

布局文件

---

首先是Fragment的文件
activity_fragment_tab.xml

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

    <TextView
        android:id="@+id/content_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:text="内容"/>

</LinearLayout>

Fragment的文件布局很简单，只有 一个TextView，用来显示文字。

---

接下来是主Activity的布局文件
activity_fragment_tab.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#FFFFFF"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 用来存放Fragment -->
    <FrameLayout
        android:id="@+id/contextFrameLayout"
        android:background="#dadada"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp">
    </FrameLayout>

    <!-- 用来存放按钮 -->
    <LinearLayout
        android:id="@+id/buttonLayout"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:orientation="horizontal">
    </LinearLayout>
</LinearLayout>

主Activity的布局文件也很简单，包含一个用来装Fragment的FrameLayout和底部用来装按钮的LinearLayout。

---

接下来是代码

Fragment的类文件
ContextFragment.java

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.fragment.app.Fragment;
import csl.com.fa.R;

public class ContextFragment extends Fragment {

    TextView textView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.context_fragment, container, false);

        // 获取文本控件
        textView = view.findViewById(R.id.content_text);

        // 获取Bundle,该对象是Activity创建Fragment时，传入的
        Bundle bundle = getArguments();
        if (bundle != null) {
            String textValue = bundle.getString("textValue");// 将文本框的值赋值为传入的textValue
            textView.setText(textValue);
        }

        return view;
    }
}

该类集成了Fragment，并重写了onCreateView()方法。方法中将Activity创建时传入的textValue值，赋值给文本框。通信方式是通过Bundle，个人觉得这种比较高效简单。

---

Activity的类文件
FragmentTabActivity.java

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import csl.com.fa.fragment.ContextFragment;

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;

public class FragmentTabActivity extends AppCompatActivity implements View.OnClickListener {

    public String[] btnTitles = new String[]{"微信","通信录", "发现","我"};// 按钮标题
    public List<Fragment> contextFragments = new ArrayList<>();// 用来存放Fragments的集合
    public LinearLayout linearLayout;

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

        init();// 初始化控件
    }

    /**
     * 初始化控件
     */
    private void init() {
        // 初始化按钮
        initButton();

        // 初始化Fragment
        initFragment();
    }

    /**
     * 初始化按钮控件
     */
    public void initButton() {
        // 获取存放按钮的LinearLayout
        linearLayout = findViewById(R.id.buttonLayout);

        // 遍历按钮标题数组，动态添加按钮
        for (String btnStr: btnTitles) {

            Button btn = new Button(this);
            btn.setText(btnStr);
            btn.setTag(btnStr);// 存放Tag,值为按钮标题文本

            // 设置按钮样式
            btn.setBackgroundColor(Color.WHITE);
            LinearLayout.LayoutParams btnLayoutParams = 
                    new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);

            // 添加点击事件
            btn.setOnClickListener(this);

            // 将按钮加入LinearLayout
            linearLayout.addView(btn, btnLayoutParams);
        }
    }

    /**
     * 初始化Fragment
     */
    public void initFragment() {

        // 获取FragmentManager
        FragmentManager fragmentManager = getSupportFragmentManager();
        // 开始事务管理
        FragmentTransaction transaction = fragmentManager.beginTransaction();

        // 添加按钮对应的Fragment
        for (String btnStr: btnTitles) {

            // 声明一个ContextFragment
            ContextFragment contextFragment = new ContextFragment();

            // 将ContextFragment添加到contextFrameLayout，并设置tag为按钮的标题
            // （这里的Tag和按钮的Tag是一样的，按钮点击事件中用按钮的Tag查找Fragment）
            transaction.add(R.id.contextFrameLayout, contextFragment, btnStr);

            // 设置ContextFragment中文本的值，这里用Bundle传值
            Bundle bundle = new Bundle();
            bundle.putString("textValue", btnStr);
            contextFragment.setArguments(bundle);

            // 将contextFragment加入Fragment集合中
            contextFragments.add(contextFragment);
        }
        // 提交事务
        transaction.commit();

        // 显示第一个Fragment,隐藏其它的Fragment
        showFragment(btnTitles[0]);
    }

    /**
     * 显示指定的Fragment
     * @param tag
     */
    public void showFragment(String tag) {
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();

        // 遍历contextFragments
        for (Fragment fragment: contextFragments) {
            if (fragment.getTag().equals(tag)) {// tag一样，显示Fragment
                transaction.show(fragment);
            } else {// 隐藏Fragment
                transaction.hide(fragment);
            }
        }
        transaction.commit();
    }

    @Override
    public void onClick(View view) {
        // 显示相应的Fragment
        showFragment(view.getTag().toString());
    }
}

该类主要有三个方法initButton()、initFragment()、showFragment()

• initButton()：底部按钮的动态添加。
• initFragment()：Fragment的动态添加,其中设置了Tag和Button的Tag一样的值，即按钮和Fragment的Tag是一一对应的。
• showFragment()：根据传入的参数Tag，显示Fragment，隐藏其它的Fragment。、

---

重点解析

• Fragment的创建

第一步、需要先获取FragmentManager，该对象可以对Fragment进行管理

FragmentManager fragmentManager = getSupportFragmentManager();

第二步、获得FragmentTranscation，FragmentManage对Fragment的一系列事务操作主要由FragmentTranscation来执行

FragmentTransaction transaction = fragmentManager.beginTransaction();

第三步、实例化Fragment，这步没什么好说的

ContextFragment contextFragment = new ContextFragment();

第四步、将Fragment添加到容器中，这里用的是add()方法，其中replace()也可以实现，目前还没有了解这两个方法的区别

transaction.add(R.id.contextFrameLayout, contextFragment, btnStr);

第五步、用Bundle来通信，实现向Fragment传递数据，这里主要传的是文本的值

Bundle bundle = new Bundle();// 声明一个Bundle对象
bundle.putString("textValue", btnStr);// 向Bundle加入数据(用键值存储，可以理解为Map<K,V>)，Fragment根据key获取值。
contextFragment.setArguments(bundle);// 通过setArguments()将bundle设置到Fragment，在Fragment中可以根据getArguments()获取到Bundle

第六步、提交事务，如果忘了这一步，之前所做的都没有效果，就跟执行更新数据，却没有提交一样

transaction.commit();

• Fragment的显示和隐藏
  跟Fragment的创建一样，Fragment的隐藏和显示也是用FragmentTransaction来操作的

第一步、需要先获取FragmentManager，该对象可以对Fragment进行管理

FragmentManager fragmentManager = getSupportFragmentManager();

第二步、获得FragmentTranscation，FragmentManage对Fragment的一系列事务操作主要由FragmentTranscation来执行

FragmentTransaction transaction = fragmentManager.beginTransaction();

显示Fragment

transaction.show(fragment);

隐藏Fragment

transaction.hide(fragment);

最后一步、提交事务

transaction.commit();

总结

今天是我第一次写博客，算是一个好的开始，希望以后自己能坚持下来。
我的文笔比较不好，有很多可能没有表达清楚，有哪里不理解的可以留言或者发我邮箱(caishaolang0@qq.com)。
最后吐槽下简书的代码显示背景居然是黑色的，连带着注释都是深色的，看着好吃力ψ(╰_╯)