This blog to share a UI effect-to achieve the bottom switch tag, presumably we have encountered in some applications above this effect, the most typical is the micro-letter, you can slide around the page, you can click on the tab page sliding page, how they achieve it, This blog to simply introduce how to achieve click on the bottom of the Switch tab page.
Let's take a look at the effect we want to achieve:
This kind of page implementation is actually very simple, first we start from the layout:
Divided into three parts
First part : Top navigation bar layout
Part II : Middle display content layout
Part III : Bottom label layout
/bottomtabdemo/res/layout/activity_main.xml
<framelayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "Match_parent" android:layout_height= "Match_parent" > <relativelayout android:id= "@+id/rl_main" Android:layout_width= "Mat" Ch_parent "android:layout_height=" Match_parent "> <!--top--> <relativelayout android:id=" @+i D/top_tab "android:layout_width=" match_parent "android:layout_height=" 50dip "android:background=" @color/topbar _BG "> <imageview android:id=" @+id/iv_logo "android:layout_width=" Wrap_content "Android:layout_" height= "Wrap_content" android:layout_centerinparent= "true" android:focusable= false "android:src=" @drawable /zhidao_logo "android:contentdescription=" @null "/> </RelativeLayout> <!--bottom tab--> &L T
LinearLayout android:id= "@+id/ll_bottom_tab" android:layout_width= "match_parent" android:layout_height= "54DP" Android:layout_alignpareNtbottom= ' true ' android:gravity= ' center_vertical ' android:orientation= ' horizontal ' android:baselinealigned= ' tr UE "> <relativelayout android:id=" @+id/rl_know "android:layout_width=" 0DP "android:layout_height = "Wrap_content" android:layout_weight= "1.0" > <imageview android:id= "@+id/iv_know" android:l Ayout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_centerhorizontal= "true" a ndroid:src= "@drawable/btn_know_nor" android:contentdescription= "@null"/> <textview android:id= "@+ Id/tv_know "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android:layout_belo" w= "@id/iv_know" android:layout_centerhorizontal= "true" android:text= "@string/bottom_tab_know" Android:te
Xtcolor= "@color/bottomtab_normal" android:textsize= "12sp"/> </RelativeLayout> <relativelayout Android:id= "@+id/rL_want_know "android:layout_width=" 0DP "android:layout_height=" wrap_content "android:layout_weight=" 1.0 "&G"
T <imageview android:id= "@+id/iv_i_want_know" android:layout_width= "Wrap_content" android:layout_height = "Wrap_content" android:layout_centerhorizontal= "true" android:src= "@drawable/btn_wantknow_nor" Android: contentdescription= "@null"/> <textview android:id= @+id/tv_i_want_know "android:layout_width=" WR Ap_content "android:layout_height=" wrap_content "android:layout_below=" @+id/iv_i_want_know "Android:layo" Ut_centerhorizontal= "true" android:text= "@string/bottom_tab_wantknow" android:textcolor= "@color/bottomtab_norm
Al "android:textsize=" 12sp "/> </RelativeLayout> <relativelayout android:id=" @+id/rl_me " Android:layout_width= "0DP" android:layout_height= "wrap_content" android:layout_weight= "1.0" >
; ImageView Android:id= "@+id/iv_me" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Andr
Oid:layout_centerhorizontal= "true" android:src= "@drawable/btn_my_nor" android:contentdescription= "@null"/> <textview android:id= "@+id/tv_me" android:layout_width= "Wrap_content" android:layout_he ight= "Wrap_content" android:layout_below= "@+id/iv_me" android:layout_centerhorizontal= "true" Android:tex t= "@string/bottom_tab_my" android:textcolor= "@color/bottomtab_normal" android:textsize= "12sp"/> </r Elativelayout> </LinearLayout> <!--content section, fragment switch--> <linearlayout android:id= "@+id /content_layout "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android:layout_above"
= "@+id/line" android:layout_below= "@+id/top_tab" android:orientation= "vertical" > </LinearLayout> <view Android:id= "@+id/line" android:layout_width= "match_parent" android:layout_height= "1DP" android:layout_above= "@id/ll_bott
Om_tab "android:background=" @color/line "/> </RelativeLayout> </FrameLayout>
This is the layout code, and here's how to switch fragment by clicking the tag:
We will find that the initial time is to select the first tab, the picture and the color of the font is different from the other two tabs, so what we have to do is to switch the label, change the status of the label
Main change two content:
Then we switch the tabs to show the different fragment, where we have three fragment, so we define three different fragment interfaces:
/bottomtabdemo/src/com/xiaowu/bottomtab/demo/zhidaofragment.java
/bottomtabdemo/src/com/xiaowu/bottomtab/demo/iwantknowfragment.java
/bottomtabdemo/src/com/xiaowu/bottomtab/demo/mefragment.java
Each fragment corresponds to a different layout file:
/bottomtabdemo/res/layout/main_tab1_fragment.xml
/bottomtabdemo/res/layout/main_tab2_fragment.xml
/bottomtabdemo/res/layout/main_tab3_fragment.xml
OK, after these definitions, we will write the switch code in the main interface, how to switch to fragment, define the following methods:
/** *
Add or show fragments
* *
@param transaction
* @param fragment
/private void Addorshowfragment ( Fragmenttransaction transaction,
Fragment Fragment) {
if (currentfragment = Fragment) return
;
if (!fragment.isadded ()) {//If the current fragment is not added, add it to the Fragment manager
Transaction.hide (currentfragment)
. Add ( R.id.content_layout, fragment). commit ();
else {
transaction.hide (currentfragment). Show (fragment). commit ();
Currentfragment = fragment;
}
The complete code is as follows:
/bottomtabdemo/src/com/xiaowu/bottomtab/demo/mainactivity.java
Package Com.xiaowu.bottomtab.demo;
Import Android.os.Bundle;
Import android.support.v4.app.Fragment;
Import android.support.v4.app.FragmentActivity;
Import android.support.v4.app.FragmentTransaction;
Import Android.view.View;
Import Android.view.View.OnClickListener;
Import Android.widget.ImageView;
Import Android.widget.RelativeLayout;
Import Android.widget.TextView; /** * Main Activity * * @author wwj_748 * */public class Mainactivity extends fragmentactivity implements Onclickl
Istener {///three tab layout private Relativelayout knowlayout, Iwantknowlayout, melayout;
The bottom tab toggles the Fragment private Fragment knowfragment, Iwantknowfragment, Mefragment, currentfragment;
Bottom label Pictures private ImageView knowimg, iwantknowimg, meimg;
Bottom label text private TextView knowtv, IWANTKNOWTV, MeTV;
@Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
Setcontentview (R.layout.activity_main);
Initui (); INittab ();
/** * Initialize UI */private void Initui () {knowlayout = (relativelayout) Findviewbyid (R.id.rl_know);
Iwantknowlayout = (relativelayout) Findviewbyid (R.id.rl_want_know);
Melayout = (relativelayout) Findviewbyid (R.id.rl_me);
Knowlayout.setonclicklistener (this);
Iwantknowlayout.setonclicklistener (this);
Melayout.setonclicklistener (this);
Knowimg = (ImageView) Findviewbyid (R.id.iv_know);
Iwantknowimg = (ImageView) Findviewbyid (R.id.iv_i_want_know);
Meimg = (ImageView) Findviewbyid (R.id.iv_me);
KNOWTV = (TextView) Findviewbyid (R.id.tv_know);
IWANTKNOWTV = (TextView) Findviewbyid (R.id.tv_i_want_know);
MeTV = (TextView) Findviewbyid (R.id.tv_me); /** * Initialize bottom label/private void InitTab () {if (knowfragment = null) {knowfragment = new Zhidaofragme
NT (); } if (!knowfragment.isadded ()) {//COMMIT transaction Getsupportfragmentmanager (). BeginTransaction (). Add (R.id.conte
Nt_layout, Knowfragment). commit ();
Record current Fragment currentfragment = Knowfragment;
Set the change of picture text Knowimg.setimageresource (r.drawable.btn_know_pre);
Knowtv.settextcolor (Getresources (). GetColor (r.color.bottomtab_press));
Iwantknowimg.setimageresource (R.drawable.btn_wantknow_nor);
Iwantknowtv.settextcolor (Getresources (). GetColor (R.color.bottomtab_normal));
Meimg.setimageresource (R.drawable.btn_my_nor);
Metv.settextcolor (Getresources (). GetColor (R.color.bottomtab_normal)); @Override public void OnClick (view view) {switch (View.getid ()) {case R.id.rl_know://Know Clickt
Ab1layout ();
Break
Case R.id.rl_want_know://I want to know Clicktab2layout ();
Break
Case R.id.rl_me://My clicktab3layout ();
Break
Default:break; }/** * Click on the first tab/private void Clicktab1layout () {if (knowfragment = null) {knowfragment = new
Zhidaofragment (); } addorshowfragment (Getsupportfragmentmanager (). BegintransaCtion (), knowfragment);
Set the Bottom tab change Knowimg.setimageresource (R.drawable.btn_know_pre);
Knowtv.settextcolor (Getresources (). GetColor (r.color.bottomtab_press));
Iwantknowimg.setimageresource (R.drawable.btn_wantknow_nor);
Iwantknowtv.settextcolor (Getresources (). GetColor (R.color.bottomtab_normal));
Meimg.setimageresource (R.drawable.btn_my_nor);
Metv.settextcolor (Getresources (). GetColor (R.color.bottomtab_normal)); /** * Click on the Second tab */private void Clicktab2layout () {if (iwantknowfragment = null) {Iwantknowfragment
= new Iwantknowfragment ();
} addorshowfragment (Getsupportfragmentmanager (). BeginTransaction (), iwantknowfragment);
Knowimg.setimageresource (R.drawable.btn_know_nor);
Knowtv.settextcolor (Getresources (). GetColor (R.color.bottomtab_normal));
Iwantknowimg.setimageresource (R.drawable.btn_wantknow_pre);
Iwantknowtv.settextcolor (Getresources (). GetColor (r.color.bottomtab_press)); Meimg.setimageresource (R.DRawable.btn_my_nor);
Metv.settextcolor (Getresources (). GetColor (R.color.bottomtab_normal)); /** * Click on the Third tab */private void Clicktab3layout () {if (mefragment = null) {mefragment = new MEFRAGM
ENT ();
} addorshowfragment (Getsupportfragmentmanager (). BeginTransaction (), mefragment);
Knowimg.setimageresource (R.drawable.btn_know_nor);
Knowtv.settextcolor (Getresources (). GetColor (R.color.bottomtab_normal));
Iwantknowimg.setimageresource (R.drawable.btn_wantknow_nor);
Iwantknowtv.settextcolor (Getresources (). GetColor (R.color.bottomtab_normal));
Meimg.setimageresource (R.drawable.btn_my_pre);
Metv.settextcolor (Getresources (). GetColor (r.color.bottomtab_press)); /** * Add or show fragments * * @param transaction * @param fragment/private void Addorshowfragment (Fragmentt
Ransaction transaction, Fragment Fragment) {if (currentfragment = Fragment) return; if (!fragment.isadded ()) {//If the current fragment is not added, add to FRagment Manager transaction.hide (currentfragment). Add (R.id.content_layout, Fragment). commit ();
else {transaction.hide (currentfragment). Show (fragment). commit ();
} currentfragment = fragment; }
}
SOURCE Download: Http://xiazai.jb51.net/201612/yuanma/AndroidBottomTab (jb51.net). rar
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.