目前項目中用到Tablayout和ViewPager的結合使用，本來這個很簡單可以實現，但是項目要求Tablayout標題右上角加數字標記。這就不好弄了，怎么辦呢，只能給標題重新設置布局，下面就講講給Tablayout標題重設布局的過程。
之前結合RecyclerView的使用http://blog.csdn.net/pengyu1801/article/details/51172254
核心實現
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.View;import android.view.ViewGroup;import android.view.ViewParent;import java.util.ArrayList;import java.util.List;/** * 類名： * 類描述：實現TabLayout + viewpager + fragment 并TabLayout標題右上角有數字標記 * 創建人：fly * 創建日期： 2017/2/2. * 版本：V1.0 */public class MainActivity extends AppCompatActivity implements View.OnClickListener { PRivate List<String> mPageTitleList = new ArrayList<String>(); private List<Fragment> mFragmentList = new ArrayList<Fragment>(); private List<Integer> mBadgeCountList = new ArrayList<Integer>(); private List<BadgeView> mBadgeViews; private SimpleFragmentPagerAdapter mPagerAdapter; private TabLayout mTabLayout; private ViewPager mViewPager; private int count = 0; @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(count++); mBadgeCountList.add(166); // 初始化對應的fragment for (int i = 0; i < mPageTitleList.size(); i++) { mFragmentList.add(PageFragment.getInstance(mPageTitleList.get(i))); } } private void initView() { findViewById(R.id.btn_add_badge).setOnClickListener(this); mTabLayout = (TabLayout) findViewById(R.id.tab_layout); mViewPager = (ViewPager) findViewById(R.id.view_pager); mPagerAdapter = new SimpleFragmentPagerAdapter(this, getSupportFragmentManager(), mFragmentList, mPageTitleList, mBadgeCountList); mViewPager.setAdapter(mPagerAdapter); mTabLayout.setupWithViewPager(mViewPager);// initBadgeViews(); setUpTabBadge(); } /**初始化標題右上角標記*/// private void initBadgeViews() {// if (mBadgeViews == null) {// mBadgeViews = new ArrayList<>();// for (int i = 0; i < mFragmentList.size(); i++) {// BadgeView tmp = new BadgeView(this);// tmp.setBadgeMargin(0, 6, 10, 0);// tmp.setTextSize(10);// mBadgeViews.add(tmp);// }// }// } /** * 設置Tablayout上的標題的角標 */ private void setUpTabBadge() { // 1. 最簡單// 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. 最實用 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)); } // 需加上以下代碼,不然會出現更新Tab角標后,選中的Tab字體顏色不是選中狀態的顏色 mTabLayout.getTabAt(mTabLayout.getSelectedTabPosition()).getCustomView().setSelected(true); } @Override public void onClick(View v) { mBadgeCountList.set(1, count++); setUpTabBadge(); }}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.View;import android.view.ViewGroup;import android.view.ViewParent;import java.util.ArrayList;import java.util.List;/** * 類名： * 類描述：實現TabLayout + viewpager + fragment 并TabLayout標題右上角有數字標記 * 創建人：fly * 創建日期： 2017/2/2. * 版本：V1.0 */public class MainActivity extends AppCompatActivity implements View.OnClickListener { private List<String> mPageTitleList = new ArrayList<String>(); private List<Fragment> mFragmentList = new ArrayList<Fragment>(); private List<Integer> mBadgeCountList = new ArrayList<Integer>(); private List<BadgeView> mBadgeViews; private SimpleFragmentPagerAdapter mPagerAdapter; private TabLayout mTabLayout; private ViewPager mViewPager; private int count = 0; @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(count++); mBadgeCountList.add(166); // 初始化對應的fragment for (int i = 0; i < mPageTitleList.size(); i++) { mFragmentList.add(PageFragment.getInstance(mPageTitleList.get(i))); } } private void initView() { findViewById(R.id.btn_add_badge).setOnClickListener(this); mTabLayout = (TabLayout) findViewById(R.id.tab_layout); mViewPager = (ViewPager) findViewById(R.id.view_pager); mPagerAdapter = new SimpleFragmentPagerAdapter(this, getSupportFragmentManager(), mFragmentList, mPageTitleList, mBadgeCountList); mViewPager.setAdapter(mPagerAdapter); mTabLayout.setupWithViewPager(mViewPager);// initBadgeViews(); setUpTabBadge(); } /**初始化標題右上角標記*/// private void initBadgeViews() {// if (mBadgeViews == null) {// mBadgeViews = new ArrayList<>();// for (int i = 0; i < mFragmentList.size(); i++) {// BadgeView tmp = new BadgeView(this);// tmp.setBadgeMargin(0, 6, 10, 0);// tmp.setTextSize(10);// mBadgeViews.add(tmp);// }// }// } /** * 設置Tablayout上的標題的角標 */ private void setUpTabBadge() { // 1. 最簡單// 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. 最實用 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)); } // 需加上以下代碼,不然會出現更新Tab角標后,選中的Tab字體顏色不是選中狀態的顏色 mTabLayout.getTabAt(mTabLayout.getSelectedTabPosition()).getCustomView().setSelected(true); } @Override public void onClick(View v) { mBadgeCountList.set(1, count++); setUpTabBadge(); }}源碼下載
新聞熱點
疑難解答
