Android Internship notes (5)---the implementation of the bottom navigation bar of fragment

Android Internship notes (5)---the implementation of the bottom navigation bar of fragment

--Reprint Please specify Source: Coder-pig

In Part 4 we reviewed the basic concepts of fragment, and in this section we will learn the simple examples of fragment applications.

is to use fragment to achieve a simple bottom navigation bar, first paste:

It looks simple, and it's easy to implement, huh! Then come down and look at the flowchart of the implementation:

Implementation Flowchart:

After reading the flowchart is not a general idea, then the code to start writing it:

Code implementation:

① first write layout, layout is very simple, a framelayout used to put fragment, the bottom of a large linearlayout

With three small item, each item is laid out as follows:

<relativelayout android:id= "@+id/setting_layout" android:layout_width= "0DP" Android                  oid:layout_height= "Match_parent" android:layout_weight= "1" > <linearlayout Android:layout_width= "Match_parent" android:layout_height= "Wrap_content" Android:lay                      Out_centervertical= "true" android:orientation= "vertical" > <imageview Android:id= "@+id/setting_image" android:layout_width= "Wrap_content" a ndroid:layout_height= "Wrap_content" android:layout_gravity= "Center_horizontal" a ndroid:src= "@drawable/ic_tabbar_settings_normal"/> <textview android:id= "@+ Id/setting_text "android:layout_width=" wrap_content "android:layout_height=" wrap               _content "       Android:layout_gravity= "Center_horizontal" android:text= "Settings" Android:text   Color= "#7597B3"/> </LinearLayout> </RelativeLayout>

copy more than two, change the film, the text resources can be, the complete layout code is as follows:

Activity_main.xml

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "Match_parent" android:layout_height= "match_parent" android:orientation= "vertical" > <framelayout android:id= "@+ Id/content "android:layout_width=" match_parent "android:layout_height=" 0DP "Android:layout_weig ht= "1" > </FrameLayout> <linearlayout android:layout_width= "Match_parent" Android: layout_height= "60DP" android:background= "#FFFFFF" > <relativelayout android:id= "@+i D/course_layout "android:layout_width=" 0DP "android:layout_height=" Match_parent "an                  droid:layout_weight= "1" > <linearlayout android:layout_width= "match_parent" android:layout_height= "Wrap_content" android:layout_centervertical= "true" Andro id:orientation= "Vertical"> <imageview android:id=" @+id/course_image "android:l Ayout_width= "Wrap_content" android:layout_height= "Wrap_content" Android:layout_g Ravity= "Center_horizontal" android:src= "@drawable/ic_tabbar_course_normal"/> & Lt                      TextView android:id= "@+id/course_text" android:layout_width= "Wrap_content"                      android:layout_height= "Wrap_content" android:layout_gravity= "Center_horizontal" android:text= "Schedule" android:textcolor= "#7597B3"/> </linearlayout&gt          ; </RelativeLayout> <relativelayout android:id= "@+id/found_layout" Andro                Id:layout_width= "0DP" android:layout_height= "Match_parent" android:layout_weight= "1" > &Lt                  LinearLayout android:layout_width= "match_parent" android:layout_height= "Wrap_content"                    Android:layout_centervertical= "true" android:orientation= "vertical" > <imageview android:id= "@+id/found_image" android:layout_width= "wrap_content "Android:layout_height=" wrap_content "android:layout_gravity=" center_horizontal                      "Android:src=" @drawable/ic_tabbar_found_normal "/> <textview Android:id= "@+id/found_text" android:layout_width= "Wrap_content" Android: layout_height= "Wrap_content" android:layout_gravity= "Center_horizontal" Android: text= "found" android:textcolor= "#7597B3"/> </LinearLayout> </relative           Layout>               <relativelayout android:id= "@+id/setting_layout" android:layout_width= "0DP" android:layout_height= "Match_parent" android:layout_weight= "1" > <linearlayou                  T android:layout_width= "match_parent" android:layout_height= "Wrap_content" Android:layout_centervertical= "true" android:orientation= "vertical" > <image                      View android:id= "@+id/setting_image" android:layout_width= "Wrap_content"                      android:layout_height= "Wrap_content" android:layout_gravity= "Center_horizontal"                      android:src= "@drawable/ic_tabbar_settings_normal"/> <textview Android:id= "@+id/setting_text" android:layout_width= "Wrap_content" Android:layo ut_height= "Wrap_content"                      Android:layout_gravity= "Center_horizontal" android:text= "Settings"                            Android:textcolor= "#7597B3"/> </LinearLayout> </RelativeLayout>   </LinearLayout></LinearLayout>

② then write three fragment layout, this look you need, here is a textview

Write three copies, copy more two, change the color and text

Fg1.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:background= "#FAECD8"    android:orientation= "vertical" >        <textview         Android:layout_width= "Wrap_content"        android:layout_height= "wrap_content"        android:text= "Schedule Fragment"    /></linearlayout>

③ then write three fragment of the implementation class, the same three parts, change inflate loaded fragment can

Fragment1.java

Package Com.jay.example.fragmentforhost;import Android.os.bundle;import Android.support.v4.app.fragment;import Android.view.layoutinflater;import Android.view.view;import Android.view.viewgroup;public class Fragment1 extends Fragment {@Overridepublic View oncreateview (layoutinflater inflater, ViewGroup container,bundle savedinstancestate) { View view = Inflater.inflate (R.layout.fg1, container,false); return view;}}

④ then to Mainactivity's writing, but also very simple, see for yourself, not much explanation

Just define a few methods, initialize the options, check the handling, and hide all fragment methods!

Mainactivity.java

Package Com.jay.example.fragmentforhost;import Android.os.bundle;import android.support.v4.app.FragmentActivity; Import Android.support.v4.app.fragmentmanager;import Android.support.v4.app.fragmenttransaction;import Android.view.view;import Android.view.view.onclicklistener;import Android.widget.framelayout;import Android.widget.imageview;import Android.widget.relativelayout;import Android.widget.textview;public Class Mainactivity extends Fragmentactivity implements onclicklistener{//define 3 fragment objects private Fragment1 fg1;private Fragment2 fg2;private Fragment3 fg3;//Frame Layout object, is the container used to store fragment private framelayout flayout;//define the bottom navigation bar of the three layout private Relativelayout course_layout;private relativelayout found_layout;private relativelayout settings_layout;// Define ImageView and Textviewprivate in the bottom navigation bar ImageView course_image;private ImageView found_image;private ImageView settings_ Image;private TextView course_text;private TextView settings_text;private TextView found_text;//define the color value to use private int Whirt = 0xFFFFFFFF;private int gray = 0xff7597b3;private int blue =0xff0ab2fb;//define Fragmentmanager object Fragmentmanager fmanager;@ overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview ( R.layout.activity_main); Fmanager = Getsupportfragmentmanager (); Initviews ();} Complete initialization of the component public void Initviews () {course_image = (ImageView) Findviewbyid (r.id.course_image); found_image = (ImageView ) Findviewbyid (r.id.found_image); settings_image = (ImageView) Findviewbyid (r.id.setting_image); Course_text = ( TextView) Findviewbyid (r.id.course_text); found_text = (TextView) Findviewbyid (r.id.found_text); Settings_text = ( TextView) Findviewbyid (r.id.setting_text); course_layout = (relativelayout) Findviewbyid (r.id.course_layout); found_ Layout = (relativelayout) Findviewbyid (r.id.found_layout); settings_layout = (relativelayout) Findviewbyid ( R.id.setting_layout); Course_layout.setonclicklistener (this), Found_layout.setonclicklistener (this); Settings_layout.setonclicklistener (this);} Rewrite OnclIck event @overridepublic void OnClick (view view) {switch (View.getid ()) {case R.id.course_layout:setchioceitem (0);    Case R.id.found_layout:setchioceitem (1);    Break    Case R.id.setting_layout:setchioceitem (2);    Break Default:break;}} Defines an item that is selected after processing public void Setchioceitem (int index) {//reset option + Hide all fragmentfragmenttransaction transaction =  Fmanager.begintransaction (); Clearchioce (); hidefragments (transaction); switch (index) {case 0:course_image.setimageresource (r.drawable.ic_  tabbar_course_pressed);            Course_text.settextcolor (blue); Course_layout.setbackgroundresource (R.drawable.ic_tabbar_bg_click);                  if (FG1 = = null) {//If FG1 is empty, one is created and added to the interface fg1 = new Fragment1 ();              Transaction.add (R.id.content, FG1);              } else {//if messagefragment is not empty, it is displayed directly transaction.show (FG1);  } break; Case 1:found_image.setimageresource (R.drawable.ic_tabbar_found_pressed);            Found_text.settextcolor (blue); Found_layout.setbackgroundresource (R.drawable.ic_tabbar_bg_click);                  if (FG2 = = null) {//If FG1 is empty, one is created and added to the interface fg2 = new Fragment2 ();              Transaction.add (R.id.content, FG2);              } else {//if messagefragment is not empty, it is displayed directly transaction.show (FG2);       } break;  Case 2:settings_image.setimageresource (r.drawable.ic_tabbar_settings_pressed);            Settings_text.settextcolor (blue); Settings_layout.setbackgroundresource (R.drawable.ic_tabbar_bg_click);                  if (FG3 = = null) {//If FG1 is empty, one is created and added to the interface fg3 = new Fragment3 ();              Transaction.add (R.id.content, FG3);              } else {//if messagefragment is not empty, it is displayed directly transaction.show (FG3);                 } break; }transaction.commit ();} Hide all fragment, avoid fragment confusion private void Hidefragments (fragmenttransaction transaction) {if (FG1! = null) {transaction.hide (FG1);          } if (fg2! = null) {transaction.hide (FG2);          } if (FG3! = null) {transaction.hide (FG3); }}//define a method to reset all options public void Clearchioce () {course_image.setimageresource (r.drawable.ic_tabbar_course_normal); Course_layout.setbackgroundcolor (Whirt); Course_text.settextcolor (gray); Found_image.setimageresource ( R.drawable.ic_tabbar_found_normal); Found_layout.setbackgroundcolor (Whirt); Found_text.settextcolor (gray); Settings_image.setimageresource (R.drawable.ic_tabbar_settings_normal); Settings_layout.setbackgroundcolor (Whirt ); Settings_text.settextcolor (gray);}}

finally say a few words:

Code on top of a little, parsing is also very detailed, see more than two times should be able to understand,

Also note that the fragment related class when the import is V4 package or app package!

There is easy to make mistakes, about the app and V4 package fragment can see notes (3) of the analysis!

Well, this verse is written here, the next section will implement the simple application of fragment and Viewpager!

Please look forward to!

This section of the code download:

Http://pan.baidu.com/s/1gdel98B

Android Internship notes (5)---the implementation of the bottom navigation bar of fragment