Question

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

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

那里有一些指南吗？它看起来非常习惯

Answer 1

首先使用您的视图寻呼机将slidingTabLayout定义为：

  <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>

在上面的代码中，我将滑动标签颜色视为透明，您可以根据需要选择。现在定义一个代表单个标签的自定义视图。

customtab.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，它定义选项卡的文本颜色，而不是选中它。

selector.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，如下所示（注意我使用了内部片段，如果您正在使用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;
}

这应该可以正常工作。如果您发现任何问题然后发表评论，我会尝试回复

Answer 2

您可以在视图寻呼机顶部的活动中使用顶部布局。在ViewPager的OnPageSelected中，您可以更改顶部布局的文本颜色以模拟选项卡选择

如何使用这样的自定义标签制作Viewpager？

2 个答案: