Android activity and fragment implement bottom navigator _android

Single activity multi-fragment implement bottom Navigator

Recently because of Android basic knowledge to explain the need to use a single activity more than fragment to achieve similar QQ bottom Navigator example, this development mode is widely used in app development, such as QQ, micro-letter, Sina, etc., on the Android bottom navigation bar to achieve a very large number of ways, Implementation is also a variety of, and Google in its own launch of the material design also increased bottom navigation navigation control, more simple to achieve, and support the dynamic effect is more cool, but because it is the basis of knowledge, so the intention is to achieve through customization, Do not use bottom navigation (if the actual project development can consider the use of HA ~ ~), I hope to help beginners.

Bottomnavigationbar Address: Https://github.com/Ashok-Varma/BottomNavigation

Analysis

The overall area is divided into two parts: the bottom of the navigation area and the rest of the content area, the content area using fragment most UI display, the bottom navigation area to add click Events, click the tab switch fragment, and do font color and picture switching, in the switch using Add () and hide () the way , do not use Replase (), as for the difference between the two, here is no longer explained, interested in the words can Google.

Overall structure

The bottom navigation is usually made up of pictures and text, above for ImageView, below for TextView

Bottom navigation

Bottom Bottom

Use layout using Relativelayout, add weight, split screen width

<?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=" @dimen/bottom_height "android:background=" @ Color/base_white "android:orientation=" vertical "> <view android:layout_width=" match_parent "Android:lay" out_height= "1DP" android:background= "@color/gray_line"/> <linearlayout android:layout_width= "Match_paren T "android:layout_height=" match_parent "android:orientation=" Horizontal "> <relativelayout Android : layout_width= "0DP" android:layout_height= "Match_parent" android:layout_weight= "1" > <relativelayo UT android:id= "@+id/layout_home" android:layout_width= "wrap_content" android:layout_height= "Wrap_c"
          Ontent "android:layout_centerinparent=" true "> <imageview android:id=" @+id/img_home "
     Android:layout_width= "24DP"     android:layout_height= "24DP" android:layout_centerhorizontal= "true" android:src= "@mipmap/icon_hom
          E_pressed "/> <textview android:id= @+id/tv_home" android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_below= "@id/img_home" Android:layout_cente Rhorizontal= "true" android:text= "Home" android:textcolor= "@color/bottom_text_color_pressed" an Droid:textsize= "12SP"/> </RelativeLayout> </RelativeLayout> <relativelayout Andr Oid:layout_width= "0DP" android:layout_height= "Match_parent" android:layout_weight= "1" > <relativel Ayout android:id= "@+id/layout_health" android:layout_width= "Wrap_content" W Rap_content "android:layout_centerinparent=" true "> <imageview android:id=" @+id/img_health "Android:layoUt_width= "24DP" android:layout_height= "24DP" android:layout_centerhorizontal= "true" Android: src= "@mipmap/icon_health_normal"/> <textview android:id= "@+id/tv_health" android:layou
          T_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_below= "@id/img_health" Android:layout_centerhorizontal= "true" android:text= "health" android:textcolor= "@color/bottom_text_c Olor_normal "android:textsize=" 12sp "/> </RelativeLayout> </RelativeLayout> <re Lativelayout android:layout_width= "0DP" android:layout_height= "Match_parent" android:layout_weight= "1" &

      Gt <relativelayout android:id= "@+id/layout_msg" android:layout_width= "Wrap_content" android:layout _height= "Wrap_content" android:layout_centerinparent= "true" > <imageview android:id= "@+id/"
    Img_msg "      Android:layout_width= "24DP" android:layout_height= "24DP" android:layout_centerhorizontal= "true" android:src= "@mipmap/icon_msg_normal"/> <textview android:id= "@+id/tv_msg" a Ndroid:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_below= "@id/img_ Msg "android:layout_centerhorizontal=" true "android:text=" message "android:textcolor=" @color/bott
    Om_text_color_normal "android:textsize=" 12sp "/> </RelativeLayout> </RelativeLayout> > <relativelayout android:layout_width= "0dp" android:layout_height= "Match_parent" Android: layout_weight= "1" > <relativelayout android:id= "@+id/layout_usercenter" android:layout_width= " Wrap_content "android:layout_height=" Wrap_content "android:layout_centerinparent=" true "> <I Mageview AndroId:id= "@+id/img_usercenter" android:layout_width= "24DP" android:layout_height= "24DP" Android : Layout_centerhorizontal= "true" android:src= "@mipmap/icon_user_normal"/> <textview and
          Roid:id= "@+id/tv_usercenter" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_below= "@id/img_usercenter" android:layout_centerhorizontal= "true" Android:tex T= "My" android:textcolor= "@color/bottom_text_color_normal" android:textsize= "12sp"/> </re

 lativelayout> </RelativeLayout> > </LinearLayout> </LinearLayout>

Activity_main.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
  android:id=" @+id/activity_main "
  android:layout_width=" match_parent "
  android:layout_" height= "Match_parent"
  android:orientation= "vertical"
  >
  <framelayout
    android:layout_width = "Match_parent"
    android:layout_height= "0DP"
    android:layout_weight= "1"
    android:id= "@+id/frame_ Content "
    />
  <include layout=" @layout/layout_bottom "/>

</LinearLayout>

Mainactivity

public class Mainactivity extends Baseactivity implements View.onclicklistener {private relativelayout layout_home;
  Private Relativelayout Layout_health;
  Private Relativelayout layout_msg;

  Private Relativelayout Layout_usercenter;
  Private ImageView Img_home;
  Private ImageView Img_health;
  Private ImageView img_msg;

  Private ImageView Img_usercenter;
  Private TextView Tv_home;
  Private TextView Tv_health;
  Private TextView tv_msg;

  Private TextView Tv_usercenter;
  Private fragment[] fragments;
  private int currentindex;

  private int index;
  private int selectcolor;



  private int unselectcolor;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (R.layout.activity_main);
  Init ();
    @Override public void init () {initviews ();
    Initevent ();

  InitData ();
    public void Initviews () {layout_health= (relativelayout) Findviewbyid (r.id.layout_health); Layout_home= (relativelayout) Findviewbyid (r.id.layout_home);
    Layout_msg= (relativelayout) Findviewbyid (r.id.layout_msg);

    Layout_usercenter= (relativelayout) Findviewbyid (r.id.layout_usercenter);
    Img_home= (ImageView) Findviewbyid (r.id.img_home);
    Img_health= (ImageView) Findviewbyid (r.id.img_health);
    Img_msg= (ImageView) Findviewbyid (r.id.img_msg);

    Img_usercenter= (ImageView) Findviewbyid (r.id.img_usercenter);
    Tv_home= (TextView) Findviewbyid (r.id.tv_home);
    Tv_health= (TextView) Findviewbyid (r.id.tv_health);
    Tv_msg= (TextView) Findviewbyid (r.id.tv_msg);
  Tv_usercenter= (TextView) Findviewbyid (r.id.tv_usercenter);
    public void Initevent () {Layout_home.setonclicklistener (this);
    Layout_health.setonclicklistener (this);
    Layout_msg.setonclicklistener (this);
  Layout_usercenter.setonclicklistener (this);
    public void InitData () {selectcolor=getresources (). GetColor (r.color.bottom_text_color_pressed); Unselectcolor=getresources (). GetColor (R.color.bottom_Text_color_normal);
    Fragments=new Fragment[4];
    Fragments[0]= homefragment.getinstance ();
    Fragments[1]= healthfragment.getinstance ();
    Fragments[2]= msgfragment.getinstance ();
    Fragments[3]= usercenterfragment.getinstance ();
  Getsupportfragmentmanager (). BeginTransaction (). Add (R.id.frame_content,fragments[0)). commit (); 
        @Override public void OnClick (view view) {switch (View.getid ()) {case r.id.layout_home:index=0;
        Settabs (index);
      Break
        Case R.id.layout_health:index=1;
        Settabs (index);
      Break
        Case r.id.layout_msg:index=2;
        Settabs (index);
      Break
        Case r.id.layout_usercenter:index=3;
        Settabs (index);
    Break
      } if (Currentindex!=index) {Fragmentmanager fm=getsupportfragmentmanager ();
      Fragmenttransaction ft=fm.begintransaction ();
      Ft.hide (Fragments[currentindex]); if (!fragments[index].isadded ()) {Ft.adD (R.id.frame_content,fragments[index]);
    } ft.show (Fragments[index]). commit ();
  } Currentindex=index;
    public void Settabs (int pos) {resetcolor ();
        Switch (POS) {case 0:img_home.setimageresource (r.mipmap.icon_home_pressed);
        Tv_home.settextcolor (Selectcolor);
      Break
        Case 1:img_health.setimageresource (r.mipmap.icon_health_pressed);
        Tv_health.settextcolor (Selectcolor);
      Break
        Case 2:img_msg.setimageresource (r.mipmap.icon_msg_pressed);
        Tv_msg.settextcolor (Selectcolor);
      Break
        Case 3:img_usercenter.setimageresource (r.mipmap.icon_user_pressed);
        Tv_usercenter.settextcolor (Selectcolor);
    Break
    } public void Resetcolor () {img_home.setimageresource (r.mipmap.icon_home_normal);
    Img_health.setimageresource (R.mipmap.icon_health_normal);
    Img_msg.setimageresource (R.mipmap.icon_msg_normal); Img_usercenter.setimageresource (R. Mipmap.icon_user_normal);
    Tv_home.settextcolor (Unselectcolor);
    Tv_health.settextcolor (Unselectcolor);
    Tv_msg.settextcolor (Unselectcolor);

  Tv_usercenter.settextcolor (Unselectcolor);

 }

}

Four fragment is just a simple layout, which placed a textview, here is no longer posted out of o.o.

Effect Chart preview:

Effect chart

Thank you for reading, I hope to help you, thank you for your support for this site!