A variety of App main Interface tab implementation method

Take a look at the app main Interface tab implementation method, summarize:

And look at the implementation:

The first type: viewpager implementation tab:

ideas: 1. Layout to achieve the top and bottom layout, the middle is viewpager implementation. The middle is a,list<view> of four layout implementations

2. Implementation: Setonpagechangelistener Inner class

3. Requires an adapter: Pageradapter

The source code is as follows:

<span style= "FONT-SIZE:18PX;" >public class Mainactivity extends Activity implements Onclicklistener{private Viewpager mviewpager;private Pageradapter madapter;private list<view> mviews=new arraylist<view> (); Private LinearLayout mtabweixin;private linearlayout mtabfrd;private linearlayout mtabaddress;private LinearLayout Mtabsetting;private ImageButton mweixinimg;private ImageButton mfrdimg;private ImageButton maddressimg;private ImageButton msettingimg; @Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate ( Savedinstancestate); requestwindowfeature (Window.feature_no_title); Setcontentview (R.layout.activity_main); Initview (); initevents ();} private void Initevents () {Mtabweixin.setonclicklistener (this), Mtabfrd.setonclicklistener (this); Mtabaddress.setonclicklistener (This), Mtabsetting.setonclicklistener (this); Mviewpager.setonpagechangelistener ( New Onpagechangelistener () {@Overridepublic void onpageselected (int arg0) {} @Overridepublic void onpagescrolled (iNT arg0, float arg1, int arg2) {} @Overridepublic void onpagescrollstatechanged (int arg0) {int currentitem=mviewpager.getc Urrentitem (); resetimg (); switch (currentitem) {case 0:mweixinimg.setimageresource (r.drawable.tab_weixin_pressed); Break;case 1:mfrdimg.setimageresource (r.drawable.tab_find_frd_pressed); Break;case 2:mAddressImg.setImageResource (r.drawable.tab_address_pressed); Break;case 3:msettingimg.setimageresource (r.drawable.tab_settings_pressed); Break;default:break;}});} private void Initview () {mviewpager= (Viewpager) Findviewbyid (R.id.id_viewpager); mtabweixin= (LinearLayout) Findviewbyid (r.id.id_tab_weixin); mtabfrd= (LinearLayout) Findviewbyid (R.ID.ID_TAB_FRD); mTabAddress= (LinearLayout ) Findviewbyid (r.id.id_tab_address), mtabsetting= (linearlayout) Findviewbyid (r.id.id_tab_settings); MWeixinImg= ( ImageButton) Findviewbyid (r.id.id_tab_weixin_img); mfrdimg= (ImageButton) Findviewbyid (r.id.id_tab_frd_img); Maddressimg= (ImageButton) Findviewbyid (r.id.id_tab_address_img); msettingimg= (ImageButton)Findviewbyid (R.ID.ID_TAB_SETTINGS_IMG); Layoutinflater Minflater=layoutinflater.from (this); View tab01=minflater.inflate (R.LAYOUT.TAB01, NULL); View tab02=minflater.inflate (R.LAYOUT.TAB02, NULL); View tab03=minflater.inflate (r.layout.tab03, NULL); View tab04=minflater.inflate (r.layout.tab04, null), Mviews.add (TAB01); Mviews.add (TAB02); Mviews.add (TAB03); Mviews.add (TAB04); 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 int GetCount () {return mviews.size ();} @Overridepublic boolean isviewfromobject (View arg0, Object arg1) {return arg0==arg1;}}; Mviewpager.setadapter (Madapter);} @Overridepublic void OnClick (View v) {resetimg (); switch (V.getid ()) {case R.id.id_tab_weixin: Mweixinimg.setimageresource (r.drawable.tab_weixin_pressed); mviewpager.sEtcurrentitem (0); Break;case r.id.id_tab_frd:mfrdimg.setimageresource (r.drawable.tab_find_frd_pressed); Mviewpager.setcurrentitem (1); Break;case R.id.id_tab_address:maddressimg.setimageresource (R.drawable.tab_address _pressed); Mviewpager.setcurrentitem (2); Break;case R.id.id_tab_settings:msettingimg.setimageresource (    r.drawable.tab_settings_pressed); Mviewpager.setcurrentitem (3); break;default:break;}} /** switch all pictures to dark */private void Resetimg () {mweixinimg.setimageresource (r.drawable.tab_weixin_normal); Mfrdimg.setimageresource (R.drawable.tab_find_frd_normal); Maddressimg.setimageresource (R.drawable.tab_address_ normal); Msettingimg.setimageresource (R.drawable.tab_settings_normal);}} </span>

Layout of Activity_main.xml:

<span style= "FONT-SIZE:18PX;" ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "    android:layout_width=" match_parent "    android:layout_height=" Match_parent "    android:orientation= "vertical"   >    <include layout= "@layout/top"/>    < Android.support.v4.view.ViewPager        android:id= "@+id/id_viewpager"        android:layout_width= "Fill_parent"        android:layout_weight= "1"        android:layout_height= "0DP"        >    </ android.support.v4.view.viewpager>    <include layout= "@layout/bottom"/></linearlayout></ Span>

Method one learns to add to the knowledge point:

Convert a layout file into a view

<span style= "FONT-SIZE:18PX;" >                layoutinflater minflater=layoutinflater.from (this); View tab01=minflater.inflate (R.LAYOUT.TAB01, NULL); View tab02=minflater.inflate (R.LAYOUT.TAB02, NULL); View tab03=minflater.inflate (r.layout.tab03, NULL); View tab04=minflater.inflate (r.layout.tab04, NULL);</span>

The second type: Fragment Implementation tab:

Fragment and Viewpager difference: Viewpager can achieve the situation of the left and right activities, but fragment can not achieve the page left and right activities, through the button below.

Ideas:

1. Each container in the middle is implemented by fragment: loading the file in the class is OK, and the return is a View "inflater.inflate (R.layout.tab01, container, false);"

<span style= "FONT-SIZE:18PX;" >public class Weixinfragment extends fragment{@Overridepublic View oncreateview (layoutinflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedinstancestate) {return  inflater.inflate (R.LAYOUT.TAB01, container, false);}} </span>

2. In the following menu bar implementation method to invoke another method to decide whether to implement which fragement

This place uses the Fragmentmanager.

<span style= "FONT-SIZE:18PX;" >       fragmentmanager fm=getsupportfragmentmanager (); Fragmenttransaction transaction=fm.begintransaction (); Ruxia (transaction);</span>

The main source code is as follows:

<span style= "FONT-SIZE:18PX;" >public class Mainactivity extends Fragmentactivity implements Onclicklistener {private LinearLayout mtabweixin; Private LinearLayout mtabfrd;private linearlayout mtabaddress;private linearlayout mtabsettings;private ImageButton Mimgweixin;private ImageButton mimgfrd;private ImageButton mimgaddress;private ImageButton mimgsettings;private Fragment mtab01;private Fragment mtab02;private Fragment mtab03;private Fragment mTab04; @Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Requestwindowfeature (Window.feature_no_ TITLE); Setcontentview (R.layout.activity_main); Initview (); Initevent (); setselect (0);} private void Initevent () {Mtabweixin.setonclicklistener (this), Mtabfrd.setonclicklistener (this); Mtabaddress.setonclicklistener (this); Mtabsettings.setonclicklistener (this);} private void Initview () {mtabweixin = (linearlayout) Findviewbyid (r.id.id_tab_weixin); mtabfrd = (linearlayout) Findviewbyid (R.ID.ID_TAB_FRD); mtabaddRess = (linearlayout) Findviewbyid (r.id.id_tab_address); mtabsettings = (linearlayout) Findviewbyid (R.id.id_tab_ settings); mimgweixin = (ImageButton) Findviewbyid (r.id.id_tab_weixin_img); mimgfrd = (ImageButton) Findviewbyid ( R.ID.ID_TAB_FRD_IMG); mimgaddress = (ImageButton) Findviewbyid (r.id.id_tab_address_img); mimgsettings = (ImageButton) Findviewbyid (r.id.id_tab_settings_img);} /** set the picture to bright */private void setselect (int i) {Fragmentmanager fm=getsupportfragmentmanager (); Fragmenttransaction transaction=fm.begintransaction (); hidefragment (transaction); switch (i) {case 0:if (mtab01==null {mtab01=new weixinfragment (); Transaction.add (R.id.id_content, MTAB01);} Else{transaction.show (MTAB01);} Mimgweixin.setimageresource (r.drawable.tab_weixin_pressed); Break;case 1:if (mtab02==null) {mTab02=new FrdFragment ( ); Transaction.add (R.id.id_content, MTAB02);} Else{transaction.show (MTAB02);} Mimgfrd.setimageresource (r.drawable.tab_find_frd_pressed); Break;case 2:if (mtab03==null) {mTab03=new Addressfragment (); transactiOn.add (R.id.id_content, mTab03);} Else{transaction.show (MTAB03);} Mimgaddress.setimageresource (r.drawable.tab_address_pressed); Break;case 3:if (mtab04==null) {mTab04=new Settingfragment (); Transaction.add (R.id.id_content, mTab04);} Else{transaction.show (MTAB04);} Mimgsettings.setimageresource (r.drawable.tab_settings_pressed); break;default:break;} Transaction.commit ();} private void Hidefragment (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);}} @Overridepublic void OnClick (View v) {resetimgs (); switch (V.getid ()) {case R.id.id_tab_weixin:setselect (0); break;case R.id.id_tab_frd:toast.maketext (This, "click Success", Toast.length_long); Setselect (1); Break;case r.id.id_tab_address: Setselect (2); Break;case R.id.id_tab_settings:setselect (3); break;default:break;}} private void Resetimgs () {mimgweixin.setimageresource (r.drawable.tab_weixin_normal); Mimgfrd.setimaGeresource (R.drawable.tab_find_frd_normal); Mimgaddress.setimageresource (R.drawable.tab_address_normal); Mimgsettings.setimageresource (R.drawable.tab_settings_normal);}} </span>

The third type: Fragmentpageradapter+viewpager implementation:

The idea that this fragmentpageradapter and Viewpager realization is the combination of fragment and Viewpager:

1.Fragment put it in the list, Fragmentpageradapter.

2. Intermediate container move will trigger the listener to change the bottom menu, the bottom menu will change the trigger container.

The source code is as follows:

<span style= "FONT-SIZE:18PX;" >public class Mainactivity extends Fragmentactivity implements Onclicklistener {private Viewpager mviewpager;private Fragmentpageradapter madapter;private list<fragment> mfragments;private linearlayout mTabWeixin;private LinearLayout mtabfrd;private linearlayout mtabaddress;private linearlayout mtabsettings;private ImageButton Mimgweixin;private ImageButton mimgfrd;private ImageButton mimgaddress;private ImageButton mimgsettings;@ overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Requestwindowfeature (Window.feature_no_title); Setcontentview (R.layout.activity_main); InitView (); InitEvent (); Setselect (1);} private void Initevent () {Mtabweixin.setonclicklistener (this), Mtabfrd.setonclicklistener (this); Mtabaddress.setonclicklistener (this); Mtabsettings.setonclicklistener (this);} private void Initview () {mviewpager= (Viewpager) Findviewbyid (r.id.id_viewpager); mtabweixin = (linearlayout) Findviewbyid (R.id.id_tab_weixin); mtabfrd = (linearlayout) Findviewbyid (R.ID.ID_TAB_FRD); mtabaddress = (linearlayout) Findviewbyid (R.id.id_tab_ address); mtabsettings = (linearlayout) Findviewbyid (r.id.id_tab_settings); mimgweixin = (ImageButton) Findviewbyid ( R.ID.ID_TAB_WEIXIN_IMG); mimgfrd = (ImageButton) Findviewbyid (r.id.id_tab_frd_img); mimgaddress = (ImageButton) Findviewbyid (r.id.id_tab_address_img); mimgsettings = (ImageButton) Findviewbyid (r.id.id_tab_settings_img); Mfragments=new arraylist<fragment> (); Fragment mtab01=new weixinfragment (); Fragment mtab02=new frdfragment (); Fragment mtab03=new addressfragment (); Fragment mtab04=new settingfragment (); Mfragments.add (MTAB01); Mfragments.add (MTAB02); Mfragments.add (MTAB03); Mfragments.add (MTAB04); 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 () {@Overridepublic void onpageselected (int arg0) {int Currentitem=mviewpager.getcurrentitem (); Settab (CurrentItem);} @Overridepublic void onpagescrolled (int arg0, float arg1, int arg2) {} @Overridepublic void onpagescrollstatechanged (int a    rg0) {}}); } @Overridepublic void OnClick (View v) {switch (V.getid ()) {case R.id.id_tab_weixin:setselect (0); Break;case r.id.id_tab _frd:toast.maketext (This, "click Success", Toast.length_long); Setselect (1); Break;case R.id.id_tab_address:setselect (2); Break;case R.id.id_tab_settings:setselect (3); break;default:break;}} private void Setselect (int i) {/** set the picture to bright, toggle content area */settab (i); Mviewpager.setcurrentitem (i);} private void Settab (int i) {resetimgs (); switch (i) {case 0:mimgweixin.setimageresource (r.drawable.tab_weixin_pressed) ; break;case 1:mimgfrd.setimageresource (r.drawable.tab_find_frd_pressed); Break;case 2: Mimgaddress.setimageresource (r.drawable.tab_address_pressed); Break;case 3:mimgsettings.setimageresource ( r.drawable.tab_settings_pressed); break;Default:break;}} private void Resetimgs () {mimgweixin.setimageresource (r.drawable.tab_weixin_normal); Mimgfrd.setimageresource ( R.drawable.tab_find_frd_normal); Mimgaddress.setimageresource (R.drawable.tab_address_normal); Mimgsettings.setimageresource (r.drawable.tab_settings_normal);} }</span>

Fourth type: Viewpagerindicator+viewpager

This method exploits the Viewpagerindicator framework, which is very simple and has very little code.

Idea: 1. Tabfragment and Tabadapter were separated from the mainactivity.

2.MainActivity first get Viewpager and Tabpageindicator, get adapter madapter--> set adapter-Get Mtabpageindicator

The source code is as follows:

Mainactivity

<span style= "FONT-SIZE:18PX;" >public class Mainactivity extends Fragmentactivity {private Viewpager mviewpager;private tabpageindicator Mtabpageindicator;private list<fragment> mfragments;private tabadapter madapter; @Overrideprotected void OnCreate (Bundle arg0) {super.oncreate (arg0); Requestwindowfeature (Window.feature_no_title); Setcontentview (R.layout.activity_main); Initview ();} private void Initview () {mviewpager= (Viewpager) Findviewbyid (R.id.id_viewpager); Mtabpageindicator= ( Tabpageindicator) Findviewbyid (r.id.id_indicator); Madapter=new Tabadapter (Getsupportfragmentmanager ()); Mviewpager.setadapter (Madapter); Mtabpageindicator.setviewpager (mviewpager,0);}} </span>

Tabadapter

<span style= "FONT-SIZE:18PX;" >public class Tabadapter extends Fragmentpageradapter {@Overridepublic charsequence getpagetitle (int position) { return titles[position];} public static string[] titles=new string[]{"course", "question and Answer", "Ask for Lessons", "Learn", "plan"};p ublic Tabadapter (fragmentmanager FM) {SUPER (FM) ;} @Overridepublic Fragment getItem (int arg0) {tabfragment fragment=new tabfragment (arg0); return Fragment;} @Overridepublic int GetCount () {return titles.length;}} </span>

Tabfragment

<span style= "FONT-SIZE:18PX;" >public class Tabfragment extends Fragment {private int pos;public tabfragment (int pos) {this.pos=pos;} @Overridepublic View Oncreateview (Layoutinflater inflater, ViewGroup container,bundle savedinstancestate) {View view= Inflater.inflate (R.layout.frag, container, false); TextView tv= (TextView) View.findviewbyid (R.ID.ID_TV); Tv.settext (Tabadapter.titles[pos]); return view;}} </span>

Mainactivity

<span style= "FONT-SIZE:18PX;" ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "    android:layout_width=" match_parent "    android:layout_height=" Match_parent "    android:background= "#C5DAED"    android:orientation= "vertical"   >    <include layout= "@layout/ Top "/>    <com.viewpagerindicator.tabpageindicator        android:id=" @+id/id_indicator "        android: Layout_width= "Fill_parent"        android:layout_height= "wrap_content"        android:background= "@android: color/ Transparent "        >    </com.viewpagerindicator.TabPageIndicator>    < Android.support.v4.view.ViewPager        android:id= "@+id/id_viewpager"        android:layout_width= "Fill_parent"        android:layout_height= "Fill_parent"        >    </android.support.v4.view.viewpager></ Linearlayout></span>

A variety of App main Interface tab implementation method