android - android twitter 应用程序，自定义viewpager 选项卡如何

Question

android 的 twitter 应用程序有自定义的 viewpager 选项卡，这是怎么做的？文本位于一个小中心点上方，当每个相应选项卡中有新内容时，该中心点就会出现。

我知道如何使用操作栏选项卡来做到这一点，但操作栏选项卡的问题是在横向模式下它们会移动到实际的操作栏。Viewpager 选项卡不这样做。

我已经处理了一些 Viewpager 标题库，但我不清楚这将如何完成

Answer 1

一个答案是使用第三方库，例如 PagerSlidingTabStrip ，或者允许在选项卡中放置任何可绘制对象的分支

Answer 2

您可以为每个选项卡设置自己的视图，您应该创建一个布局 xml (custom_tab_icon.xml)，其中包含 TextView 和 TextView 下方的蓝点

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

<TextView
    android:id="@+id/tab_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TITLE"/>
<ImageView
    android:id="@+id/dot"
    android:layout_width="5dp"
    android:layout_height="5dp"
    android:layout_below="@id/tab_name"
    android:layout_centerHorizontal="true"
    android:background="@drawable/notifiercircle"
    android:visibility="visible"/>

然后，每次更改选项卡时，调用此 refreshTabIcon 方法：

private void refreshTabIcons() {
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        tab.setCustomView(null); //if view is not first nullyfied, it's added to the previous one, not replaced
        tab.setCustomView(R.layout.custom_tab_icon);
        ImageView dot = ((ImageView) tab.getCustomView().findViewById(R.id.dot));
        if (viewPagerAdapter.getItem(viewPager.getCurrentItem()) == viewPagerAdapter.getItem(i)) {//This if determines if this is the selected tab
            dot.setVisibility(View.VISIBLE);
        } else {
            dot.setVisibility(View.INVISIBLE);
        }
        ((TextView) tab.getCustomView().findViewById(R.id.tab_name)).setText("tab title");
    }
}