如何使用這樣的自定義標簽制作Viewpager？

Question

如何實現像這樣的Tab / Viewpager樣式？

所以它看起來不像這里的普通滑動標簽布局。

那里有一些指南嗎？ 它看起來非常習慣

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>

在SELECT.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中，您可以更改頂部布局的文本顏色以模擬選項卡選擇