Android learning notes-Implementation of the navigation bar at the bottom of the Fragment instance, androidfragment

Android learning notes-Implementation of the navigation bar at the bottom of the Fragment instance, androidfragment
1. Implementation and project directory structure:

Take a look:

Next let's take a look at ourProject directory structure:

2. Implementation Process: Step 1: write down some resource files of the options at the bottom

We can see from the figure that each click at the bottom has different effects, right! We determine whether selected is used! The resource files we want to write are: images, text, and background!

Image Drawable resources:Tab_menu_channel.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@mipmap/tab_channel_pressed" android:state_selected="true" />    <item android:drawable="@mipmap/tab_channel_normal" /></selector>

3 others!

Text Resource:Tab_menu_text.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:color="@color/text_yellow" android:state_selected="true" />    <item android:color="@color/text_gray" /></selector>

Background Resource:Tab_menu_bg.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_selected="true">        <shape>            <solid android:color="#FFC4C4C4" />        </shape>    </item>    <item>        <shape>            <solid android:color="@color/transparent" />        </shape>    </item></selector>

Step 2: compile our Activity Layout

Activity_main.xml:

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "match_parent" android: layout_height = "match_parent" tools: context = ". mainActivity "> <RelativeLayout android: id =" @ + id/ly_top_bar "android: layout_width =" match_parent "android: layout_height =" 48dp "android: background = "@ color/bg_topbar"> <TextView android: id = "@ + id/txt_topbar" android: layout_width = "match_parent" android: layout_height = "match_parent" android: layout_centerInParent = "true" android: gravity = "center" android: textSize = "18sp" android: textColor = "@ color/text_topbar" android: text = "info"/> <View android: layout_width = "match_parent" android: layout_height = "2px" android: background = "@ color/div_white" android: outputs = "true"/> </RelativeLayout> <LinearLayout android: id = "@ + id/ly_tab_bar" android: layout_width = "match_parent" android: layout_height = "56dp" android: layout_alignParentBottom = "true" android: background = "@ color/bg_white" android: orientation = "horizontal"> <TextView android: id = "@ + id/txt_channel" android: layout_width = "0dp" android: layout_height = "match_parent" android: layout_weight = "1" android: background = "@ drawable/tab_menu_bg" android: drawablePadding = "3dp" android: drawableTop = "@ drawable/tab_menu_channel" android: gravity = "center" android: padding = "5dp" android: text = "@ string/tab_menu_alert" android: textColor = "@ drawable/tab_menu_text" android: textSize = "16sp"/> <TextView android: id = "@ + id/txt_message" android: layout_width = "0dp" android: layout_height = "match_parent" android: layout_weight = "1" android: background = "@ drawable/tab_menu_bg" android: drawablePadding = "3dp" android: drawableTop = "@ drawable/tab_menu_message" android: gravity = "center" android: padding = "5dp" android: text = "@ string/tab_menu_profile" android: textColor = "@ drawable/tab_menu_text" android: textSize = "16sp"/> <TextView android: id = "@ + id/txt_better" android: layout_width = "0dp" android: layout_height = "match_parent" android: layout_weight = "1" android: background = "@ drawable/tab_menu_bg" android: drawablePadding = "3dp" android: drawableTop = "@ drawable/tab_menu_better" android: gravity = "center" android: padding = "5dp" android: text = "@ string/tab_menu_pay" android: textColor = "@ drawable/tab_menu_text" android: textSize = "16sp"/> <TextView android: id = "@ + id/txt_setting" android: layout_width = "0dp" android: layout_height = "match_parent" android: layout_weight = "1" android: background = "@ drawable/tab_menu_bg" android: drawablePadding = "3dp" android: drawableTop = "@ drawable/tab_menu_setting" android: gravity = "center" android: padding = "5dp" android: text = "@ string/tab_menu_setting" android: textColor = "@ drawable/tab_menu_text" android: textSize = "16sp"/> </LinearLayout> <View android: id = "@ + id/div_tab_bar" android: layout_width = "match_parent" android: layout_height = "2px" android: background = "@ color/div_white" android: layout_above = "@ id/ly_tab_bar"/> <FrameLayout android: layout_width = "match_parent" android: layout_height = "match_parent" android: layout_below = "@ id/ly_top_bar" android: layout_abve = "@ id/div_tab_bar" android: id = "@ + id/ly_content"> </FrameLayout> </RelativeLayout>

Code parsing:

First, define the style of the top title bar. Add a TextView In The Middle Of The LinearLayout of 48dp as the title!
Next, define a LinerLayout with a size of 56dp to the bottom, add four textviews to the bottom, ratio 1: 1: 1: 1, and set relevant attributes, add a line segment to LinearLayout!
At last, take the title bar and the bottom navigation bar as the boundary, write a FrameLayout, wide and high match_parent, and use it as the Fragment container!

PS:Here, the four TextView attributes are repeated. You can also extract them and write a style ~

Step 3: Hide the top navigation bar

Unexpected calls in the previous ActivityRequestWindowFeature (Window. FEATURE_NO_TITLE)You can hide the top navigation bar that comes with your phone, but an error will be reported when you write the demo, even if this sentence is written before setContentView! It may be because it inherits the AppCompatActivity rather than the Activity class!
Of course, the previous getSupportActionbar (). hide () hides the Actionbar, but it will still be displayed on the interface! Finally, you can write a style by yourself, and then set the Theme for the Application in AndroidManifest. xml:

Note:Put requestWindowFeature (Window. FEATURE_NO_TITLE); in the super. onCreate (savedInstanceState); you can hide the ActionBar without reporting an error.

NextAndroidManifest. xmlSet the theme attribute:

android:theme="@style/Theme.AppCompat.NoActionBar"

Step 4: create a simple Fragment layout and class:

Fg_content.xml:

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: orientation = "vertical" android: layout_width = "match_parent" android: layout_height = "match_parent" android: background = "@ color/bg_white"> <TextView android: id = "@ + id/txt_content" android: layout_width = "match_parent" android: layout_height = "match_parent" android: gravity = "center" android: text = "Haha" android: textColor = "@ color/text_yellow" android: textSize = "20sp"/> </LinearLayout>

MyFragment. java:

/** * Created by Coder-pig on 2015/8/28 0028. */public class MyFragment extends Fragment {    private String content;    public MyFragment(String content) {        this.content = content;    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fg_content,container,false);        TextView txt_content = (TextView) view.findViewById(R.id.txt_content);        txt_content.setText(content);        return view;    }}

Code parsing:

The onCreateView () method is simply rewritten. Other methods can be rewritten as needed!

Step 5: Compile MainActivity. java

Let's talk about some of the key issues to consider:

 
 

  
  
When will Fragment be initialized and added to the container? When will hide and show?
  
  
How to Make TextView selected? What operations do I do after selecting a TextView?
  
  
How can I keep a TextView in the Selected state when I enter MainActivity?
 
 

Well, let's answer these questions one by one:

 
 

  
  
After TextView is selected, the corresponding Fragment is empty. If it is empty, it is initialized and added to the container. If it is hide, we define all the Fragment of the hide method, call the hideAll method to hide all Fragment each time a click event is triggered. If the Fragment of TextView is not empty, the Fragment is displayed;
  
  
This is implemented by clicking an event. After clicking TextView, the selected status of all textviews is reset to false, and then the selected status of the clicked TextView is set to true;
 
 

 
 

  
  
This is simpler. We set the selected event by clicking events, so we can add a method to trigger the click event in the onCreate () method ~Txt_channel.w.mclick ();
 
 

I have understood all the logic, so I can go directly to the Code:

MainActivity. java:

/*** Created by Coder-pig on 0028. */public class MainActivity extends AppCompatActivity implements View. onClickListener {// UI Object private TextView listener; private TextView txt_channel; private TextView txt_message; private TextView txt_better; private TextView txt_setting; private jsonly_content; // Fragment Object private MyFragment fg1, fg2, fg3, fg4; private FragmentManage R fManager; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); requestWindowFeature (Window. FEATURE_NO_TITLE); setContentView (R. layout. activity_main); fManager = getFragmentManager (); bindViews (); txt_channel.w.mclick (); // simulate a click, select the first entry} // UI component to bind the private void bindViews () {txt_topbar = (TextView) findViewById(R.id.txt _ topbar); txt_channe L = (TextView) response _ channel); txt_message = (TextView) response _ message); txt_better = (TextView) response _ better); txt_setting = (TextView) findViewById(R.id.txt _ setting ); ly_content = (FrameLayout) findViewById (R. id. ly_content); txt_channel.setOnClickListener (this); txt_message.setOnClickListener (this); txt_better.setOnClickListener (this); txt_setting.s EtOnClickListener (this);} // reset the selected private void setSelected () {txt_channel.setSelected (false); txt_message.setSelected (false); txt_better.setSelected (false ); txt_setting.setSelected (false);} // hide all Fragment private void hideAllFragment (FragmentTransaction fragmentTransaction) {if (fg1! = Null) fragmentTransaction. hide (fg1); if (fg2! = Null) fragmentTransaction. hide (fg2); if (fg3! = Null) fragmentTransaction. hide (fg3); if (fg4! = Null) fragmentTransaction. hide (fg4) ;}@ Override public void onClick (View v) {FragmentTransaction fTransaction = fManager. beginTransaction (); hideAllFragment (fTransaction); switch (v. getId () {case R.id.txt _ channel: setSelected (); txt_channel.setSelected (true); if (fg1 = null) {fg1 = new MyFragment ("first Fragment "); fTransaction. add (R. id. ly_content, fg1);} else {fTransaction. show (fg1) ;}break; case R.id.txt _ message: setSelected (); txt_message.setSelected (true); if (fg2 = null) {fg2 = new MyFragment ("second Fragment"); fTransaction. add (R. id. ly_content, fg2);} else {fTransaction. show (fg2);} break; case R.id.txt _ better: setSelected (); txt_better.setSelected (true); if (fg3 = null) {fg3 = new MyFragment ("third Fragment"); fTransaction. add (R. id. ly_content, fg3);} else {fTransaction. show (fg3);} break; case R.id.txt _ setting: setSelected (); txt_setting.setSelected (true); if (fg4 = null) {fg4 = new MyFragment ("fourth Fragment"); fTransaction. add (R. id. ly_content, fg4);} else {fTransaction. show (fg4);} break;} fTransaction. commit ();}}