Tablayout和ViewPager的结合使用Tablayout标题右上角加标记

2019-11-09 15:00:27

字体：大中小

来源：转载

供稿：网友

目前项目中用到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(); }}

源码下载

上一篇：MSM8937系统启动流程

下一篇：ImagePicker