天天看点

第三方TabLayout的静态动态使用 和Viewpage一起使用

TabLayout有静态动态两种实现方法 并实现多个标题或控件实现滑动

废话不多说

直接上代码

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="a16.erin.tablayout_demo.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/mytag_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabSelectedTextColor="#f00"
        //如果要实现有多个条目标题实现边距滑出来的效果一定要加这个属性 否则实现不了
        app:tabMode="scrollable"
        >
        //静态注册直接在布局文件里添加标题TabItem 动态注册在代码里实现
        <!--<android.support.design.widget.TabItem-->
            <!--android:id="@+id/item1"-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="wrap_content"-->
            <!--android:text="taba"-->
            <!--/>-->
        <!--<android.support.design.widget.TabItem-->
            <!--android:id="@+id/item2"-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="wrap_content"-->
            <!--android:text="tabb"-->
            <!--/>-->
        <!--<android.support.design.widget.TabItem-->
            <!--android:id="@+id/item3"-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="wrap_content"-->
            <!--android:text="tabc"-->
            <!--/>-->

    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/mypager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/mytag_layout"
        />
</RelativeLayout>
           

具体代码如下:

private TabLayout tabLayout;
    private ViewPager pager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout=(TabLayout)findViewById(R.id.mytag_layout);
        pager=(ViewPager)findViewById(R.id.mypager);
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        pager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return new Fragment1();
            }

            @Override
            public int getCount() {
               // tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
               // app:tabMode="scrollable"当条目太多时需要横向滑动,添加此方法;
                return ;
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return "tab"+(position+);
            }
        });
        //动态添加tab按钮  ;;;;还可以布局文件里面添加tabitem;
//        tabLayout.addTab( tabLayout.newTab().setText("tab1"));
//        tabLayout.addTab( tabLayout.newTab().setText("tab2"));
//        tabLayout.addTab( tabLayout.newTab().setText("tab3"));
//        tabLayout.addTab( tabLayout.newTab().setText("tab4"));
        //关联viewpager与tablayout
        tabLayout.setupWithViewPager(pager);
        for(int i=;i<;i++){
            TabLayout.Tab tabitem=tabLayout.getTabAt(i);
            //给单个的tab按钮添加自定义布局;
            tabitem.setCustomView(R.layout.item);
        }
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //获取当前点击位置;
              int index=  tab.getPosition();
                //获取对应点击tab的布局view;
                View view=tab.getCustomView();
                ImageView img=(ImageView)view.findViewById(R.id.myimg);

            }

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

            }

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

            }
        });
    }
}