TabLayout基本使用
前言
Tablayout繼承自HorizontalScrollView，可以用作頂部標簽效果、底部導航欄效果。一般多與ViewPager一起使用。
想直接了解如何實現短下滑效果的請看：TabLayout的高級用法
首先上幾個效果圖。
圖：
使用方法
下面我們來看如何使用，
第一步，先在gradle引入支持包
implementation 'com.android.support:design:26.0.0'
第二步，在布局文件中添加布局
<android.support.design.widget.TabLayout android:id="@+id/tab_normal" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorHeight="2dp" app:tabMode="fixed" app:tabIndicatorColor="#0a0" app:tabTextColor="#bbb" app:tabSelectedTextColor="#0a0" />
屬性解釋：
tabIndicatorHeight：這里是設置標簽橫線的高度，如果不需要橫線，可以設置為0dp
tabIndicatorColor：是用來設置標簽被選中時，顯示的顏色的。
tabTextColor：標簽顯示的默認顏色
tabSelectedTextColor：標簽被選中的時候的顏色
tabMode：這個屬性有兩個取值，一個是fixed，不管tab標簽字多字少，平分當前tablayout寬度的空間大小。一般最多折兩行，還顯示不開的部分，用省略號代替。
另一個是scrollable，從左到右依次顯示標簽，顯示不開的，可以滾動顯示
圖
上代碼
java代碼：
import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.support.design.widget.TabLayout; import java.util.ArrayList; import java.util.List; import butterknife.BindView; import butterknife.ButterKnife; public class MainActivity extends AppCompatActivity { @BindView(R.id.tab_normal) TabLayout tabNormal; @BindView(R.id.tab_icon) TabLayout tabIcon; @BindView(R.id.tab_more) TabLayout tabMore; @BindView(R.id.tab_customer) TabLayout tabCustomer; @BindView(R.id.vp_all) ViewPager vpAll; List<PageFragment> fgList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this);//此處是用的是butterKnife框架，等同于findviewbyid獲取各個控件。 initViewPager(); initTabNormal(); } /** * 初始化ViewPager，方便后期與tabLayout關聯 */ private void initViewPager() { fgList = new ArrayList<>(); for (int i = 0; i < 4; i++) { fgList.add(PageFragment.newInstance("我是標題"+i,"我是內容欄目"+i)); } vpAll.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(), fgList) ); } /** * 初始化頂部標簽 */ private void initTabNormal() { tabNormal.setupWithViewPager(vpAll); } /** * ViewPager的適配器。 */ class ViewPagerAdapter extends FragmentPagerAdapter{ List<PageFragment> fragmentList; public ViewPagerAdapter(FragmentManager fm, List<PageFragment> fragmentList) { super(fm); this.fragmentList=fragmentList; } @Override public Fragment getItem(int position) { return fragmentList.get(position); } @Override public int getCount() { return fragmentList.size(); } @Override public CharSequence getPageTitle(int position) { return fragmentList.get(position).getTitle(); } } }
fragment代碼，fragment的布局文件，就一個ID為tv_content的textview，此處就不在貼代碼了。
import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import butterknife.BindView; import butterknife.ButterKnife; import butterknife.Unbinder; public class PageFragment extends Fragment { String title, content; @BindView(R.id.tv_content) TextView tvContent; Unbinder unbinder; public PageFragment() { } public static PageFragment newInstance(String title, String content) { PageFragment fragment = new PageFragment(); fragment.title = title; fragment.content = content; return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_page, container, false); unbinder = ButterKnife.bind(this, view); tvContent.setText(content); return view; } public String getTitle() { return title; } @Override public void onDestroyView() { super.onDestroyView(); unbinder.unbind(); } }
通過tabLayout方法的setupWithViewPager()方法綁定ViewPager控件的。tab標簽獲取顯示文字，是通過FragmentPagerAdapter的getPageTitle（）方法。所以需要對FragmentPagerAdapter的getPageTitle方法進行重寫。
然而，原生控件有很多的呆笨性。比如很多的UI和場景需求都是要求文字下面的短線是一個小于文字的固定值。再比如我們說的作為底部導航欄，如果直接設置tab的icon,會出現icon變形等問題。
所以我這里給一個終極的解決辦法。tab想做成什么樣子，就做成什么樣子。完全自定義。
傳送門：TabLayout的高級用法，自定義TabLayout
