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

Question

How can I achieve a Tab/Viewpager style like this ?

So its not looking like the normal Sliding Tab Layout like here .

Are there some guides to follow out there ? It looks very custom to me

Answer 1

First define the slidingTabLayout with your view pager as:

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

In above code I have taken the sliding tab color as transparent, you can take any as per your need. Now define a custom view thatrepresent your single tab.

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>

Now create a selector.xml inside the drawable folder that defines the text color of the tab when it will be selected and not selected.

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>

In the last line of selector.xml is the default tab text color when the tab is not selected.

Now finally in your void populateTabStrip() method of SlidingTabLayout class just add the code to implement the selector with the tab as shown below:

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

Remember this line should be inside the populateTabStrip() inside the for loop, just to make it easy i'm writing the complete method populateTabStrip(){} of slidingTabLayout, so your populateTabStrip() should look like this:

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);
        }
    }
}

Now in the Activity or Fragment where you are using the tab define the viewpager,slidingtablayout and the viewpager adapter, and set the adapter with view pager and set the slidingtab with view pager as shown below(Note i have used inside fragment, if you are using Activity then modify as per your need):

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

This should work fine. if you find any issue then comment, i will try to reply

Answer 2

You can have a top layout in your activity, in top of the view pager. In the OnPageSelected of the ViewPager you can change the text color of the top layout to simulate tab selection