Overview of the main Tab page of the Android project: Fragment + TabPageIndicator + ViewPager

 

Android now has more and more ways to implement the Tab interface. Today we will give you a summary of the common implementation methods. Currently:

1. Traditional ViewPager implementation

2. Implementation of FragmentManager + Fragment

3. ViewPager + FragmentPagerAdapter implementation

4. TabPageIndicator + ViewPager + FragmentPagerAdapter

 

1. Traditional ViewPager implementation

It is usually ViewPager + ViewAdapter, which is quite common.

:

Code:

 

Package com. example. mainframework02; import java. util. arrayList; import java. util. list; import android. app. activity; import android. OS. bundle; import android. support. v4.view. pagerAdapter; 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. imageButton; import android. widget. imageView; import android. widget. linearLayout; public class TraditionalViewPagerAcvitity extends Activity {/*** ViewPager */private ViewPager mViewPager;/*** ViewPager adapter */private PagerAdapter mAdapter; private List
 
  
MViews; private LayoutInflater mInflater; private int currentIndex;/*** four buttons at the bottom */private LinearLayout cursor; private LinearLayout mTabBtnFrd; private LinearLayout mTabBtnAddress; private LinearLayout mTabBtnSettings; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); mInflater = LayoutInflater. from (this); mViewPager = (ViewPager) findViewById (R. id. id_viewpager);/*** initialize View */initView (); mViewPager. setAdapter (mAdapter); mViewPager. setOnPageChangeListener (new OnPageChangeListener () {@ Overridepublic void onPageSelected (int position) {resetTabBtn (); switch (position) {case 0 :( (ImageButton) mTabBtnWeixin. findViewById (R. id. btn_tab_bottom_weixin )). setImageResource (R. drawable. tab_weixin_pressed); break; case 1 :( (ImageButton) mTabBtnFrd. findViewById (R. id. btn_tab_bottom_friend )). setImageResource (R. drawable. tab_find_frd_pressed); break; case 2 :( (ImageButton) mTabBtnAddress. findViewById (R. id. btn_tab_bottom_contact )). setImageResource (R. drawable. tab_address_pressed); break; case 3 :( (ImageButton) mTabBtnSettings. findViewById (R. id. btn_tab_bottom_setting )). setImageResource (R. drawable. tab_settings_pressed); break;} currentIndex = position ;}@ Overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {}@ Overridepublic void onPageScrollStateChanged (int arg0) {}}) ;}protected void resetTabBtn () {(ImageButton) mTabBtnWeixin. findViewById (R. id. btn_tab_bottom_weixin )). setImageResource (R. drawable. tab_weixin_normal); (ImageButton) mTabBtnFrd. findViewById (R. id. btn_tab_bottom_friend )). setImageResource (R. drawable. tab_find_frd_normal); (ImageButton) mTabBtnAddress. findViewById (R. id. btn_tab_bottom_contact )). setImageResource (R. drawable. tab_address_normal); (ImageButton) mTabBtnSettings. findViewById (R. id. btn_tab_bottom_setting )). setImageResource (R. drawable. tab_settings_normal);} private void initView () {mTabBtnWeixin = (LinearLayout) findViewById (R. id. id_tab_bottom_weixin); mTabBtnFrd = (LinearLayout) findViewById (R. id. id_tab_bottom_friend); mTabBtnAddress = (LinearLayout) findViewById (R. id. id_tab_bottom_contact); mTabBtnSettings = (LinearLayout) findViewById (R. id. id_tab_bottom_setting); mViews = new ArrayList
  
   
(); View first = mInflater. inflate (R. layout. main_tab_01, null); View second = mInflater. inflate (R. layout. main_tab_02, null); View third = mInflater. inflate (R. layout. main_tab_03, null); View fourth = mInflater. inflate (R. layout. main_tab_04, null); mViews. add (first); mViews. add (second); mViews. add (third); mViews. add (fourth); mAdapter = new PagerAdapter () {@ Overridepublic void destroyItem (ViewGroup container, int position, Object object) {container. removeView (mViews. get (position) ;}@ Overridepublic Object instantiateItem (ViewGroup container, int position) {View view = mViews. get (position); container. addView (view); return view ;}@ Overridepublic boolean isViewFromObject (View arg0, Object arg1) {return arg0 = arg1 ;}@ Overridepublic int getCount () {return mViews. size ();}};}}
  
 

Rating: All the code is concentrated in an Activity, and the code is messy.

 

2. Implementation of FragmentManager + Fragment

It mainly uses Fragment to add, hide, and other transaction operations on Fragment on the main content interface.

:

Code:

Main Activity

 

Package com. example. mainframework02.fragment; import android. annotation. suppressLint; import android. app. activity; import android. app. fragmentManager; import android. app. fragmentTransaction; import android. OS. bundle; import android. view. view; import android. view. view. onClickListener; import android. widget. imageButton; import android. widget. linearLayout; import com. example. mainframework02.R; public class Fragm EntMainActivity extends Activity implements OnClickListener {private region mTab02; private MainTab01 mTab01; private MainTab03 mTab03; private MainTab04 mTab04;/*** four buttons at the bottom */private LinearLayout release; private LinearLayout release; private LinearLayout mTabBtnAddress; private LinearLayout mTabBtnSettings;/*** used to manage Fragment */private FragmentManager fragmentManager; @ SuppressLint (NewApi) @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. fragment_main); initViews (); fragmentManager = getFragmentManager (); setTabSelection (0);} private void initViews () {mTabBtnWeixin = (LinearLayout) findViewById (R. id. id_tab_bottom_weixin); mTabBtnFrd = (LinearLayout) findViewById (R. id. id_tab_bottom_friend); mTabBtnAddress = (LinearLayout) FindViewById (R. id. id_tab_bottom_contact); mTabBtnSettings = (LinearLayout) findViewById (R. id. id_tab_bottom_setting); mTabBtnWeixin. setOnClickListener (this); mTabBtnFrd. setOnClickListener (this); mTabBtnAddress. setOnClickListener (this); mTabBtnSettings. setOnClickListener (this) ;}@ Overridepublic void onClick (View v) {switch (v. getId () {case R. id. id_tab_bottom_weixin: setTabSelection (0); break; case R. id. id_ta B _bottom_friend: setTabSelection (1); break; case R. id. id_tab_bottom_contact: setTabSelection (2); break; case R. id. id_tab_bottom_setting: setTabSelection (3); break; default: break;}/*** sets the Selected tab based on the input index parameter. ** // @ SuppressLint (NewApi) private void setTabSelection (int index) {// reset the button resetBtn (); // start a Fragment transaction FragmentTransaction transaction = fragmentManager. beginTransaction (); // hide all Fragment first to prevent multiple Fragment display on the Interface hideFragments (transaction); switch (index) {case 0: // when the message tab is clicked, the widget's image and text color (ImageButton) mTabBtnWeixin is changed. findViewById (R. id. btn_tab_bottom_weixin )). setImageResource (R. drawable. tab_weixin_pres Sed); if (mTab01 = null) {// if MessageFragment is empty, create one and add it to mTab01 = new MainTab01 (); transaction. add (R. id. id_content, mTab01);} else {// transaction is displayed directly if MessageFragment is not empty. show (mTab01);} break; case 1: // when you click the message tab, change the widget's image and text color (ImageButton) mTabBtnFrd. findViewById (R. id. btn_tab_bottom_friend )). setImageResource (R. drawable. tab_find_frd_pressed); if (mTab02 = null) {// if MessageFragment is empty, create and add MTab02 = new MainTab02 (); transaction. add (R. id. id_content, mTab02);} else {// transaction is displayed directly if MessageFragment is not empty. show (mTab02);} break; case 2: // when you click a dynamic tab, change the widget's image and text color (ImageButton) mTabBtnAddress. findViewById (R. id. btn_tab_bottom_contact )). setImageResource (R. drawable. tab_address_pressed); if (mTab03 = null) {// if NewsFragment is empty, create one and add it to the interface mTab03 = new MainTab03 (); transaction. add (R. id. id_co Ntent, mTab03);} else {// transaction is displayed directly if NewsFragment is not empty. show (mTab03);} break; case 3: // when you click Set tab, change the widget's image and text color (ImageButton) mTabBtnSettings. findViewById (R. id. btn_tab_bottom_setting )). setImageResource (R. drawable. tab_settings_pressed); if (mTab04 = null) {// if SettingFragment is empty, create one and add it to mTab04 = new MainTab04 (); transaction. add (R. id. id_content, mTab04);} else {// If SettingFragment is not empty, display it directly Transaction. show (mTab04) ;}break ;}transaction. commit () ;}/ *** clears all selected States. */Private void resetBtn () {(ImageButton) mTabBtnWeixin. findViewById (R. id. btn_tab_bottom_weixin )). setImageResource (R. drawable. tab_weixin_normal); (ImageButton) mTabBtnFrd. findViewById (R. id. btn_tab_bottom_friend )). setImageResource (R. drawable. tab_find_frd_normal); (ImageButton) mTabBtnAddress. findViewById (R. id. btn_tab_bottom_contact )). setImageResource (R. drawable. tab_address_normal); (ImageButton) mTa BBtnSettings. findViewById (R. id. btn_tab_bottom_setting). setImageResource (R. drawable. tab_settings_normal);}/*** sets all Fragment to hidden. ** @ Param transaction * refers to the transaction used to perform operations on Fragment */@ SuppressLint (NewApi) private void hideFragments (FragmentTransaction transaction) {if (mTab01! = Null) {transaction. hide (mTab01);} if (mTab02! = Null) {transaction. hide (mTab02);} if (mTab03! = Null) {transaction. hide (mTab03);} if (mTab04! = Null) {transaction. hide (mTab04 );}}}

Each TabFragment has a total of four TabFragment tables. The two tables are shown below, which are basically the same.

 

 

package com.example.mainframework02.fragment;import android.annotation.SuppressLint;import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;@SuppressLint(NewApi)public class MainTab01 extends Fragment{@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){return inflater.inflate(com.example.mainframework02.R.layout.main_tab_01, container, false);}}

package com.example.mainframework02.fragment;import android.annotation.SuppressLint;import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.mainframework02.R;@SuppressLint(NewApi)public class MainTab02 extends Fragment{public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){return inflater.inflate(R.layout.main_tab_02, container, false);}}

Rating: the processing of controls in each Fragment is independent of their respective classes. Relatively speaking, the main Activity is much simpler, but it does not have the effect of sliding left and right.

 

 

3. ViewPager + Fragment implementation

It is implemented through ViewPager and FragmentPagerAdapter.

:

Code:

Main Activity

 

Package com. example. mainframework03; import java. util. arrayList; import java. util. list; import android. OS. bundle; import android. support. v4.app. fragment; import android. support. v4.app. fragmentActivity; import android. support. v4.app. fragmentPagerAdapter; import android. support. v4.view. viewPager; import android. support. v4.view. viewPager. onPageChangeListener; import android. widget. imageButton; import android. widget. linearLayout; public class MainActivity extends FragmentActivity {private ViewPager mViewPager; private FragmentPagerAdapter mAdapter; private List
 
  
MFragments = new ArrayList
  
   
();/*** Bottom four buttons */private LinearLayout layout; private LinearLayout mTabBtnAddress; private LinearLayout mTabBtnSettings; @ jsonvoid onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); mViewPager = (ViewPager) findViewById (R. id. id_viewpager); initView (); mAdapter = new FragmentPagerAdapter (getSupportFragmentManager () {@ Overridepublic int getCount () {return mFragments. size () ;}@ Overridepublic Fragment getItem (int arg0) {return mFragments. get (arg0) ;}}; mViewPager. setAdapter (mAdapter); mViewPager. setOnPageChangeListener (new OnPageChangeListener () {private int currentIndex; @ override void onPageSelected (int position) {resetTabBtn (); switch (position) {case 0 :( (ImageButton) mTabBtnWeixin. findViewById (R. id. btn_tab_bottom_weixin )). setImageResource (R. drawable. tab_weixin_pressed); break; case 1 :( (ImageButton) mTabBtnFrd. findViewById (R. id. btn_tab_bottom_friend )). setImageResource (R. drawable. tab_find_frd_pressed); break; case 2 :( (ImageButton) mTabBtnAddress. findViewById (R. id. btn_tab_bottom_contact )). setImageResource (R. drawable. tab_address_pressed); break; case 3 :( (ImageButton) mTabBtnSettings. findViewById (R. id. btn_tab_bottom_setting )). setImageResource (R. drawable. tab_settings_pressed); break;} currentIndex = position ;}@ Overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {}@ Overridepublic void onPageScrollStateChanged (int arg0) {}}) ;}protected void resetTabBtn () {(ImageButton) mTabBtnWeixin. findViewById (R. id. btn_tab_bottom_weixin )). setImageResource (R. drawable. tab_weixin_normal); (ImageButton) mTabBtnFrd. findViewById (R. id. btn_tab_bottom_friend )). setImageResource (R. drawable. tab_find_frd_normal); (ImageButton) mTabBtnAddress. findViewById (R. id. btn_tab_bottom_contact )). setImageResource (R. drawable. tab_address_normal); (ImageButton) mTabBtnSettings. findViewById (R. id. btn_tab_bottom_setting )). setImageResource (R. drawable. tab_settings_normal);} private void initView () {mTabBtnWeixin = (LinearLayout) findViewById (R. id. id_tab_bottom_weixin); mTabBtnFrd = (LinearLayout) findViewById (R. id. id_tab_bottom_friend); mTabBtnAddress = (LinearLayout) findViewById (R. id. id_tab_bottom_contact); mTabBtnSettings = (LinearLayout) findViewById (R. id. created); MainTab01 tab01 = new MainTab01 (); MainTab02 tab02 = new MainTab02 (); MainTab03 tab03 = new MainTab03 (); MainTab04 tab04 = new MainTab04 (); mFragments. add (tab01); mFragments. add (tab02); mFragments. add (tab03); mFragments. add (tab04 );}}
  
 

There are also four TabFragment, one on the bottom, and the four are basically the same

 

 

package com.example.mainframework03;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class MainTab01 extends Fragment{@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){return  inflater.inflate(R.layout.main_tab_01, container, false);}}

Rating: The Implementation Effect is exactly the same as the first one. Each Fragment processes its internal logic independently. The code is much more neat and supports sliding between the left and right sides. It seems that the first and second versions are combined.

 

 

4. TabPageIndicator + ViewPager + FragmentPagerAdapter

The implementation method is the same as that of 3. However, if TabPageIndicator is used as the tab indicator, the result is still good. If you have written this before, you will not post the code.

:

Reference: Android uses Fragment and ViewPagerIndicator to create the main csdn app framework

 

Well, I have summarized so much. There are certainly many other implementation methods. You can leave a message to continue to improve this summary.

 

 

 

The source code of the first and second source code of the third method was originally intended to be the same, but it was helpless. After a while, v4.Fragment was separated by Fragment. Hey hey, let me leave a comment and like one, is my support.