选项卡上的自定义图标

Question

我正在使用PagerSlidingTabStrip和ViewPager.

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

或任何其他图书馆,如果没有太多调整支持它.

Answer 1

您可以通过实现PagerSlidingTabStrip.CustomTabProvider接口来实现.我为你的案例制作了示例项目,让我们一步一步地探索它.

首先,为我们的标签创建一个布局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的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();
}

你会得到这样的东西:

而最后,以获取和改变运行选项卡中的观点,你可以简单地调用getChildAt的函数PagerSlidingTabStrip对象在你Activity或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);
    }
}

不要忘记,子视图计数从0开始.如果要使用图像,只需ImageView用TextView徽章替换并更改图像资源而不是文本.请享用!