Android uidesign -- Add title bars for PagerTabStrip and PagerTitleStrip in ViewPage (3)

Android uidesign -- Add title bars for PagerTabStrip and PagerTitleStrip in ViewPage (3)

In ViewPager, we often see the title display on each displayed page. How can we add it through code? Google provides two controls in the v4 package that we providePagerTabStripAndPagerTitleStripYou can add titles in ViewPager using these two controls.
　　

Similarities and differences between PagerTabStrip and PagerTitleStrip

PagerTabStrip and PagerTitleStrip are used basically the same. The only difference is:

1. PagerTabStrip displays an underline under the current page to indicate which Tab is on the current page.
2. PagerTabStrip tabs can be clicked. When a user clicks a Tab, the current page will jump to this page, while PagerTitleStrip does not.

This is a reference to blog connection of @ harvic880925.

Use of PagerTabStrip

PagerTabStrip can be used in two ways:

1. Add the PagerTabStrip control in the ViewPager layout, set the layout_gravity attribute, and determine the title display position. Generally, we will define it in bottom or top.
2. Rewrite the getPageTitle (int position) method in the Custom PagerAdapter.

ViewPager follows these two steps to see the specific code implementation:
Overall Layout file:

Custom MyPagerAdapterTitle inherits PagerAdapter:

Public class MyPagerAdapterTitle extends PagerAdapter {private List
  
   
MViews; private List
   
    
MTitles; // defines the title set public MyPagerAdapterTitle (List
    
     
MViews, List
     
      
MTitles) {this. mViews = mViews; this. mTitles = mTitles; // The title data is passed in through the constructor. } @ Override public int getCount () {return mViews. size () ;}@ Override public boolean isViewFromObject (View view, Object object) {return view = object ;}@ Override public Object instantiateItem (ViewGroup container, int position) {// Add View iner. addView (mViews. get (position); return mViews. get (position) ;}@ Override public void destroyItem (ViewGroup container, int position, Object object) {// Delete View container. removeView (mViews. get (position);} // rewrite this method @ Override public CharSequence getPageTitle (int position) {// set title return mTitles. get (position );}}
     
    
   
  

Implementation in Activity:
(Three layout files: item_frist, item_second, and item_third are not listed. Each layout contains only one ImageView .)

Public class TitleActivity extends Activity {private ViewPager mViewPagerTitle; private MyPagerAdapterTitle myPagerAdapterTitle; private LayoutInflater mInflater; private List
  
   
MViews; // initialize the private List of data
   
    
MTitles; // initialize the title data @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); requestWindowFeature (Window. FEATURE_NO_TITLE); setContentView (R. layout. activity_title); mInflater = getLayoutInflater (); mViewPagerTitle = (ViewPager) findViewById (R. id. viewpager_title); // initialize the layout page mViews = new ArrayList
    
     
(); View view1 = mInflater. inflate (R. layout. item_frist, null); View view2 = mInflater. inflate (R. layout. item_second, null); View view3 = mInflater. inflate (R. layout. item_third, null); mViews. add (view1); mViews. add (view2); mViews. add (view3); // initialize the title data mTitles = new ArrayList
     
      
(); String title1 = new String (PagerOne); String title2 = new String (PagerTwo); String title3 = new String (PagerThree); mTitles. add (title1); mTitles. add (title2); mTitles. add (title3); myPagerAdapterTitle = new MyPagerAdapterTitle (mViews, mTitles); mViewPagerTitle. setAdapter (myPagerAdapterTitle );}}
     
    
   
  

Effect display:

Use of PagerTitleStrip

　　PagerTabStrip is used exactly the same as PagerTabStrip. You only need to change PagerTabStrip in the overall layout to PagerTabStrip.

Effect display: