Android Project tab type main interface Big summary Fragment+tabpageindicator+viewpager

Reprint please indicate source: http://blog.csdn.net/lmj623565791/article/details/24740977

Android now implements the tab type interface way more and more, today, the common implementation of the way to everyone to a summary. Currently written by:

1, the traditional Viewpager realization

2, Fragmentmanager+fragment realization

3, Viewpager+fragmentpageradapter realization

4, Tabpageindicator+viewpager+fragmentpageradapter

1, the traditional Viewpager realization

Mainly is viewpager+viewadapter this or is more common, not much said

：

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<view> mViews; Private layoutinflater minflater;private int currentindex;/** * Bottom four buttons */private linearlayout mtabbtnweixin;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> (); 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 ();}};}}

Evaluation: All the code is concentrated in one activity, it seems the code is quite messy.

2, Fragmentmanager+fragment realization

The main use of fragment in the main content interface to face fragment Add,hide and other transactional operations.

：

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 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;/** * For management of 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); Case R.id.id_tab_bottom_friend:settabselection (1); Break;case r.id.id_tab_bottom_contact:settabselection (2); ; case R.id.id_tab_bottom_setting:settabselection (3); break;default:break;}} /** * Sets the selected tab page according to the index parameter passed in. * */@SuppressLint ("Newapi") private void settabselection (int index) {//reset button resetbtn ();// Open a fragment transaction fragmenttransaction transaction = Fragmentmanager.begintransaction ();//Hide all fragment first to prevent multipleA fragment is displayed on the interface hidefragments (transaction); switch (index) {case 0://changes the picture and text color of the control when the Message tab is clicked (ImageButton) Mtabbtnweixin.findviewbyid (R.id.btn_tab_bottom_weixin)). Setimageresource (r.drawable.tab_weixin_pressed); if ( MTAB01 = = null) {//If messagefragment is empty, one is created and added to the interface mTab01 = new MainTab01 (); Transaction.add (R.id.id_content, MTAB01);} else{//if Messagefragment is not empty, it is displayed directly transaction.show (MTAB01);} Break;case 1://When you click on the Message tab, change the control's picture 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, then one is created and added to the interface mTab02 = New MainTab02 (); Transaction.add (R.id.id_content, MTAB02);} else{//if Messagefragment is not empty, it is displayed directly transaction.show (MTAB02);} Break;case 2://changes the picture and text color ((ImageButton) Mtabbtnaddress.findviewbyid (r.id.btn_tab_bottom_contact) of the control when the Dynamic tab is clicked. Setimageresource (r.drawable.tab_address_pressed); if (mTab03 = = null) {//If newsfragment is empty, create one and add to interface mTab03 = new MAINTAB03 (); Transaction.add (r.iD.id_content, MTAB03);} else{//if Newsfragment is not empty, it is displayed directly transaction.show (MTAB03);} Break;case 3://When you click Set tab, change the control's picture 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, then one is created and added to the interface mTab04 = New MainTab04 (); Transaction.add (R.id.id_content, mTab04);} else{//if Settingfragment is not empty, it is displayed 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) Mtabbtnsettings.findviewbyid (R.id.btn _tab_bottom_setting). Setimageresource (R.drawable.tab_settings_normal);} /** * Will all FRThe agment are all set to a hidden state. * * @param transaction * The transaction used to perform operations on fragment */@SuppressLint ("Newapi") private void Hidefragments (Fragmenttransa Ction 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, a total of four tabfragment, the following posted two, 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);}}

Evaluation: Each fragment in the control of the processing, are independent to the respective class, relative to the main activity simplified a lot, unfortunately there is no left and right sliding effect.

3, Viewpager+fragment realization

Mainly through Viewpager and fragmentpageradapter together to achieve.

：

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<fragment> mfragments = new arraylist<fragment> ();/** * Bottom four buttons */ Private LinearLayout mtabbtnweixin;private linearlayout mtabbtnfrd;private linearlayout mTabBtnAddress;private LinearLayout mtabbtnsettings; @Overrideprotected void 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; @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); 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 4 tabfragment, one below, four 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);}}

Evaluation: The implementation effect is exactly the same as the first effect, with each fragment handling its own internal logic, the code is much cleaner, and supports sliding left and right. The feeling is the first and second combination version.

4, Tabpageindicator+viewpager+fragmentpageradapter

The implementation mode and 3 are consistent, but the use of Tabpageindicator as the tab indicator, the effect is good, this has been written before, no longer post code.

：

Reference :Android uses Fragment,viewpagerindicator to make CSDN app main frame

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

the first and second types of source codeThe third Way source code originally wanted together, helpless, a will v4. Fragment A will fragment separate, hey, you leave a message, praise one, is to my support.

Android Project tab type main interface Big summary Fragment+tabpageindicator+viewpager