Fragment Examples - Implementation of the Bottom Navigation Bar (Method 1)

Introduction to this section:

In the previous section we had a preliminary understanding of Fragment, learned the concepts, life cycle, Fragment management and Fragment transactions, and dynamic and static loading of Fragments. Starting from this section, we will explain the actual development of some Fragments. Some examples of! This section will explain to you the implementation of the bottom navigation bar! There are many basic bottom navigation bar methods. For example, use TextView entirely, or use RadioButton, or use TabLayout + RadioButton, which is of course complicated. In this case, you still have to use the outer layer layout method! In this section, we use TextView to create a bottom navigation bar effect, which is also familiar to us. Next, use Fragment! Okay, let’s start this section!

1. The renderings to be realized and the project directory structure:

Let’s take a look at the renderings first:

Then take a look at the directory structure of our project:

2. Implementation process:

Step 1: Write down some resource files for the bottom options

We can see from the picture that when we click on each item at the bottom There are different effects, right? We judge by whether it is selected! The resource files we want to write are: first the picture, then the text, then the background!

Picture Drawable resource: tab_menu_channel.xml

##<?xml version="1.0" encoding="utf-8"?>

The other three follow the same pattern!

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>

背景资源：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: Write our Activity layout

activity_main.xml:

Code analysis:

First define the style of the top title bar, and add a TextView as the title in the middle of the 48dp LinearLayout!
Then define a LinerLayout with a size of 56dp to the bottom, and add four TextViews to it with a ratio of 1:1:1:1. And set the relevant attributes, and then add a line segment to this LinearLayout!
Finally, use the title bar and bottom navigation bar as boundaries, write a FrameLayout, width and height match_parent, used as a container for Fragment!

PS: The four TextView properties here are repeated. You can also extract them yourself, write a style, and set them~

Step 3: Hide the top navigation bar

I accidentally discovered that calling requestWindowFeature(Window.FEATURE_NO_TITLE); in the Activity can hide the phone It comes with a top navigation bar, but when writing the demo, I found that an error would be reported, even if this sentence was written before setContentView()! it may be because What is inherited is AppCompatActivity instead of Activity class!
Of course the previous getSupportActionbar().hide() hides the Actionbar, but it will still be on the interface! Finally, there is another way to write a style yourself, and then set this Theme for Application in AndroidManifest.xml:

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

ThenAndroidManifest.xmlSet the theme attribute:

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

PS: The above "conscience code" is sponsored by the good programmer Cao Shen~

Step 4: Create a simple layout and class of Fragment:

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= "../style/images/bg_white"> layout_height="match_parent"
android:gravity="center"
android:text="Hehe"
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 analysis:

simply rewrites an onCreateView() method, other methods can be rewritten as needed!

Step 5: Writing MainActivity.java

First let’s talk about some key issues we need to consider:

When will the Fragment be initialized and added to the container? When to hide and show?
How to make TextView selected? What operations should be done after selecting a TextView?
How to make a TextView in the Selected state after entering MainActivity?

Well, let’s answer the above questions one by one:

After we select the TextView, we will check the corresponding Fragment. If it is empty , initialized and added to the container; For hide, we define a method to hide all Fragments. This hideAll method is called first every time a click event is triggered. All Fragments are hidden, and then if the Fragment corresponding to the TextView is not empty, we will display the Fragment;
We implement this through the click event. After clicking the TextView, first reset the selected status of all TextViews to false, and then set the clicked The selected state of TextView is true;
This is simpler. We set the selection through the click event, so add a trigger for the click event in the onCreate() method. Isn’t that just the method~ txt_channel.performClick();

Now that I understand the logic, I can go directly to the code:

MainActivity.java:

/**
* Created by Coder-pig on 2015/8/28 0028.
*/
public class MainActivity extends AppCompatActivity implements View.OnClickListener{

//UI Object
private TextView txt_topbar;
private TextView txt_channel ;
private TextView txt_message;
private TextView txt_better;
private TextView txt_setting;
private FrameLayout ly_content;

//Fragment Object
private MyFragment fg1,f g2,fg3, fg4;
private FragmentManager fManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TIT LE);
setContentView(R.layout.activity_main);
fManager = getFragmentManager();
bindViews();
txt_channel.performClick(); //Simulate a click and select the first item after entering.
}

//UI component initialization and event binding
private void bindViews() {
txt_topbar = (TextView) findViewById(R.id.txt_topbar);
txt_channel = (TextView ) findViewById(R.id.txt_channel);
txt_message = (TextView) findViewById(R.id.txt_message);
txt_better = (TextView) findViewById(R.id.txt_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.setOnClickListener(this);
}

    //重置所有文本的选中状态
    private void setSelected(){
        txt_channel.setSelected(false);
        txt_message.setSelected(false);
        txt_better.setSelected(false);
        txt_setting.setSelected(false);
    }

    //隐藏所有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("第一个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("第二个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("第三个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);
fTransaction.show(fg4);
##           }
Break;
}
FTRANSACTION.com Mit ();
}
}

# 3. Code download:

## FragmentDemo. zip

FragmentDemo.zip Download Statement : The picture material comes from App: better, this code is only for demonstration and not for commercial use! 4. Summary of this section

This section explains how to use a LinarLayout + four TextViews to implement a bottom navigation bar and The logic of Fragment add, hide, and show~ is quite simple. Finally, I would like to thank the God of Piggy Secret Base, God B. There are also some pointers given to me by the good programmer Cao Shen! Thank you very much. This article is just to commemorate Xiaozhu’s return to the world of pretense. Well, again Return to the application layer, hey, that’s it for this section, thank you~

← Basic overview of Fragments

Fragment Examples - Implementation of the Bottom Navigation Bar (Method 2) →