android Learning - Tab Tab Tab Tab Tab with TabLayout and some problems encountered (1)

Keywords: Android Google xml ButterKnife


Use of TabLayout


Foreword: Better to use, more convenient and more concise

link:https://developer.android.google.cn/reference/android/support/design/widget/TabLayout.html

1. start

1.1 Add a reference to TabLayout

compile 'com.android.support:design:25.1.0'

1.2 Adding TabLayout layout to xml

 <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabBackground="@android:color/white"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabIndicatorHeight="1dp"
        app:tabSelectedTextColor="@color/colorPrimaryDark"
        app:tabTextColor="@android:color/black"
        >

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="tab1"
            />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="tab2"
            />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="tab3"
            />

    </android.support.design.widget.TabLayout>


The above TabLayout is used directly with TabItem. Let's see the effect first.



You can see that it is easy to switch the top Tab tab, the selected color and the default color, the bottom horizontal marking, etc. Now let's look at some attributes.

The background color of the app:tabBackground//tab option
App: tabIndicator Color // Underline color
App: tabIndicator Height // Underline Height
App: tabSelected TextColor // Text color when selected
app:tabTextColor // Text color by default

  App: tabMode


But sometimes we need to add TabItem dynamically, so we have to take our time.

The code is as follows

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

        mTabLayout.addTab(mTabLayout.newTab().setText("tab01"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab02"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab03"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab04"));


        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) { //Click the first tab option to call back
                Toast.makeText(MainActivity.this, tab.getText(), Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {  //Last tab callback
                Log.i("MainActivity", "onTabUnselected: " + tab.getText());
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) { // Click on the same tab's callback again
                Log.i("MainActivity", "onTabReselected: " + tab.getText());

            }
        });
    }

You can see here that we have added several item s by code and click events when clicking tab. We can do some indescribable things by clicking tab. Picture is the best explanation.


As you can see in the figure above, clicking the tab option once calls back two different methods. You can do some shy things in it.


Let's finish here, step by step.


The next article will talk about the combined use of tabLayout+Viewpager+Fragment, as well as some of the problems encountered.




Posted by qt4u on Mon, 25 Mar 2019 00:21:27 -0700