一、前言

在開發(fā)中，我們常常需要ViewPager結合Fragment一起使用，來實現(xiàn)多頁簽的切換效果。在以前，我們有以下一系列第三方庫來幫我們實現(xiàn):

而現(xiàn)在，我們可以使用Design support library庫的TabLayout來實現(xiàn)了。

二、最終效果圖

三、TabLayout的使用

1. 添加依賴

由于TabLayout在design包內，所以首先需要在app目錄下的build.gradle中添加以下依賴：

dependencies {

...

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

}

2. 創(chuàng)建布局

布局相當簡單，只要添加TabLayout和ViewPager的布局即可：

layout/activity_main.xml

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/tab_layout"

style="@style/TabLayoutStyle"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

android:id="@+id/view_pager"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

android:background="@android:color/white"/>

還有其他的屬性我習慣在style文件中設置：

values/styles.xml

@color/colorPrimary

@color/colorPrimary

@style/TabTextAppearence

0dp

16sp

false

3. 創(chuàng)建Fragment

package com.sherlockshi.badgedtablayoutpractise;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

/**

* Author: SherlockShi

* Date: 2016-11-01 16:31

* Description:

*/

public class PageFragment extends Fragment {

private static final String PAGE_NAME_KEY = "PAGE_NAME_KEY";

public static PageFragment getInstance(String pageName) {

Bundle args = new Bundle();

args.putString(PAGE_NAME_KEY, pageName);

PageFragment pageFragment = new PageFragment();

pageFragment.setArguments(args);

return pageFragment;

}

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_page, container, false);

TextView textView = (TextView) view.findViewById(R.id.tv_page_name);

textView.setText(getArguments().getString(PAGE_NAME_KEY));

return view;

}

}

其中Fragment的布局layout/fragment_page.xml:

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/tv_page_name"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"/>

4. ViewPager的適配器

package com.sherlockshi.badgedtablayoutpractise;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**

* Author: SherlockShi

* Date: 2016-11-01 17:38

* Description:

*/

public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {

private Context mContext;

private List mFragmentList;

private List mPageTitleList;

private List mBadgeCountList;

public SimpleFragmentPagerAdapter(Context context,

FragmentManager fm,

List fragmentList,

List pageTitleList,

List badgeCountList) {

super(fm);

this.mContext = context;

this.mFragmentList = fragmentList;

this.mPageTitleList = pageTitleList;

this.mBadgeCountList = badgeCountList;

}

@Override

public Fragment getItem(int position) {

return mFragmentList.get(position);

}

@Override

public int getCount() {

return mFragmentList.size();

}

@Override

public CharSequence getPageTitle(int position) {

return mPageTitleList.get(position);

}

}

5. 設置TabLayout

package com.sherlockshi.badgedtablayoutpractise;

import android.os.Bundle;

import android.support.design.widget.TabLayout;

import android.support.v4.app.Fragment;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.view.ViewGroup;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity {

private List mPageTitleList = new ArrayList();

private List mFragmentList = new ArrayList();

private List mBadgeCountList = new ArrayList();

private SimpleFragmentPagerAdapter mPagerAdapter;

private TabLayout mTabLayout;

private ViewPager mViewPager;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initFragments();

initView();

}

private void initFragments() {

mPageTitleList.add("Tab1");

mPageTitleList.add("Tab2");

mPageTitleList.add("Tab3");

mBadgeCountList.add(6);

mBadgeCountList.add(16);

mBadgeCountList.add(166);

for (int i = 0; i < mPageTitleList.size(); i++) {

mFragmentList.add(PageFragment.getInstance(mPageTitleList.get(i)));

}

}

private void initView() {

mTabLayout = (TabLayout) findViewById(R.id.tab_layout);

mViewPager = (ViewPager) findViewById(R.id.view_pager);

mPagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), mFragmentList, mPageTitleList);

mViewPager.setAdapter(mPagerAdapter);

mTabLayout.setupWithViewPager(mViewPager);

initBadgeViews();

setUpTabBadge();

}

}

四、設置角標

1. 添加角標Badge

添加角標的關鍵代碼只需要一行：

mBadgeViews.get(i).setTargetView(((ViewGroup) mTabLayout.getChildAt(0)).getChildAt(i));

完整代碼只需要在設置完TabLayout和ViewPager后，遍歷每一個Tab，為Tab添加角標：

private void setUpTabBadge() {

for (int i = 0; i < mFragmentList.size(); i++) {

mBadgeViews.get(i).setTargetView(((ViewGroup) mTabLayout.getChildAt(0)).getChildAt(i));

mBadgeViews.get(i).setText(formatBadgeNumber(mBadgeCountList.get(i)));

}

}

2. 更新角標

在需要更新角標的地方，只要調用以下方法就可實現(xiàn)：

mBadgeCountList.set(1, count++);

setUpTabBadge();

以上，就可以輕松地為TabLayout添加角標，并處理角標的更新了。

五、問題

1. 重復選中的狀態(tài)

但是如果需要更新角標，那么在更新角標后，再點擊另一個Tab，會出現(xiàn)上一個Tab和當前Tab都是選中狀態(tài)(如下圖的Tab1和Tab2)：

2. 角標位置不可控

而且如上圖所示，角標的位置不好控制，有的離文字很近，有的離得很遠，無法精確控制。

六、最實用的TabLayout加角標方法

1. 添加getTabItemView()方法

在重寫的FragmentPagerAdapter中添加自定義Tab布局方法：

public View getTabItemView(int position) {

View view = LayoutInflater.from(mContext).inflate(R.layout.tab_layout_item, null);

TextView textView = (TextView) view.findViewById(R.id.textview);

textView.setText(mPageTitleList.get(position));

View target = view.findViewById(R.id.badgeview_target);

BadgeView badgeView = new BadgeView(mContext);

badgeView.setTargetView(target);

badgeView.setBadgeMargin(0, 6, 10, 0);

badgeView.setTextSize(10);

badgeView.setText(formatBadgeNumber(mBadgeCountList.get(position)));

return view;

}

對應的自定義布局為：

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content"/>

android:id="@+id/textview"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginLeft="-30dp"

android:textColor="@color/tab_text_color_selector"/>

android:id="@+id/badgeview_target"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="40dp"

android:layout_marginLeft="4dp"

android:layout_gravity="center"/>

2. 設置自定義布局

private void setUpTabBadge() {

for (int i = 0; i < mFragmentList.size(); i++) {

TabLayout.Tab tab = mTabLayout.getTabAt(i);

// 更新Badge前,先remove原來的customView,否則Badge無法更新

View customView = tab.getCustomView();

if (customView != null) {

ViewParent parent = customView.getParent();

if (parent != null) {

((ViewGroup) parent).removeView(customView);

}

}

// 更新CustomView

tab.setCustomView(mPagerAdapter.getTabItemView(i));

}

// 需加上以下代碼,不然會出現(xiàn)更新Tab角標后,選中的Tab字體顏色不是選中狀態(tài)的顏色

mTabLayout.getTabAt(mTabLayout.getSelectedTabPosition()).getCustomView().setSelected(true);

}

上面的示例會有兩個坑：

一個坑是每次為TabLayout添加Badge后，會出現(xiàn)Tab的字體顏色不是選中狀態(tài)的顏色，需要手動設置Tab為選中狀態(tài)，可以參考上面的第19行代碼解決，這應該是TabLayout的一個Bug；

另一個坑是如果每次更新Badge的時候，直接重新tab.setCustomView的話，會出現(xiàn)Badge不更新，解決辦法是先移除之前的自定義布局，然后再重新設置布局，具體可參考第6-12行代碼解決。

七、總結

以上是自己在使用TabLayout的過程中發(fā)現(xiàn)的一些問題及解決辦法，如果大家有更好的解決方法，或者還有別的坑，歡迎留言。

當然，大家也可以直接使用第三方控件來實現(xiàn)以上功能，現(xiàn)在主流的幾個控件也都做得很好，也很省心。

八、參考資料

總結

以上是生活随笔為你收集整理的tablayout 增加数字小标_为TabLayout添加角标的最简单方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。