Android Practice Note (5) --- Implementation of the navigation bar at the bottom of Fragment, android --- fragment

Android Practice Note (5) --- Implementation of the navigation bar at the bottom of Fragment, android --- fragment

Android Practice Note (5) --- Implementation of the navigation bar at the bottom of Fragment

-- Reprinted with the source: coder-pig

In Part 4, we will review the basic concepts of Fragment. In this section, let's take a simple example of the Fragment application!

It is to use Fragment to implement a simple bottom navigation bar, first paste it below:

It looks very simple, and the implementation is also very simple! Next, let's look at the implementation process diagram:

Implementation flowchart:

After reading the flowchart, do you have a rough idea? Then you can write the code:

Code implementation:

① Write the layout first. The layout is very simple. A FrameLayout is used to put the Fragment, and a large LinearLayout at the bottom.

There are three small items. The layout of each Item is as follows:

<RelativeLayout android: id = "@ + id/setting_layout" android: layout_width = "0dp" android: layout_height = "match_parent" android: layout_weight = "1"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_centerVertical = "true" android: orientation = "vertical"> <ImageView 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: layout_height = "wrap_content" android: layout_gravity = "center_horizontal" android: text = "Settings" android: textColor = "#7597B3"/> </LinearLayout> </RelativeLayout>

There are two more copies, and you can modify the file. 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_weight = "1"> </FrameLayout> <LinearLayout android: layout_width = "match_parent" android: layout_height = "60dp" android: background = "# FFFFFF"> <RelativeLayout android: id = "@ + id/course_layout" android: layout_width = "0dp" android: layout_height = "match_parent" android: layout_weight = "1"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_centerVertical = "true" android: orientation = "vertical"> <ImageView android: id = "@ + id/course_image" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_horizontal" android: src = "@ drawable/ic_tabbar_course_normal"/> <TextView android: id = "id/course_text" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_horizontal" android: text = "calendar" android: textColor = "#7597B3"/> </LinearLayout> </RelativeLayout> <RelativeLayout android: id = "@ + id/found_layout" android: layout_width = "0dp" android: layout_height = "match_parent" android: layout_weight = "1"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: 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 = "" android: textColor = "#7597B3"/> </LinearLayout> </RelativeLayout> <RelativeLayout android: id = "@ + id/setting_layout" android: layout_width = "0dp" android: layout_height = "match_parent" android: layout_weight = "1"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: true = "android: orientation = "vertical"> <ImageView android: id = "@ + id/setting_image" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_horizontal" android: src = "@ drawable/danger"/> <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: textColor = "#7597B3"/> </LinearLayout> </RelativeLayout> </LinearLayout>

(2) write three Fragment la S. Here is a TextView.

Write three copies, copy two more, 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 = "calendar Fragment"/> </LinearLayout>

③ Write three implementation classes of Fragment, and change the Fragment loaded by inflate in triplicate.

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 I wrote MainActivity, which is also very simple. Let's take a look at it and I will not explain it much.

It defines several methods, initialize options, select processing methods, 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. te XtView; public class MainActivity extends FragmentActivity implements OnClickListener {// define three Fragment objects: private Fragment1 fg1; private Fragment2 fg2; private Fragment3 fg3; // frame layout object, private FrameLayout flayout is the container used to store Fragment; // defines the three la s in the bottom navigation bar: private RelativeLayout course_layout; private RelativeLayout found_layout; private RelativeLayout settings_layout; // define the ImageView and TextViewprivate ImageView course in the bottom navigation bar _ Image; private ImageView found_image; private ImageView settings_image; private TextView course_text; private TextView settings_text; private TextView found_text; // defines the private int whirt = 0 xFFFFFFFF; private int gray = 0xFF7597B3; private int blue = 0xFF0AB2FB; // defines the FragmentManager object fManager; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState ); SetContentView (R. layout. activity_main); fManager = getsuppfrfragmentmanager (); initViews ();} // complete the 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 onCli Ck event @ Overridepublic void onClick (View view) {switch (view. getId () {case R. id. course_layout: setChioceItem (0); break; case R. id. found_layout: setChioceItem (1); break; case R. id. setting_layout: setChioceItem (2); break; default: break; }}// defines public void setChioceItem (int index) for processing a selected item) {// reset option + hide all FragmentFragmentTransaction transaction = fManager. beginTransaction (); clearChioce (); hideFragments (tra Nsaction); 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, create and add it to fg1 = new Fragment1 (); transaction. add (R. id. content, fg1);} else {// transaction is displayed directly if MessageFragment is not empty. show (fg1);} break; case 1: found_image.setI MageResource (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, create and add it to fg2 = new Fragment2 (); transaction. add (R. id. content, fg2);} else {// transaction is displayed directly if MessageFragment is not empty. 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, create one and add it to fg3 = new Fragment3 (); transaction. add (R. id. content, fg3);} else {// transaction is displayed directly if MessageFragment is not empty. show (fg3);} break;} transaction. commit ();} // hide all Fragment to 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 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 );}}

Last few words:

The code is just a little bit above, and the parsing is also very detailed. You should be able to understand it after two times,

In addition, it should be noted that it is a v4 package or an app package when the Fragment-related classes are imported!

It is very error-prone. For the Fragment of the app and v4 package, see the analysis of note (3!

Well, this section is written here. The next section will implement simple applications of Fragment and ViewPager!

Coming soon!

Download the code in this section:

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