Android Imitation micro Letter Top/Bottom menu bar effect _android

In order to realize the bottom menu bar + top menu bar of the Imitation micro-letter micro-letter, with ViewPage, each page corresponds to an XML, and when the finger slides around the viewpage, it shows the different page (in fact, XML) and the picture that changes the bottom menu button darkens or lightens, Also, if you click the bottom menu button, slide the page right and left (in fact, XML) and change the brightness of the corresponding button.

First, the layout
1, the top of the menu layout, named Top_layout.xml

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" 45DP "android:background=" @drawable/title_bar "> <textview android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android:layout_mar ginleft= "20DP" android:text= "micro-letter" android:layout_centervertical= "true" android:textcolor= "#ffffff" Android:text Size= "20SP" android:textstyle= "bold"/> <imagebutton android:id= "@+id/top_add" W Rap_content "android:layout_height=" wrap_content "android:background=" @drawable/top_add "Android:layout_centerver Tical= "true" android:layout_alignparentright= "true"/> <imagebutton android:id= "@+id/top_search" Andr Oid:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:background= "@drawable/top_search" an Droid:layout_centervertical= "true"Android:layout_toleftof=" @id/top_add "/> </RelativeLayout> 
 

Effect:

2, the bottom menu layout bottom_layout.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" 60DP "android:background=" @drawable/bottom_ Bar "android:orientation=" Horizontal "> <linearlayout android:id=" @+id/id_tab_weixin "Android:layout_wid Th= "0DP" android:layout_height= "Match_parent" android:layout_weight= "1" android:gravity= "center" Android:orien tation= "Vertical" > <!--android:clickable= "false" is to prevent ImageButton from intercepting the touch event, where the event is to be given its upper level linearlayout--> < ImageButton android:id= "@+id/id_tab_weixin_img" android:layout_width= wrap_content "android:layout_height=" WR Ap_content "android:background=" #00000000 "android:clickable=" false "android:src=" @drawable/tab_weixin_pressed "/> <textview android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android:tex" t= "micro-letter"/> &LT;/LINEARLAYOUT&GT <linearlayout android:id= "@+id/id_tab_address" android:layout_width= "0DP" android:layout_height= "Match_parent" 
    "android:layout_weight=" 1 "android:gravity=" center "android:orientation=" vertical "> <imagebutton 
   Android:id= "@+id/id_tab_address_img" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" 
 
  Android:background= "#00000000" android:clickable= "false" android:src= "@drawable/tab_address_normal"/> <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:text= "Address Book"/ > </LinearLayout> <linearlayout android:id= "@+id/id_tab_frd" android:layout_width= "0DP" Android : layout_height= "Match_parent" android:layout_weight= "1" android:gravity= "center" android:orientation= "vertical" & 
 
  Gt <imagebutton android:id= "@+id/id_tab_frd_img" android:layout_width= "Wrap_content" W Rap_contEnt "android:background=" #00000000 "android:clickable= false" android:src= "@drawable/tab_find_frd_normal"/&G 
 
  T <textview android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:text= "Discovery"/&gt 
 ; </LinearLayout> <linearlayout android:id= "@+id/id_tab_settings" android:layout_width= "0DP" android:l ayout_height= "Match_parent" android:layout_weight= "1" android:gravity= "center" android:orientation= "vertical" 
 
  ; <imagebutton android:id= "@+id/id_tab_settings_img" android:layout_width= "Wrap_content" Android:layout_heig ht= "Wrap_content" android:background= "#00000000" android:clickable= "false" android:src= "@drawable/tab_settings _normal "/> <textview android:layout_width= wrap_content" android:layout_height= "Wrap_content" Andr 
 oid:text= "I"/> </LinearLayout> </LinearLayout>

Effect:

3. Overall layout
Add the top two to the activity_main.xml.

<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_layout"/> 
 
 < Android.support.v4.view.ViewPager 
  android:id= "@+id/id_viewpage" 
  android:layout_width= "Fill_parent" 
  android:layout_height= "0DP" 
  android:layout_weight= "1" > 
 </ Android.support.v4.view.viewpager> 
" 
 
 <include layout=" @layout/bottom_layout "/> 
 
</ Linearlayout> 

Effect:

The effect can also be, the bottom menu bar is background, a bit white, so see is not very clear, one of the micro-letter is selected
4, define the ViewPage four layout
because you want to add four page to the ViewPage, each page corresponds to an XML, so this defines four XML.
Tab01.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= 
"http://schemas.android.com/apk/" Res/android " 
 android:layout_width=" match_parent " 
 android:layout_height=" Match_parent " 
 android: gravity= "center" 
 android:orientation= "vertical" > 
  <textview 
  android:layout_width= "WRAP_" Content " 
  android:layout_height=" wrap_content " 
  android:text=" Here is the micro-letter " 
  Android:layout_ Centervertical= "true" 
  android:textcolor= "#000000" 
  android:textsize= "40sp" 
  android:textstyle= " Bold " 
  /> 
 
</LinearLayout> 

Effect:

Tab02.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= 
"http://schemas.android.com/apk/" Res/android " 
 android:layout_width=" match_parent " 
 android:layout_height=" Match_parent " 
 android: gravity= "center" 
 android:orientation= "vertical" > 
  <textview 
  android:layout_width= "WRAP_" Content " 
  android:layout_height=" wrap_content " 
  android:text=" Here is the Address book 
  android:layout_centervertical = "true" 
  android:textcolor= "#000000" 
  android:textsize= "40sp" 
  android:textstyle= "bold" 
  /> 
 
</LinearLayout> 

Effect: The effect is the same as above, but the text changed a bit
Tab03.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= 
"http://schemas.android.com/apk/" Res/android " 
 android:layout_width=" match_parent " 
 android:layout_height=" Match_parent " 
 android: gravity= "center" 
 android:orientation= "vertical" > 
  <textview 
  android:layout_width= "WRAP_" Content " 
  android:layout_height=" wrap_content " 
  android:text=" here is found " 
  android:layout_centervertical= "True" 
  android:textcolor= "#000000" 
  android:textsize= "40sp" 
  android:textstyle= "bold" 
  /> 
 
</LinearLayout> 

Effect: The effect is the same as above, but the text changed a bit
Tab04.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= 
"http://schemas.android.com/apk/" Res/android " 
 android:layout_width=" match_parent " 
 android:layout_height=" Match_parent " 
 android: gravity= "center" 
 android:orientation= "vertical" > 
  <textview 
  android:layout_width= "WRAP_" Content " 
  android:layout_height=" wrap_content " 
  android:text=" This is my " 
  android:layout_centervertical=" True " 
  android:textcolor=" #000000 
  android:textsize= "40sp" 
  android:textstyle= "bold" 
  /> 
 
</LinearLayout> 

Effect: The effect is the same as above, but the text changed a bit
Second, the code
1. Initialization of controls and ViewPage in Mainactivity

Package com.example.tabexample; 
Import java.util.ArrayList; 
Import java.util.List; 
Import Android.os.Bundle; 
Import android.app.Activity; 
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.view.Window; 
Import Android.widget.ImageButton; 
 
Import Android.widget.LinearLayout; public class Mainactivity extends activity implements Android.view.View.OnClickListener {private Viewpager MVIEWPA ger;//is used to place the interface switch private pageradapter mpageradapter;//Initialize View adapter private list<view> mviews = new Arraylist<vi 
 Ew> ()//To hold tab01-04//Four tab, each tab contains a button private linearlayout mtabweixin; 
 Private LinearLayout mtabaddress; 
 Private LinearLayout MTABFRD; 
 Private LinearLayout mtabsetting; 
 Four buttons private ImageButton mweixinimg; Private ImageButton Maddressimg; 
 Private ImageButton mfrdimg; 
 
 Private ImageButton msettingimg; 
  @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
  Requestwindowfeature (Window.feature_no_title); 
  Setcontentview (R.layout.activity_main); 
  Initview (); 
  Initviewpage (); 
 Initevent (); 
  private void Initevent () {Mtabweixin.setonclicklistener (this); 
  Mtabaddress.setonclicklistener (this); 
  Mtabfrd.setonclicklistener (this); 
  Mtabsetting.setonclicklistener (this);  Mviewpager.setonpagechangelistener (New Onpagechangelistener () {/** *viewpage sliding when left/right @Override public 
    void onpageselected (int arg0) {int currentitem = Mviewpager.getcurrentitem (); 
     Switch (currentitem) {case 0:resetimg (); 
     Mweixinimg.setimageresource (r.drawable.tab_weixin_pressed); 
    Break 
     Case 1:resetimg (); 
     Maddressimg.setimageresource (r.drawable.tab_address_pressed); 
    Break 
    Case 2:  Resetimg (); 
     Mfrdimg.setimageresource (r.drawable.tab_find_frd_pressed); 
    Break 
     Case 3:resetimg (); 
     Msettingimg.setimageresource (r.drawable.tab_settings_pressed); 
    Break 
    Default:break; @Override public void onpagescrolled (int arg0, float arg1, int arg2) {} @Override Publi 
 c void onpagescrollstatechanged (int arg0) {}}); 
  /** * Initialization setting */private void Initview () {Mviewpager = (Viewpager) Findviewbyid (r.id.id_viewpage); 
  Initialization of four linearlayout mtabweixin = (linearlayout) Findviewbyid (r.id.id_tab_weixin); 
  Mtabaddress = (linearlayout) Findviewbyid (r.id.id_tab_address); 
  MTABFRD = (linearlayout) Findviewbyid (R.ID.ID_TAB_FRD); 
  mtabsetting = (linearlayout) Findviewbyid (r.id.id_tab_settings); 
  Initialize four buttons mweixinimg = (ImageButton) Findviewbyid (r.id.id_tab_weixin_img); 
  Maddressimg = (ImageButton) Findviewbyid (r.id.id_tab_address_img); Mfrdimg = (ImageButton) fiNdviewbyid (R.ID.ID_TAB_FRD_IMG); 
 Msettingimg = (ImageButton) Findviewbyid (r.id.id_tab_settings_img); }/** * Initialize ViewPage */private void Initviewpage () {//Mother four layout layoutinflater mlayoutinflater = layou 
  Tinflater.from (this); 
  View tab01 = mlayoutinflater.inflate (R.LAYOUT.TAB01, NULL); 
  View tab02 = mlayoutinflater.inflate (R.LAYOUT.TAB02, NULL); 
  View tab03 = mlayoutinflater.inflate (r.layout.tab03, NULL); 
 
  View tab04 = mlayoutinflater.inflate (r.layout.tab04, NULL); 
  Mviews.add (TAB01); 
  Mviews.add (TAB02); 
  Mviews.add (TAB03); 
 
  Mviews.add (TAB04); The adapter initializes and sets Mpageradapter = new Pageradapter () {@Override public void Destroyitem (ViewGroup container, int 
 
   Position, object) {Container.removeview (Mviews.get (position)); @Override public Object Instantiateitem (viewgroup container, int position) {View view = Mviews.get (posit 
    ION); 
    Container.addview (view); 
   return view; } @OverRide public boolean isviewfromobject (View arg0, Object arg1) {return arg0 = = Arg1; 
   @Override public int GetCount () {return mviews.size (); 
  } 
  }; 
 Mviewpager.setadapter (Mpageradapter); /** * To determine which to display, and set the button picture * * @Override public void OnClick (View arg0) {switch (Arg0.getid ()) {case R 
   . Id.id_tab_weixin:mViewPager.setCurrentItem (0); 
   Resetimg (); 
   Mweixinimg.setimageresource (r.drawable.tab_weixin_pressed); 
  Break 
   Case R.id.id_tab_address:mviewpager.setcurrentitem (1); 
   Resetimg (); 
   Maddressimg.setimageresource (r.drawable.tab_address_pressed); 
  Break 
   Case R.id.id_tab_frd:mviewpager.setcurrentitem (2); 
   Resetimg (); 
   Mfrdimg.setimageresource (r.drawable.tab_find_frd_pressed); 
  Break 
   Case R.id.id_tab_settings:mviewpager.setcurrentitem (3); 
   Resetimg (); 
   Msettingimg.setimageresource (r.drawable.tab_settings_pressed); 
  Break 
  Default:break; 
 } 
 } 
 
 /** * Darken all images */private void resetimg () {mweixinimg.setimageresource (r.drawable.tab_weixin_normal); 
  Maddressimg.setimageresource (R.drawable.tab_address_normal); 
  Mfrdimg.setimageresource (R.drawable.tab_find_frd_normal); 
 Msettingimg.setimageresource (R.drawable.tab_settings_normal); 
 } 
 
}

The amount of code is very short, only hundreds of lines, the function can be achieved, notice here to remove the original title bar of the program I used directly
requestwindowfeature (window.feature_no_title);

2, the effect:

Three, the idea explanation
1, the top of the menu bar and the bottom menu bar to create a new layout
2, the middle is viewpage, and then put four page (tab01-tab04.xml), note that to viewpage through the adapter to provide content.
3, listen to the ViewPage and the bottom menu bar button events (note that the button here is placed in a linearlayout, so we monitor the LinearLayout touch events, and shielding the Imgaebutton touch events)
4,
Public void OnClick (View arg0)
This listener is the bottom menu of the touch event, according to the touch of the control, change their brightness, change viewpage display content
Mviewpager.setonpagechangelistener (New Onpagechangelistener ()

Here is the monitoring of viewpage events, change the brightness of the corresponding control, change the contents of the ViewPage display
Iv. Deficiencies
1, the latest version of the micro-letter should be left and right sliding is part of the brightness changes, here directly changed past.
2, the latest version of micro-letter text to follow changes, here did not change

This article has been organized into the "Android micro-credit Development tutorial Summary," Welcome to learn to read.

The above is the entire content of this article, I hope to help you learn.