王学岗TabLayout的使用（简单使用和高级使用）

最新推荐文章于 2024-06-04 22:20:44 发布

原创最新推荐文章于 2024-06-04 22:20:44 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

android 专栏收录该内容

134 篇文章

订阅专栏

本文介绍了一个使用Android TabLayout组件结合ViewPager实现自定义Tab标签的示例，展示了如何通过编程方式设置Tab的内容和样式。

使用很简单，我就直接贴类了
NewsFragment

package com.example.acer.test_18_04_02;


import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by acer on 2018/4/3.
 */

public class NewsFragment extends Fragment {
    @RequiresApi(api = Build.VERSION_CODES.M)
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        String title= getArguments().getString("title");
        TextView tv=new TextView(getContext());
        tv.setBackgroundColor(Color.argb((int)(Math.random()*255),(int)(Math.random()*255),(int)(Math.random()*255),(int)(Math.random()*255)));
        tv.setText(title);
        return  tv;
    }
}

activity_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="com.example.acer.test_18_04_02.MainActivity">
<!-- tabIndicatorColor选中的指示器的颜色-->
    <!--tabSelectedTextColor文本颜色-->
    <!--tabMode是否可以滑动-->
<android.support.design.widget.TabLayout
    android:id="@+id/tl_tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="@color/colorAccent"
    app:tabSelectedTextColor="@color/colorPrimary"
    app:tabBackground="@color/colorPrimaryDark"
    app:tabGravity="center"
    app:tabMode="scrollable"
    />
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
/>

</LinearLayout>

MainActivity

package com.example.acer.test_18_04_02;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {


    private ViewPager viewPager;
    private TabLayout tabLayout;
    private String[] titles = new String[]{"新闻", "头条", "音乐", "热点", "娱乐", "科技", "军事", "财经", "文学"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.vp);
        tabLayout = (TabLayout) findViewById(R.id.tl_tabLayout);
        //设置tabLayot的选项卡切换的监听，点击的是哪一个；同时切换ViewPager;
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            //被选中
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //true表示有动画
                viewPager.setCurrentItem(tab.getPosition(), true);
            }

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

            }

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

            }
        });
        MyPageAdapter myPageAdapter = new MyPageAdapter(getSupportFragmentManager());
        //设置tabLayout的标签的文本，从Adapter里设置
        tabLayout.setTabsFromPagerAdapter(myPageAdapter);
        //设置ViewPager的滑动监听来改变TabLayout的选项卡的切换
        viewPager.setOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        //设置适配器
        viewPager.setAdapter(myPageAdapter);
    }

    class MyPageAdapter extends FragmentPagerAdapter {

        public MyPageAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }

        @Override
        public Fragment getItem(int position) {
            NewsFragment fragment = new NewsFragment();
            Bundle bundle = new Bundle();
            bundle.putString("title", titles[position]);
            fragment.setArguments(bundle);
            return fragment;
        }

        @Override
        public int getCount() {
            return titles.length;
        }
    }
}

看下运行效果
这里写图片描述

下面我们看下我们的高级使用，自定义Tab，这是layout布局

<?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="match_parent"
              android:orientation="vertical">

    <TextView
        android:id="@+id/tv_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="临时"/>

    <ImageView
        android:id="@+id/iv_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>

</LinearLayout>

package com.example.acer.test_18_04_02;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {


    private ViewPager viewPager;
    private TabLayout tabLayout;
    private String[] titles = new String[]{"新闻", "头条", "音乐", "热点", "娱乐", "科技", "军事", "财经", "文学"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.vp);
        tabLayout = (TabLayout) findViewById(R.id.tl_tabLayout);
        //设置tabLayot的选项卡切换的监听，点击的是哪一个；同时切换ViewPager;
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            //被选中
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //true表示有动画
                viewPager.setCurrentItem(tab.getPosition(), true);
            }

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

            }

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

            }
        });
        MyPageAdapter myPageAdapter = new MyPageAdapter(getSupportFragmentManager());
        //设置tabLayout的标签的文本，从Adapter里设置
        tabLayout.setupWithViewPager(viewPager);
        //设置ViewPager的滑动监听来改变TabLayout的选项卡的切换
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        //设置适配器
        viewPager.setAdapter(myPageAdapter);
        /**
         * 拿到tabview中的tab对象调用set
         */
        for(int i=0;i<titles.length;i++){
          View view=  View.inflate(this,R.layout.layout,null);
            TextView tv_show=(TextView)view.findViewById(R.id.tv_show);
            ImageView iv_show=(ImageView)view.findViewById(R.id.iv_show);
            tv_show.setText(titles[i]);
          tabLayout.getTabAt(i).setCustomView(view);
        }
    }

    class MyPageAdapter extends FragmentPagerAdapter {

        public MyPageAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }

        @Override
        public Fragment getItem(int position) {
            NewsFragment fragment = new NewsFragment();
            Bundle bundle = new Bundle();
            bundle.putString("title", titles[position]);
            fragment.setArguments(bundle);
            return fragment;
        }

        @Override
        public int getCount() {
            return titles.length;
        }
    }
}

看下效果
这里写图片描述