Android开发：顶部&底部Tab导航栏实现（TabLayout+ViewPager+Fragment）

最新推荐文章于 2024-07-26 21:24:56 发布

ts_learner

最新推荐文章于 2024-07-26 21:24:56 发布

阅读量2.6k

点赞数

分类专栏： anroid 文章标签： TabLayout ViewPager Fragment

本文链接：https://blog.csdn.net/TS_learner/article/details/71104511

版权

anroid 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

添加依赖包：

compile ‘com.android.support:design:22.2.0‘

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="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
   >

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
    android:background="#ffff00"
    app:tabIndicatorColor="#66ff33"
    app:tabIndicatorHeight="5dp"
    app:tabTextColor="@color/colorPrimary"
    app:tabSelectedTextColor="#CC33FF"
    app:tabBackground="@drawable/tab_selected"
    app:tabTextAppearance="@style/MyTabLayoutTextAppearance"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

   //导航栏背景颜色
        android:background="#ffff00"
        //指示器颜色
        app:tabIndicatorColor="#66ff33"
        //指示器高度
        app:tabIndicatorHeight="20p"
        //普通状态下文字的颜色
        app:tabTextColor="@color/colorPrimary"
        //选中时文字的颜色
        app:tabSelectedTextColor="#CC33FF"
        //是否可滑动：fixed：固定；scrollable：可滑动，tab少用fixed，多用scrollable
        app:tabMode="fixed"
        //设置选项卡的背景：此处要写一个selector）
        app:tabBackground="@drawable/selected"
             //设置字体大小：此处要写一个style） app:tabTextAppearance="@style/MyTabLayoutTextAppearance"/>

selected.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_selected="true" android:drawable="@color/colorPrimary"/>    <item android:drawable="@color/c1olorAccent"/></selector>



style.xml

<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">    <item name="android:textSize">5sp</item>    <item name="android:textColor">@color/c1olorAAA</item></style>

MainFragment

public class MainFragment extends Fragment {
    private String context;
    private TextView mTextView;
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private MyPagerAdapter myPagerAdapter;
    View view;

    public  MainFragment(){
        super();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         view = inflater.inflate(R.layout.fragment_main,container,false);
        initViews();

        return view;
    }

    public void initViews(){
        //使用适配器将ViewPager与Fragment绑定在一起
        mViewPager= (ViewPager) view.findViewById(R.id.viewPager);
        MyPagerAdapter adapter = new MyPagerAdapter(getChildFragmentManager());
        adapter.addFragment(new Fragment_aa(), "AAAAAA");
        adapter.addFragment(new FragmentB(), "BB");
        mViewPager.setAdapter(adapter);

        //将TabLayout与ViewPager绑定在一起
        mTabLayout = (TabLayout) view.findViewById(R.id.tabLayout);
        mTabLayout.setupWithViewPager(mViewPager);

        //设置Tab的图标，假如不需要则把下面的代码删去
        mTabLayout.getTabAt(0).setIcon(R.mipmap.ic_launcher);
        mTabLayout.getTabAt(1).setIcon(R.mipmap.ic_launcher);



    }

    public static class MyPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragments = new ArrayList<>();
        private final List<String> mFragmentTitles = new ArrayList<>();

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

        public void addFragment(Fragment fragment, String title) {
            mFragments.add(fragment);
            mFragmentTitles.add(title);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }

        @Override
        public int getCount() {
            return mFragments.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitles.get(position);
        }
    }
}