Android Material Design control learning (1) - the usage of TabLayout

https://developer.android.com/reference/android/support/design/widget/TabLayout.html

foreword

Google officially launched a new design language - Material Design at Google I/O in 2014. At the same time, a series of control libraries for realizing Material Design effects - Android Design Support Library were launched. Among them, there are TabLayout, NavigationView, Floating labels for editing text, Floating Action Button, Snackbar, CoordinatorLayout, CollapsingToolbarLayout and other controls. In the future study, I will introduce their characteristics and usage one by one.

Switching between different scenes/functions in mobile applications is realized with three buttons and four buttons at the bottom in iOS, while in Android, it is a drawer menu or a left and right sliding design. How to achieve left and right sliding similar to the Google Play app store, this has to be achieved by TabLayout.

text

1. Get the Android Design Support Library:

Add 'compile 'com.android.support:design:22.2.1' dependency in dependency in Gradle file.

2. Define the layout file:
Through use, the above labels are realized by TabLayout, and the changes of the following content are realized by ViewPager+Fragment.
So in MainActivity:

<?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="wrap_content"
        app:tabMode="scrollable"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ffffff"
        />
</LinearLayout>

Fragment:
Switch ViewPager to display different Fragments, here is an example of Fragment with the same 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/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        />
</LinearLayout>

3. Specific implementation code:
1) Create Fragment

public class PageFragment extends Fragment {
    public static final String ARGS_PAGE = "args_page";
    private int mPage;

    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();

        args.putInt(ARGS_PAGE, page);
        PageFragment fragment = new PageFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARGS_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page,container,false);
        TextView textView = (TextView) view.findViewById(R.id.textView);
        textView.setText("第"+mPage+"页");
        return view;
    }
}

2) Adapter class

class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    public final int COUNT = 5;
    private String[] titles = new String[]{"Tab1", "Tab2", "Tab3", "Tab4", "Tab5"};
    private Context context;

    public MyFragmentPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }

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

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

I believe that the combination of Fragment+ViewPager+FragmentPagerAdapter is familiar to everyone, so I won't introduce it here.

3) Use of TabLayout:
According to the official documentation, there are two ways to use TabLayout:

Add the newly constructed Tab instance to the TabLayout through the addTab() method of the TabLayout:

    TabLayout tabLayout = ...;
    tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

2. The second is to use ViewPager and TabLayout to manage Tabs in one stop, which means that there is no need to manually add Tabs like the first method:

    ViewPager viewPager = ...;
    TabLayout tabLayout = ...;
    viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(tabLayout));

And our TabLayout Demo uses the second way:

        //Fragment+ViewPager+FragmentViewPager组合的使用
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),
                this);
        viewPager.setAdapter(adapter);

        //TabLayout
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.setupWithViewPager(viewPager);

运行效果：
<iframe id="iframe_0.8847997219079342" style="box-sizing: border-box; border-width: initial; border-style: none; width: 432px; height: 670px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://ww2.sinaimg.cn/mw690/8942f980gw1euwrdarumug20c00im757.gif?_=0.08810342842274577%22%20style=%22border:none;max-width:960px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.8847997219079342',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

效果不错，但是TabLayout中的Tab似乎没有占满屏幕的宽度。如何解决呢？
有代码和XML两种方式：
1).代码

    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    tabLayout.setTabMode(TabLayout.MODE_FIXED);

2).XML布局文件

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        app:tabGravity="fill"
        app:tabMode="fixed"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

下面就来解释一下TabGravity和TabMode，

TabGravity:放置Tab的Gravity,有GRAVITY_CENTER 和 GRAVITY_FILL两种效果。顾名思义，一个是居中，另一个是尽可能的填充（注意，GRAVITY_FILL需要和MODE_FIXED一起使用才有效果）

TabMode:布局中Tab的行为模式（behavior mode），有两种值：MODE_FIXED 和 MODE_SCROLLABLE。

MODE_FIXED:固定tabs，并同时显示所有的tabs。

MODE_SCROLLABLE：可滚动tabs，显示一部分tabs，在这个模式下能包含长标签和大量的tabs，最好用于用户不需要直接比较tabs。

下面用代码来比较这两种模式的不同：

class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    //tabs的数据集
    public final int COUNT = 10;
    private String[] titles = new String[]{"Tab2221", "T2", "Tb3", "Tab4", "Tab5555555555","Tab2221", "T2", "Tb3", "Tab4", "Tab5555555555"};
...
}


        //1.MODE_SCROLLABLE模式
       tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

        //2.MODE_FIXED模式
        tabLayout.setTabMode(TabLayout.MODE_FIXED);

1.MODE_SCROLLABLE模式
<iframe id="iframe_0.2427922176416426" style="box-sizing: border-box; border-width: initial; border-style: none; width: 389px; height: 667px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://ww1.sinaimg.cn/mw690/8942f980gw1ev31p5sbqug20at0ijq58.gif?_=0.9811948542759306%22%20style=%22border:none;max-width:960px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.2427922176416426',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

2.MODE_FIXED模式
<iframe id="iframe_0.5291927256411821" style="box-sizing: border-box; border-width: initial; border-style: none; width: 389px; height: 667px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://ww1.sinaimg.cn/mw690/8942f980gw1ev31kfstd6g20at0ijaay.gif?_=0.6934128892093718%22%20style=%22border:none;max-width:960px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.5291927256411821',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

本文为作者原创，转载请注明出处：http://www.cnblogs.com/JohnTsai/p/4715454.html