TabLayout和Fragment实现点击和滑动切换

 

先上效果图：

                                       

先看布局文件：

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="60dp" />

    <android.support.v4.view.ViewPager
        android:id="@+id/fragment_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

这边初始化了三个数组，用于展示文字和图片，并绑定控件

private TabLayout tabLayout;
    private ViewPager viewPager;
    private String[] title = {"第一个", "第二个", "第三个"};
    private int[] selectImg = {R.mipmap.icon_past_yellow, R.mipmap.icon_wrelust, R.mipmap.icon_yrelust_yellow};
    private int[] unSelectImg = {R.mipmap.icon_past, R.mipmap.icon_wrelust_g, R.mipmap.icon_yrelust};


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

        tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        viewPager = (ViewPager) findViewById(R.id.fragment_pager);

        initPager();
    }

viewpager中用三个fragment用于展示切换的界面

private void initPager() {
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                Fragment fragment = new Fragment();
                if (fragment != null) {
                    switch (position) {
                        case 0:
                            fragment = new FirstFragment();
                            break;
                        case 1:
                            fragment = new SecondFragment();
                            break;
                        case 2:
                            fragment = new ThirdFragment();
                            break;
                    }
                }
                return fragment;
            }

            @Override
            public int getCount() {
                return 3;
            }
        });

        tabLayout.setupWithViewPager(viewPager);
        viewPager.setCurrentItem(0);
        tabLayout.getTabAt(0).setCustomView(getTabView(0));
        tabLayout.getTabAt(1).setCustomView(getTabView(1));
        tabLayout.getTabAt(2).setCustomView(getTabView(2));

        initTab();
    }

setupWithViewPager（）这个方法将把给定的ViewPager和这个TabLayout链接在一起，这样任何其中一个的变化会自动反映到另一个.

initTab()方法用于tablayout设置点击切换的变化

  private void initTab() {
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                View view = tab.getCustomView();
                TextView textView = view.findViewById(R.id.txt_tab_task);
                ImageView imageView = view.findViewById(R.id.img_tab_task);
                textView.setTextColor(Color.parseColor("#ed8200"));
                if (textView.getText().toString().equals(title[0])) {
                    imageView.setImageResource(selectImg[0]);
                    viewPager.setCurrentItem(0);
                } else if (textView.getText().toString().equals(title[1])) {
                    imageView.setImageResource(selectImg[1]);
                    viewPager.setCurrentItem(1);
                } else if (textView.getText().toString().equals(title[2])) {
                    imageView.setImageResource(selectImg[2]);
                    viewPager.setCurrentItem(2);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                View view = tab.getCustomView();
                TextView textView = view.findViewById(R.id.txt_tab_task);
                ImageView imageView = view.findViewById(R.id.img_tab_task);
                textView.setTextColor(Color.parseColor("#999999"));
                if (textView.getText().toString().equals(title[0])) {
                    imageView.setImageResource(unSelectImg[0]);
                    viewPager.setCurrentItem(0);
                } else if (textView.getText().toString().equals(title[1])) {
                    imageView.setImageResource(unSelectImg[1]);
                    viewPager.setCurrentItem(1);
                } else if (textView.getText().toString().equals(title[2])) {
                    imageView.setImageResource(unSelectImg[2]);
                    viewPager.setCurrentItem(2);
                }
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

getTabView（）用于 设置默认的界面，也就是默认显示第一个界面

 private View getTabView(int position) {
        View view = LayoutInflater.from(this).inflate(R.layout.tab_task_item, null);
        TextView textView = view.findViewById(R.id.txt_tab_task);
        ImageView imageView = view.findViewById(R.id.img_tab_task);
        textView.setText(title[position]);
        imageView.setImageResource(unSelectImg[position]);

        if (position == 0) {
            textView.setTextColor(Color.parseColor("#ed8200"));
            imageView.setImageResource(selectImg[position]);
        }
        return view;
    }

tab_task_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/img_tab_task"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/txt_tab_task"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

FirstFragment

public class FirstFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_1, null);
        return view;
    }
}

fragment1.xml

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="第一个"
        android:gravity="center"/>
</LinearLayout>