选项卡上的自定义图标

Question

我正在使用PagerSlidingTabStrip和ViewPager。

有没有办法可以动态更改Tab图标，具体取决于某些操作。就像收到通知时一样，我想更改通知选项卡上的图标，以显示未读通知的数量。

或者任何其他可以支持它而没有太多调整的库。

Answer 1

您可以通过实施PagerSlidingTabStrip.CustomTabProvider界面来实现。我为你的案子做了example project，所以让我们一步一步地探讨它。

首先，为名为tab_layout的标签创建一个布局。它将包含2个TextView的标题和徽章。就我而言，它看起来像：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:id="@+id/tab_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:gravity="center"
    android:textColor="@android:color/white"
    android:textStyle="bold"
    android:textSize="16sp"
    android:singleLine="true" />

<TextView
    android:id="@+id/badge"
    android:layout_width="16dp"
    android:layout_height="16dp"
    android:layout_toRightOf="@+id/tab_title"
    android:textSize="12sp"
    android:gravity="center"
    android:layout_marginLeft="8dp"
    android:layout_centerVertical="true"
    android:textColor="@android:color/white"
    android:background="@drawable/badge_background" />

</RelativeLayout>

其次，为Tab创建一个简单模型，它将包含标签标题和通知数量。我称之为ViewPagerTab：

public class ViewPagerTab {
    public String title;
    public int notifications;

    public ViewPagerTab(String title, int notifications) {
        this.title = title;
        this.notifications = notifications;
    }
}

第三，在PagerSlidingTabStrip.CustomTabProvider上实施FragmentPagerAdapter界面。在这里，我们将膨胀标签布局并初始化标签视图，我们还将定义位置的片段：

public class MainAdapter extends FragmentPagerAdapter
        implements PagerSlidingTabStrip.CustomTabProvider {

    ArrayList<ViewPagerTab> tabs;

    public MainAdapter(FragmentManager fm, ArrayList<ViewPagerTab> tabs) {
        super(fm);
        this.tabs = tabs;
    }

    @Override
    public View getCustomTabView(ViewGroup viewGroup, int i) {
        RelativeLayout tabLayout = (RelativeLayout)
                LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.tab_layout, null);

        TextView tabTitle = (TextView) tabLayout.findViewById(R.id.tab_title);
        TextView badge = (TextView) tabLayout.findViewById(R.id.badge);

        ViewPagerTab tab = tabs.get(i);

        tabTitle.setText(tab.title.toUpperCase());
        if (tab.notifications > 0) {
            badge.setVisibility(View.VISIBLE);
            badge.setText(String.valueOf(tab.notifications));
        } else {
            badge.setVisibility(View.GONE);
        }

        return tabLayout;
    }

    @Override
    public void tabSelected(View view) {
        //if you don't want badges disappear when you select tab comment next lines
        RelativeLayout tabLayout = (RelativeLayout) view;
        TextView badge = (TextView) tabLayout.findViewById(R.id.badge);
        badge.setVisibility(View.GONE);
    }

    @Override
    public void tabUnselected(View view) {

    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return new OneFragment();
            case 1:
                return new TwoFragment();
            case 2:
                return new ThreeFragment();
        }
        return new OneFragment();
    }

    @Override
    public int getCount() {
        return tabs.size();
    }
}

第四，在MainActivity的{​​{1}}方法中初始化标签页和寻呼机：

onCreate

你会得到这样的东西：

终于，要在运行时获取和更改标签视图，您只需在@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs); pager = (ViewPager) findViewById(R.id.pager); ArrayList<ViewPagerTab> tabsList = new ArrayList<>(); tabsList.add(new ViewPagerTab("One", 0)); tabsList.add(new ViewPagerTab("Two", 1)); tabsList.add(new ViewPagerTab("Three", 2)); adapter = new MainAdapter(getSupportFragmentManager(), tabsList); pager.setAdapter(adapter); tabs.setViewPager(pager); pager.setOffscreenPageLimit(3); getSupportActionBar().hide(); } 或{{1}中调用getChildAt对象的PagerSlidingTabStrip功能即可并且做你想做的事：

Activity

不要忘记，子视图计数从0开始。如果您想使用图片，只需将Fragment替换为private void notifyTabStripChanged(int position, int notificationsCount) { LinearLayout tabHost = (LinearLayout) tabs.getChildAt(0); RelativeLayout tabLayout = (RelativeLayout) tabHost.getChildAt(position); TextView badge = (TextView) tabLayout.findViewById(R.id.badge); if (notificationsCount > 0) { badge.setVisibility(View.VISIBLE); badge.setText(String.valueOf(notificationsCount)); } else { badge.setVisibility(View.GONE); } } 徽章并更改其图片资源而不是文字。享受！

Answer 2

您可以通过分叉此lib来实现您想要的功能，并更改在实现的示例应用中使用there的IconTabProvider的行为，以便仅使用静态资源。

对lib fork进行更改以添加动态图标更改：

在PagerSlidingTabStrip：

更改IconTabProvider接口的getPageIconResId方法的返回类型（和名称）

public interface IconTabProvider {
    //public int getPageIconResId(int position) becomes
    public Bitmap getPageIconBitmap(int position)
}

这会导致在PagerSlidingTabStrip

中更新对此方法的调用

-

还要从

更改方法addIconTab

private void addIconTab(final int position, int resId) {
    ImageButton tab = new ImageButton(getContext());
    tab.setImageResource(resId);
    addTab(position, tab);
}

到

private void addIconTab(final int position, bitmap icon) {
    ImageButton tab = new ImageButton(getContext());
    tab.setImageBitmap(icon);
    addTab(position, tab);
}

然后你需要为标签栏创建一个适配器，这是一个例子：

public class DynamicIconPagerAdapter extends PagerAdapter implements IconTabProvider {

    public HashMap<Integer, Bitmap> mapBetweenPositionAndIcons = new HashMap();

    public DynamicIconPagerAdapter () {
        super();
    }

    @Override
    public int getCount() {
        return mapBetweenPositionAndIcons.size();
    }

    @Override
    public Bitmap getPageIconResId(int position) {
        return mapBetweenPositionAndIcons.get(position);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // looks a little bit messy here
        TextView v = new TextView(getActivity());
        v.setBackgroundResource(R.color.background_window);
        v.setText("PAGE " + (position + 1));
        final int padding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, getResources()
                .getDisplayMetrics());
        v.setPadding(padding, padding, padding, padding);
        v.setGravity(Gravity.CENTER);
        container.addView(v, 0);
        return v;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object view) {
        container.removeView((View) view);
    }

    @Override
    public boolean isViewFromObject(View v, Object o) {
        return v == ((View) o);
    }

}

最后，当您想要更新图标时，只需更改地图的相应位图（mapBetweenPositionAndIcons）并在PagerSlidingTabStrip对象上调用notifyDataSetChanged（）。

由于时间不够，我还没有测试过我的解决方案，但我会尽快！ ;）