1. 程式人生 > >橫向滑動選單TabLayout

橫向滑動選單TabLayout

簡介:

橫向滑動選單是當今主流App中很常見的一種自定義控制元件。
主要用於適配多個分類而出現的,一般常見於分類很多的時候,一屏控制元件無法容納全部分類,這樣我們需要讓使用者去手動滑動,以便檢視螢幕以外的分類資訊。
如果點選不同分類,正在點選的選單會自動居中顯示,點選後可顯示不同分類的ui介面。
如:今日頭條的頂部導航欄就是一個自定義橫向滑動選單,

作用:

由於手機螢幕寬度有限,所以我們因為了橫向滑動選單的概念。
主要作用:
1.一定程度上克服手機螢幕大小限制。
2.智慧手機離不開手勢操作,符合使用者習慣,使用者只需要手動左滑,就能輕鬆找到其他分類。
3.點選分類或滑動頁面都能輕鬆切換頁面,使用者使用起來非常方便。
4.優化使用者體驗,一定程度上優化軟體效能。

//新增依賴
compile 'com.android.support:design:26+'

引用一個佈局實現滑動效果



//讓TabLayout和Viewpager關聯;
<?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"
> //橫向滑動選單 <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content"></android.support.design.widget.TabLayout> //ViewPager佈局 <android.support.v4.view.ViewPager android:id="@+id/viewpager2"
android:layout_width="match_parent" android:layout_height="wrap_content"></android.support.v4.view.ViewPager> </LinearLayout>

邏輯程式碼

private TabLayout tabLayout;
private ViewPager viewPager;
ArrayList<Fragment> fragmentList = new ArrayList<Fragment>();
ArrayList<String> titleList = new ArrayList<String>();

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        initData();//新增資料
        //fragment管理器
        MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager());
        viewPager.setAdapter(myAdapter);
        //設定TabLayout的模式
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        //讓tablayout和Viewpager關聯;
        tabLayout.setupWithViewPager(viewPager);
    }
    private void initData() {
        for (int i = 0; i <4 ; i++) {
            fragmentList.add(new TabFragment1());//對應的佈局
            fragmentList.add(new TabFragment2());
            titleList.add("Item" +i);//標題
        }
    }
    private class MyAdapter extends FragmentPagerAdapter {
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            //返回對應佈局
            return fragmentList.get(position);
        }

        @Override
        public int getCount() {
            return titleList.size();//選單數量
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return titleList.get(position);//返回對應選單標題
        }
    }