java - 如何使用这样的自定义选项卡制作 Viewpager？

Question

如何实现这样的 Tab/Viewpager 样式？

所以它看起来不像普通的滑动标签布局，如 here .

那里有一些指南可以遵循吗？对我来说看起来很习惯

Answer 1

首先将 slidingTabLayout 与您的 View 寻呼机定义为:

  <com.forthcode.androidoze.Utils.SlidingTabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FFFFFFFF"/>

<android.support.v4.view.ViewPager
    android:id="@+id/vpPager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

</android.support.v4.view.ViewPager>

在上面的代码中，我将滑动标签的颜色设置为透明，您可以根据需要使用任何颜色。 现在定义一个代表您的单个选项卡的自定义 View 。

自定义标签.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="10dp">
<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:layout_gravity="center"
    android:textAppearance="?android:attr/textAppearanceMedium"/>
</LinearLayout>

现在在 drawable 文件夹中创建一个 selector.xml，用于定义选项卡在被选中和未被选中时的文本颜色。

选择器.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#ccc" />
<item android:state_focused="true" android:color="#ccc" />
<item android:state_pressed="true" android:color="#ccc" />
<item android:color="#fff" />
</selector>

selector.xml 的最后一行是未选中选项卡时的默认选项卡文本颜色。

现在终于在 SlidingTabLayout 类的 void populateTabStrip() 方法中添加代码来实现带有选项卡的选择器，如下所示:

tabTitleView.setTextColor(getResources().getColorStateList(R.drawable.selector));

请记住，这一行应该在 for 循环内的 populateTabStrip() 内，为了方便起见，我正在编写 slidingTabLayout 的完整方法 populateTabStrip(){}，因此您的 populateTabStrip() 应该如下所示:

private void populateTabStrip() {
    final PagerAdapter adapter = mViewPager.getAdapter();
    final OnClickListener tabClickListener = new TabClickListener();



    for (int i = 0; i < adapter.getCount(); i++) {
        View tabView = null;
        TextView tabTitleView = null;

        if (mTabViewLayoutId != 0) {
            // If there is a custom tab view layout id set, try and inflate it
            tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
                    false);
            tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
        }

        if (tabView == null) {
            tabView = createDefaultTabView(getContext());
        }

        if (tabTitleView == null && TextView.class.isInstance(tabView)) {
            tabTitleView = (TextView) tabView;
        }

        if (mDistributeEvenly) {
            LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams();
            lp.width = 0;
            lp.weight = 1;
        }

        tabTitleView.setText(adapter.getPageTitle(i));
        tabView.setOnClickListener(tabClickListener);
                    tabTitleView.setTextColor(getResources().getColorStateList(R.drawable.selector));
        String desc = mContentDescriptions.get(i, null);
        if (desc != null) {
            tabView.setContentDescription(desc);
        }

        mTabStrip.addView(tabView);
        if (i == mViewPager.getCurrentItem()) {
            tabView.setSelected(true);
        }
    }
}

现在，在您使用选项卡的 Activity 或 Fragment 中定义 viewpager、slidingtablayout 和 viewpager 适配器，并使用 view pager 设置适配器并使用 view pager 设置 slidingtab，如下所示(注意我在 fragment 内部使用了，如果您使用的是 Activity，则根据您的需要进行修改):

    SlidingTabLayout mSlidingTabLayout;
ViewPager mViewPager;
PagerAdapter mPagerAdapter;
SharedPreferences mySharedpref;

 @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View view= inflater.inflate(R.layout.fragment_home, container, false);

    mPagerAdapter=new PagerAdapter(getChildFragmentManager());
    mViewPager= (ViewPager) view.findViewById(R.id.vpPager);
    mSlidingTabLayout= (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
    mViewPager.setAdapter(mPagerAdapter);
    mSlidingTabLayout.setCustomTabView(R.layout.customtab, R.id.textView1);
    mSlidingTabLayout.setSelectedIndicatorColors(R.color.tabIndicator);
    mSlidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {//change the color of the tab indcator

        @Override
        public int getIndicatorColor(int position) {
            // TODO Auto-generated method stub
            return getResources().getColor(R.color.tabIndicator);
        }
    });

    mSlidingTabLayout.setViewPager(mViewPager);
    mViewPager.setCurrentItem(tabPosition);
return view;
}

这应该可以正常工作。如果您发现任何问题，请发表评论，我会尽力回复