Android ui-implements the bottom Toggle tab (fragment)

Android ui-implements the bottom Toggle tab (fragment)

Prefacethis blog to share a UI effect-to achieve the bottom of the switch label, presumably everyone in some applications have encountered such a effect, the most typical is the ability to swipe left and right to switch pages. You can also click on the tabs to swipe the page, how they are implemented, this blog in order to simply explain how to implement click on the bottom of the Switch tab. Let's take a look at what we want to achieve: This kind of page is actually very easy to implement, first we start with the layout: Divided into three parts First part: Top navigation bar layout Part II: Central 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_wid            Th= "Match_parent" android:layout_height= "Match_parent" > <!--top--<relativelayout            Android:id= "@+id/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-- <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= "true" > <relativelayout android:id= "@+id /rl_know "android:layout_width=" 0DP "android:layout_height=" Wrap_content "and                    Roid:layout_weight= "1.0" > <imageview android:id= "@+id/iv_know" Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" Android:la Yout_centerhorizontal= "true" android:src= "@drawable/btn_know_nor" android:contentde scription= "@null"/> <textview android:id= "@+id/tv_know" Android : Layout_width= "Wrap_contEnt "android:layout_height=" wrap_content "android:layout_below=" @id/iv_know "                    Android:layout_centerhorizontal= "true" android:text= "@string/bottom_tab_know" Android:textcolor= "@color/bottomtab_normal" android:textsize= "12sp"/> </relativ elayout> <relativelayout android:id= "@+id/rl_want_know" Android:layout_widt                H= "0DP" android:layout_height= "wrap_content" android:layout_weight= "1.0" >                    <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= "Wrap_content" an droid:layout_height= "Wrap_content" android:layout_below= "@+id/iv_i_want_know" Androi D:layout_centerhorizontal= "true" android:text= "@string/bottom_tab_wantknow" Android:            Textcolor= "@color/bottomtab_normal" 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:lay out_height= "Wrap_content" android:layout_centerhorizontal= "true" android:src= "@drawa         Ble/btn_my_nor "           android:contentdescription= "@null"/> <textview Android : id= "@+id/tv_me" android:layout_width= "wrap_content" android:layout_height= "Wrap_con                    Tent "android:layout_below=" @+id/iv_me "android:layout_centerhorizontal=" true "                    android:text= "@string/bottom_tab_my" android:textcolor= "@color/bottomtab_normal" Android:textsize= "12SP"/> </RelativeLayout> </LinearLayout> <!--content Part. Fragment Switch--<linearlayout android:id= "@+id/content_layout" Android:layout_width= "mat Ch_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:layou T_above= "@id/ll_bottom_tab" android:background= "@color/line"/> </RelativeLayout> </framelayo Ut>

The above is the layout code, the following is how to switch fragment by clicking the tag: we will find that the initial time is to select the first tab, the color of the picture and the font is different from the other two tabs, so we have to do is to switch the label when the change in the status of the label is mainly changed two content:

• Image
• Text color

then we switch the tab to show the different fragment, here 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 switching code on the main interface, how to switch the fragment, define the following methods:

/** * Add or show fragments *  * @param transaction * @param fragment */private void Addorshowfragment (Fragmenttransaction transacti On,fragment Fragment) {if (currentfragment = = Fragment) return;if (!fragment.isadded ()) {//Assuming the current Fragment is not joined. Added to Fragment manager transaction.hide (currentfragment). Add (R.id.content_layout, Fragment). commit ();} else {transaction.hide (currentfragment). Show (fragment). commit ();} Currentfragment = fragment;}

complete code such as the following:/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 MainAc Tivity extends Fragmentactivity implements Onclicklistener {//three tab layout private Relativelayout knowlayout, Iwantknowlayout, melayout;//bottom label switch fragmentprivate Fragment knowfragment, iwantknowfragment, Mefragment, currentfragment;//bottom label Picture private ImageView knowimg, iwantknowimg, meimg;//bottom label text private TextView knowtv, IWANTKNOWTV, MeTV; @Overrideprotected 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 zhidaofragment ();} if (!knowfragment.isadded ()) {//commits transaction Getsupportfragmentmanager (). BeginTransaction (). Add (R.id.content_layout, knowfragment). commit ();//record Current fragmentcurrentfragment = 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));}} @Overridepublic void OnClick (view view) {switch (View.getid ()) {case R.id.rl_know://Know Clicktab1layout (); break;case R.id.rl_want_know://I want to know Clicktab2layout (); Break;case R.id.rl_me://My Clicktab3layout (); break;default:break;}} /** * Click 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 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 the Third tab */private void Clicktab3layout () {if (mefragment = = null) {mefragment = new mefragment ();} 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 (fragmenttransaction transaction, Fragment Fragment) {if (currentfragment = = Fragment) return;if (!fragment.isadded ()) {//Assuming the current Fragment is not added, Added to Fragment manager transaction.hide (currentfragment). Add (R.id.content_layout, Fragment). commit ();} else {transaction.hide (currentfragment). Show (fragment). commit ();} Currentfragment = Fragment;}}

source code Download: http://download.csdn.net/detail/wwj_748/8495621

reprint Please specify: It_xiao Wizard

Blog Address: http://blog.csdn.net/wwj_748
Mobile Development Enthusiast Group: 299402133

Android ui-implements the bottom Toggle tab (fragment)