The Android tab layout is implemented in 4 ways (Fragment+tabpageindicator+viewpager) _android

Android is now implementing the tab type interface more and more, today the common implementation of the way to give you a summary. It is now written:

1, the traditional Viewpager implementation

2, Fragmentmanager+fragment implementation

3, Viewpager+fragmentpageradapter implementation

4, Tabpageindicator+viewpager+fragmentpageradapter

1, the traditional Viewpager implementation

The main thing is viewpager+viewadapter this is still more common, don't say more

Effect Chart:

Code:

Package com.example.mainframework02; 
Import javautilarraylist; 
 
Import javautillist; 
Import androidappactivity; 
Import Androidosbundle; 
Import Androidsupportvviewpageradapter; 
Import Androidsupportvviewviewpager; 
Import Androidsupportvviewviewpageronpagechangelistener; 
Import Androidviewlayoutinflater; 
Import Androidviewview; 
Import Androidviewviewgroup; 
Import Androidwidgetimagebutton; 
Import Androidwidgetimageview; 
 
Import Androidwidgetlinearlayout; public class Traditionalviewpageracvitity extends activity {/** * viewpager * * Private Viewpager MVIEWPA 
  Ger 
  /** * Viewpager Adapter * * Private pageradapter madapter; 
  Private list<view> mviews; 
   
  Private Layoutinflater Minflater; 
 
  private int currentindex; 
  /** * Bottom four buttons * * Private linearlayout mtabbtnweixin; 
  Private LinearLayout MTABBTNFRD; 
  Private LinearLayout mtabbtnaddress; 
 
  Private LinearLayout mtabbtnsettings; @Override protected void OncreaTe (Bundle savedinstancestate) {superoncreate (savedinstancestate); 
    Setcontentview (Rlayoutactivity_main); 
    Minflater = Layoutinflaterfrom (this); 
     
    Mviewpager = (Viewpager) Findviewbyid (Ridid_viewpager); 
     
    /** * Initialize View/Initview (); 
 
    Mviewpagersetadapter (Madapter); Mviewpagersetonpagechangelistener (New Onpagechangelistener () {@Override public void onpageselected (i 
        NT position) {resettabbtn (); Switch (position) {case 0: (ImageButton) Mtabbtnweixinfindviewbyid (ridbtn_tab_bottom_weixin 
          )) Setimageresource (rdrawabletab_weixin_pressed); 
        Break Case 1: ((ImageButton) Mtabbtnfrdfindviewbyid (ridbtn_tab_bottom_friend)) Setimageresource (Rdrawa 
          bletab_find_frd_pressed); 
        Break Case 2: ((ImageButton) Mtabbtnaddressfindviewbyid (ridbtn_tab_bottom_contact)) sEtimageresource (rdrawabletab_address_pressed); 
        Break Case 3: ((ImageButton) Mtabbtnsettingsfindviewbyid (ridbtn_tab_bottom_setting)) Setimageresource ( 
          rdrawabletab_settings_pressed); 
        Break 
      } currentindex = position; @Override public void onpagescrolled (int arg0, float arg1, int arg2) {} @Overr 
 
  IDE public void onpagescrollstatechanged (int arg0) {}}); 
        } protected void Resettabbtn () {(ImageButton) Mtabbtnweixinfindviewbyid (ridbtn_tab_bottom_weixin)) 
    Setimageresource (Rdrawabletab_weixin_normal);  
    ((ImageButton) Mtabbtnfrdfindviewbyid (ridbtn_tab_bottom_friend)) Setimageresource (Rdrawabletab_find_frd_normal); ((ImageButton) Mtabbtnaddressfindviewbyid (ridbtn_tab_bottom_contact)) Setimageresource (Rdrawabletab_address 
    _normal); ((ImageButton) Mtabbtnsettingsfindviewbyid (Ridbtn_tab_bottom_setting)) Setimageresource (Rdrawabletab_settings_normal); 
    private void Initview () {mtabbtnweixin = (linearlayout) Findviewbyid (ridid_tab_bottom_weixin); 
    MTABBTNFRD = (linearlayout) Findviewbyid (ridid_tab_bottom_friend); 
    Mtabbtnaddress = (linearlayout) Findviewbyid (ridid_tab_bottom_contact); 
 
    Mtabbtnsettings = (linearlayout) Findviewbyid (ridid_tab_bottom_setting); 
    Mviews = new arraylist<view> (); 
    View a = minflaterinflate (rlayoutmain_tab_01, NULL); 
    View second = minflaterinflate (rlayoutmain_tab_02, NULL); 
    View third = minflaterinflate (rlayoutmain_tab_03, NULL); 
    View fourth = minflaterinflate (rlayoutmain_tab_04, NULL); 
    Mviewsadd (a); 
    Mviewsadd (second); 
    Mviewsadd (third); 
 
    Mviewsadd (fourth); Madapter = new Pageradapter () {@Override public void Destroyitem (ViewGroup container, int position, Ob Ject object) {Containerremoveview (Mviewsget (PositiON));  @Override public Object Instantiateitem (viewgroup container, int position) {View view = 
        Mviewsget (position); 
        Containeraddview (view); 
      return view;  
      @Override public boolean isviewfromobject (View arg0, Object arg1) {return arg0 = = Arg1; 
      @Override public int GetCount () {return mviewssize (); 
  } 
    }; 
 } 
 
}

Evaluation: All the code is concentrated in an activity, it appears that the code is rather messy.

2, Fragmentmanager+fragment implementation

Mainly utilizes the fragment in the main content domain to face fragment add,hide and so on transaction operation.

Effect Chart:

Code:

Main activity

Package com.example.mainframework02.fragment; 
Import Androidannotationsuppresslint; 
Import androidappactivity; 
Import Androidappfragmentmanager; 
Import androidappfragmenttransaction; 
Import Androidosbundle; 
Import Androidviewview; 
Import Androidviewviewonclicklistener; 
Import Androidwidgetimagebutton; 
 
Import Androidwidgetlinearlayout; 
 
Import Comexamplemainframeworkr; 
  public class Fragmentmainactivity extends activity implements Onclicklistener {private MainTab02 mTab02; 
  Private MAINTAB01 mTab01; 
  Private MAINTAB03 mTab03; 
 
  Private MAINTAB04 mTab04; 
  /** * Bottom four buttons * * Private linearlayout mtabbtnweixin; 
  Private LinearLayout MTABBTNFRD; 
  Private LinearLayout mtabbtnaddress; 
  Private LinearLayout mtabbtnsettings; 
 
  /** * Used for fragment management * * Private Fragmentmanager Fragmentmanager; @SuppressLint ("Newapi") @Override protected void OnCreate (Bundle savedinstancestate) {superoncreate (Savedin 
    Stancestate); SetCOntentview (Rlayoutfragment_main); 
    Initviews (); 
    Fragmentmanager = Getfragmentmanager (); 
  Settabselection (0); 
    private void Initviews () {mtabbtnweixin = (linearlayout) Findviewbyid (ridid_tab_bottom_weixin); 
    MTABBTNFRD = (linearlayout) Findviewbyid (ridid_tab_bottom_friend); 
    Mtabbtnaddress = (linearlayout) Findviewbyid (ridid_tab_bottom_contact); 
 
    Mtabbtnsettings = (linearlayout) Findviewbyid (ridid_tab_bottom_setting); 
    Mtabbtnweixinsetonclicklistener (this); 
    Mtabbtnfrdsetonclicklistener (this); 
    Mtabbtnaddresssetonclicklistener (this); 
  Mtabbtnsettingssetonclicklistener (this); 
      @Override public void OnClick (View v) {switch (Vgetid ()) {case Ridid_tab_bottom_weixin: 
      Settabselection (0); 
    Break 
      Case Ridid_tab_bottom_friend:settabselection (1); 
    Break 
      Case Ridid_tab_bottom_contact:settabselection (2); 
    Break Case ridid_tab_bottom_setting: 
      Settabselection (3); 
 
    Break 
    Default:break; 
   }/** * Sets the selected tab page based on the Index argument passed in. 
    * */@SuppressLint ("Newapi") private void settabselection (int index) {//reset button resetbtn (); 
    Open a fragment transaction fragmenttransaction transaction = Fragmentmanagerbegintransaction (); 
    Hide all the fragment first to prevent multiple fragment from appearing on the interface Hidefragments (transaction); Switch (index) {case 0://When the Message tab is clicked, change the control's picture and text color (ImageButton) Mtabbtnweixinfindviewbyid (RIDBT 
      n_tab_bottom_weixin)) Setimageresource (rdrawabletab_weixin_pressed); 
        if (MTAB01 = = null) {//If messagefragment is empty, create one and add to the interface mTab01 = new MAINTAB01 (); 
      Transactionadd (Ridid_content, MTAB01); 
      else {//if messagefragment is not empty, show it directly transactionshow (MTAB01); 
    } break; Case 1://When the Message tab is clicked, change the picture and text color of the control ((ImageButton) MtabbtnfrdfindviewByid (Ridbtn_tab_bottom_friend)) Setimageresource (rdrawabletab_find_frd_pressed); 
        if (MTAB02 = = null) {//If messagefragment is empty, create one and add to the interface mTab02 = new MAINTAB02 (); 
      Transactionadd (Ridid_content, MTAB02); 
      else {//if messagefragment is not empty, show it directly transactionshow (MTAB02); 
    } break; 
          Case 2://When the Dynamic tab is clicked, change the control's picture and text color ((ImageButton) Mtabbtnaddressfindviewbyid (ridbtn_tab_bottom_contact)) 
      Setimageresource (rdrawabletab_address_pressed); 
        if (mTab03 = = null) {//If newsfragment is empty, create one and add to the interface mTab03 = new MAINTAB03 (); 
      Transactionadd (Ridid_content, MTAB03); 
      else {//if newsfragment is not empty, show it directly transactionshow (MTAB03); 
    } break; 
          Case 3://When you click Set tab, change the control's picture and text color ((ImageButton) Mtabbtnsettingsfindviewbyid (ridbtn_tab_bottom_setting)) Setimageresource (Rdrawabletab_settings_pressed); 
        if (mTab04 = = null) {//If settingfragment is empty, create one and add to the interface mTab04 = new MainTab04 (); 
      Transactionadd (Ridid_content, mTab04); 
      else {//if settingfragment is not empty, show it directly transactionshow (MTAB04); 
    } break; 
  } transactioncommit (); 
   /** * Clears all selected states. * private void Resetbtn () {(ImageButton) Mtabbtnweixinfindviewbyid (ridbtn_tab_bottom_weixin) Setim 
    Ageresource (Rdrawabletab_weixin_normal);  
    ((ImageButton) Mtabbtnfrdfindviewbyid (ridbtn_tab_bottom_friend)) Setimageresource (Rdrawabletab_find_frd_normal); ((ImageButton) Mtabbtnaddressfindviewbyid (ridbtn_tab_bottom_contact)) Setimageresource (Rdrawabletab_address 
    _normal); ((ImageButton) Mtabbtnsettingsfindviewbyid (ridbtn_tab_bottom_setting)) Setimageresource (Rdrawabletab_settings_no 
  Rmal); 
   /** * All fragment are placed in a hidden state. * * @param TRAnsaction * For transactions that perform operations on fragment * * @SuppressLint ("Newapi") private void Hidefragments (Fragmenttransactio 
    N transaction) {if (mTab01!= null) {transactionhide (MTAB01); 
    } if (mTab02!= null) {transactionhide (MTAB02); 
    } if (mTab03!= null) {transactionhide (MTAB03); 
    } if (mTab04!= null) {transactionhide (MTAB04); 
 } 
     
  } 
 
}

Each tabfragment, altogether four tabfragment, below posted two, basically all the same.

Package com.example.mainframework02.fragment; 
Import Androidannotationsuppresslint; 
Import androidappfragment; 
Import Androidosbundle; 
Import Androidviewlayoutinflater; 
Import Androidviewview; 
 
Import Androidviewviewgroup; @SuppressLint ("Newapi") public class MainTab01 extends Fragment {@Override public View Oncreateview (layoutinfla ter inflater, ViewGroup container, Bundle savedinstancestate) {return inflaterinflate (comexamplemainframeworkrlay 
 
  Outmain_tab_01, container, false); 
 
}} package com.example.mainframework02.fragment; 
Import Androidannotationsuppresslint; 
Import androidappfragment; 
Import Androidosbundle; 
Import Androidviewlayoutinflater; 
Import Androidviewview; 
 
Import Androidviewviewgroup; 
 
Import Comexamplemainframeworkr;  @SuppressLint ("Newapi") public class MainTab02 extends Fragment {public View Oncreateview (Layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) {return inflaterinflate(Rlayoutmain_tab_02, container, false); 

 } 
 
}

Evaluation: Each fragment control in the processing, are independent to their respective classes, relatively speaking, the main activity simplifies a lot, but not the effect of sliding around.

3, Viewpager+fragment implementation

Mainly through Viewpager and fragmentpageradapter together to achieve.

Effect Chart:

Code:

Main activity

Package com.example.mainframework03; 
Import javautilarraylist; 
 
Import javautillist; 
Import Androidosbundle; 
Import androidsupportvappfragment; 
Import androidsupportvappfragmentactivity; 
Import Androidsupportvappfragmentpageradapter; 
Import Androidsupportvviewviewpager; 
Import Androidsupportvviewviewpageronpagechangelistener; 
Import Androidwidgetimagebutton; 
 
Import Androidwidgetlinearlayout; 
  public class Mainactivity extends Fragmentactivity {private Viewpager mviewpager; 
  Private Fragmentpageradapter Madapter; 
   
   
  Private list<fragment> mfragments = new arraylist<fragment> (); 
  /** * Bottom four buttons * * Private linearlayout mtabbtnweixin; 
  Private LinearLayout MTABBTNFRD; 
  Private LinearLayout mtabbtnaddress; 
 
 
  Private LinearLayout mtabbtnsettings; 
    @Override protected void OnCreate (Bundle savedinstancestate) {superoncreate (savedinstancestate); 
    Setcontentview (Rlayoutactivity_main); Mviewpager = (Viewpager) Findviewbyid (Ridid_viewpager); 
     
     
 
    Initview (); 
      Madapter = new Fragmentpageradapter (Getsupportfragmentmanager ()) {@Override public int getcount () 
      {return mfragmentssize (); 
      @Override public Fragment getitem (int arg0) {return mfragmentsget (arg0); 
     
    } 
    }; 
     
     
    Mviewpagersetadapter (Madapter); 
 
      Mviewpagersetonpagechangelistener (New Onpagechangelistener () {private int currentindex; 
        @Override public void onpageselected (int position) {resettabbtn (); Switch (position) {case 0: (ImageButton) Mtabbtnweixinfindviewbyid (ridbtn_tab_bottom_weixin 
          )) Setimageresource (rdrawabletab_weixin_pressed); 
        Break Case 1: ((ImageButton) Mtabbtnfrdfindviewbyid (ridbtn_tab_bottom_friend)) Setimageresource (Rdrawa Bletab_find_frd_pressED); 
        Break Case 2: ((ImageButton) Mtabbtnaddressfindviewbyid (ridbtn_tab_bottom_contact)) Setimageresource (R 
          drawabletab_address_pressed); 
        Break Case 3: ((ImageButton) Mtabbtnsettingsfindviewbyid (ridbtn_tab_bottom_setting)) Setimageresource ( 
          rdrawabletab_settings_pressed); 
        Break 
      } currentindex = position; @Override public void onpagescrolled (int arg0, float arg1, int arg2) {} @Overr 
 
  IDE public void onpagescrollstatechanged (int arg0) {}}); 
        } protected void Resettabbtn () {(ImageButton) Mtabbtnweixinfindviewbyid (ridbtn_tab_bottom_weixin)) 
    Setimageresource (Rdrawabletab_weixin_normal);  
    ((ImageButton) Mtabbtnfrdfindviewbyid (ridbtn_tab_bottom_friend)) Setimageresource (Rdrawabletab_find_frd_normal); ((ImageButton) Mtabbtnaddressfindviewbyid (ridbtn_tab_bottom_contact)) Setimageresource (Rdrawabletab_address_normal); ((ImageButton) Mtabbtnsettingsfindviewbyid (ridbtn_tab_bottom_setting)) Setimageresource (Rdrawabletab_settings_no 
  Rmal); 
    private void Initview () {mtabbtnweixin = (linearlayout) Findviewbyid (ridid_tab_bottom_weixin); 
    MTABBTNFRD = (linearlayout) Findviewbyid (ridid_tab_bottom_friend); 
    Mtabbtnaddress = (linearlayout) Findviewbyid (ridid_tab_bottom_contact); 
 
    Mtabbtnsettings = (linearlayout) Findviewbyid (ridid_tab_bottom_setting); 
    MAINTAB01 tab01 = new MainTab01 (); 
    MAINTAB02 tab02 = new MAINTAB02 (); 
    MAINTAB03 tab03 = new MainTab03 (); 
    MainTab04 tab04 = new MainTab04 (); 
    Mfragmentsadd (TAB01); 
    Mfragmentsadd (TAB02); 
    Mfragmentsadd (TAB03); 
  Mfragmentsadd (TAB04); 
 } 
}

There are 4 tabfragment, one below, four basic.

Package com.example.mainframework03; 
 
Import Androidosbundle; 
Import androidsupportvappfragment; 
Import Androidviewlayoutinflater; 
Import Androidviewview; 
Import Androidviewviewgroup; 
 
public class MainTab01 extends Fragment 
{ 
 
  @Override public 
  View Oncreateview (Layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) 
  {return 
    inflaterinflate (rlayoutmain_tab_01, container, false); 
   
  } 
 
 

Evaluation: The effect is the same as the first effect, each fragment to handle its own internal logic, the code is much neater, and supports sliding around. Feeling is the first and second version of the combination.

4, Tabpageindicator+viewpager+fragmentpageradapter

Implementation is consistent with 3, but the use of tabpageindicator as a tab indicator, the effect is good, this has been written before, no longer paste code.

Effect Chart:

Well, summed up so much, there are certainly many other ways to achieve, we can leave a message, there will be time to continue to improve this summary.

The first and second source code: Demo Download

The third Way of source code: Demo Download

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.