ViewPageIndicator + ViewPager + Fragment implement Tab labels similar To Netease news Client

ViewPageIndicator + ViewPager + Fragment implement Tab labels similar To Netease news Client

Recently, my mind was not clear. Today, a buddy asked me a question and did not understand what he was asking. Later, I thought my mind burned out and noted down the problem, shared

This guy looked at Xia Shen's blog and wrote it with the address: Ghost

Start question:

1. To use the ViewPageIndicator framework, you must first download the source code from github. Source Code address: https://github.com/jakewharton/android-viewpagerindicatorand import libraryto the project.

2. Because this buddy needs to inherit fragment, he wrote a demo based on his needs.

Cuihua does not serve food, but only the Code:

package com.sdufe.thea.guo;import com.sdufe.thea.guo.fragment.IndexFragment;import android.os.Bundle;import android.app.Activity;import android.support.v4.app.FragmentActivity;import android.view.Menu;import android.view.Window;import android.widget.LinearLayout;public class MainActivity extends FragmentActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);getSupportFragmentManager().beginTransaction().add(R.id.ll, new IndexFragment()).commit();}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}}

The above code is to put a fragment in the activity, which is very simple and will not be explained.

The following describes how to use the framework:

Package com. sdufe. thea. guo. fragment; import com. sdufe. thea. guo. r; import com. sdufe. thea. guo. adapter. tabPageIndicatorAdapter; import com. viewpagerindicator. tabPageIndicator; import android. OS. bundle; import android. support. v4.app. fragment; import android. support. v4.view. viewPager; import android. support. v4.view. viewPager. onPageChangeListener; import android. view. layoutInflater; import android. view. view; import android. view. viewGroup; import android. widget. toast; public class IndexFragment extends Fragment {private static String [] title = {"Haha", "Haha", "", ""}; private ViewPager viewPager; private TabPageIndicator indicator; private TabPageIndicatorAdapter adapter; @ Overridepublic View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater. inflate (R. layout. fragment_index, null); viewPager = (ViewPager) view. findViewById (R. id. pager); indicator = (TabPageIndicator) view. findViewById (R. id. indicator); adapter = new TabPageIndicatorAdapter (getFragmentManager (), title); viewPager. setAdapter (adapter); indicator. setViewPager (viewPager); indicator. setOnPageChangeListener (new OnPageChangeListener () {@ Overridepublic void onPageSelected (int arg0) {Toast. makeText (getActivity (), title [arg0], Toast. LENGTH_LONG ). show () ;}@ Overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {}@ Overridepublic void onPageScrollStateChanged (int arg0) {}}); return view ;}}

It is easy to use. After all, it is a framework written by great gods for our convenience. The main idea is to initialize viewPager and TabPageIndicator and set an adapter for viewpager. tabPageIndicator slides along with viewPager and sets a listener for it by the way.

The following is the code of the adapter:

package com.sdufe.thea.guo.adapter;import com.sdufe.thea.guo.fragment.ItemFragment;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;public class TabPageIndicatorAdapter extends FragmentPagerAdapter {private  String[] title;public TabPageIndicatorAdapter(FragmentManager fm, String[] title) {super(fm);this.title = title;}@Overridepublic Fragment getItem(int arg0) {Fragment fragment=new ItemFragment();Bundle bundle=new Bundle();bundle.putString("arg", title[arg0]);fragment.setArguments(bundle);return fragment;}@Overridepublic int getCount() {return title.length;}@Overridepublic CharSequence getPageTitle(int position) {return title[position%title.length];}}

I'm familiar with it. I have already written viewPager in the previous article. Here I will mainly talk about the getPageTitle (int position) function. If you do not rewrite this function, the specified text will not appear in the tab. To appear the text, you must rewrite this function.

Of course, if you have finished all the content above, that is, you can achieve sliding. There are no lines or styles that followed by that day. Next, you need to continue typing, this is set by changing the topic.

Here we mainly set the background and the background through the selector.

In this way, you can achieve the sliding you want, mainly to change the topic in the configuration file (the topic in the application acts on the entire app, not just for a certain acticity)

Note: The code is adapted from the Xia Shen code and has been attached to the address.

Code: http://download.csdn.net/detail/elinavampire/8171355

........................................ ........................................... Let's take a look at the source code .................................... ........................................ ...................................

First, let's take a look at TabPageIndicator, which inherits from HorizontalScrollView. That is to say, the tab can achieve horizontal screen sliding.

public class TabPageIndicator extends HorizontalScrollView implements PageIndicator

Continue reading the code

private final OnClickListener mTabClickListener = new OnClickListener() {        public void onClick(View view) {            TabView tabView = (TabView)view;            final int oldSelected = mViewPager.getCurrentItem();            final int newSelected = tabView.getIndex();            mViewPager.setCurrentItem(newSelected);            if (oldSelected == newSelected && mTabReselectedListener != null) {                mTabReselectedListener.onTabReselected(newSelected);            }        }    };

That is to say, it implements the click function. It not only implements slide, but also the rest is similar to the content of the custom control.

The setViewPager (viewPager) and setOnPageChangeListener () methods are used. Let's take a look at this part of the code.

Void setViewPager (ViewPager view); and void setOnPageChangeListener (ViewPager. OnPageChangeListener listener); is the method for interface PageIndicator. TabPageIndicator implements methods in its own class

 @Override    public void setViewPager(ViewPager view) {        if (mViewPager == view) {            return;        }        if (mViewPager != null) {            mViewPager.setOnPageChangeListener(null);        }        final PagerAdapter adapter = view.getAdapter();        if (adapter == null) {            throw new IllegalStateException("ViewPager does not have adapter instance.");        }        mViewPager = view;        view.setOnPageChangeListener(this);        notifyDataSetChanged();    }

This method is used to Bind the indicator to a ViewPager.

@Override    public void setOnPageChangeListener(OnPageChangeListener listener) {        mListener = listener;    }

In fact, TabPageIndicator is a custom control.

OK. First come here