打造自己的 PagerSlidingTabStrip 之一 (给 Tab 添加红点)

前言

PagerSlidingTabStrip 是一个开源的 ViewPager 指示器项目,在项目中可能有给 ViewPager 的某个 Tab 添加红点的需求,所以通过修改 PagerSlidingTabStrip 的代码,对 PagerSlidingTabStrip 实现了扩展。

效果图

添加红点后的效果

效果图

效果图

代码及解析

通过对 PagerSlidingTabStrip 的源码阅读发现, PagerSlidingTabStrip 是通过给 LinearLayout 插入 TextView 或者 ImageButton 来作为顶部的 Tab, 要获取到某个 Tab,只需要获取到他们的父视图的LinearLayout,通过 LinearLayout 的 getChildAt(position) 的方法,获取到要添加红点的 Tab

private void addTab(final int position, View tab) {
   tab.setFocusable(true);
   tab.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
         pager.setCurrentItem(position);
      }
   });

   tab.setPadding(tabPadding, 0, tabPadding, 0);
   //通过给 TabsContainer(实际上是 LinearLayout)添加 View 实现
   tabsContainer.addView(tab, position, shouldExpand ? expandedTabLayoutParams : defaultTabLayoutParams);
 }

 //给 PagerSlidingTabStrip 添加 getTabsContainer() 方法,暴露出 Tab 的父视图 LinearLayout
 public LinearLayout getTabsContainer() {
         return tabsContainer;
  }

在代码中,通过刚刚添加的 getTabsContainer() 方法,可以获取到 Tab 的父视图 LinearLayout,通过 LinearLayout 的 getChildAt(position) 方法可以获取到需要添加红点的 Tab,最后通过 android-viewbadger 给获取到的指定 Tab 添加红点

View targetView = tabs.getTabsContainer().getChildAt(2);
BadgeView badge = new BadgeView(this, targetView);
badge.setWidth(dp2px(getApplicationContext(), 8));
badge.setHeight(dp2px(getApplicationContext(), 8));
badge.setBadgePosition(BadgeView.POSITION_TOP_RIGHT);
badge.setBadgeMargin(16, 16);
badge.setText(" ");
badge.show();

最后,项目 Github 地址 ,欢迎 Star ^-^