Android UI Implementation bottom Toggle tab fragment_android

Source: Internet
Author: User
Tags commit getcolor

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:

    • Image
    • Text color

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.