Reprint: linearlayout+fragment to achieve the lower navigation bar effect

The source of the original text is

title ：LinearLayout+Fragment Achieve the effect of the lower navigation bar

author ： Heaven and earth dance

Link to the original text ：LinearLayout+Fragment Achieve the effect of the lower navigation bar _ Tiandi dazzle dance blog -CSDN Blog

Preface

This article will use LinearLayout+Fragment Achieve the effect of the lower navigation bar

mobile phone APP Developers can directly carry out secondary development on this test case , You can save yourself the time and energy of writing the navigation bar manually .

Realization principle ：

First use in MainActivity Use in LinearLayout Make the layout effect of the lower navigation bar ;

And then realize the click event of each button , Replace MainActivity Corresponding xml In the document Fragment;

Optimization part ：1、 The page will be replaced as soon as it is loaded index Of fragment;2、 The button is clicked , stay xml Change the status of the current button in the file .

The renderings are as follows ：

Let's start with the test case .

One 、 The following is a screenshot of the project

Two 、com.wllfengshu.share Medium MainActivity.java For program entry

java The code is as follows

package com.wllfengshu.share;
 
import com.wllfengshu.donate.DonateFragment;
import com.wllfengshu.donate.R;
import com.wllfengshu.index.IndexFragment;
import com.wllfengshu.me.MeFragment;
import com.wllfengshu.query.QueryFragment;
 
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
 
public class MainActivity extends Activity implements OnClickListener {
 
	private LinearLayout llIndex, llDonate, llQuery, llMe;
	private ImageView ivIndex, ivDonate, ivQuery, ivMe, ivCurrent;
	private TextView tvIndex, tvDonate, tvQuery, tvMe, tvCurrent;
	private FragmentManager fragmentManager;
	private FragmentTransaction beginTransaction;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		//  He ヤ Yes  It's just a matter of time start
		llIndex = (LinearLayout) findViewById(R.id.llIndex);
		llDonate = (LinearLayout) findViewById(R.id.llDonate);
		llQuery = (LinearLayout) findViewById(R.id.llQuery);
		llMe = (LinearLayout) findViewById(R.id.llMe);
 
		llIndex.setOnClickListener(this);
		llDonate.setOnClickListener(this);
		llQuery.setOnClickListener(this);
		llMe.setOnClickListener(this);
 
		ivIndex = (ImageView) findViewById(R.id.ivIndex);
		ivDonate = (ImageView) findViewById(R.id.ivDonate);
		ivQuery = (ImageView) findViewById(R.id.ivQuery);
		ivMe = (ImageView) findViewById(R.id.ivMe);
 
		tvIndex = (TextView) findViewById(R.id.tvIndex);
		tvDonate = (TextView) findViewById(R.id.tvDonate);
		tvQuery = (TextView) findViewById(R.id.tvQuery);
		tvMe = (TextView) findViewById(R.id.tvMe);
 
		ivIndex.setSelected(true);
		tvIndex.setSelected(true);
		ivCurrent = ivIndex;
		tvCurrent = tvIndex;
		//  He ヤ Yes  It's just a matter of time end
		
		fragmentManager = getFragmentManager();
		beginTransaction = fragmentManager.beginTransaction();
		beginTransaction.replace(R.id.ll_main, new IndexFragment());
		beginTransaction.commit();
	}
 
	@Override
	public void onClick(View v) {
		ivCurrent.setSelected(false);
		tvCurrent.setSelected(false);
		FragmentManager fragmentManager = getFragmentManager();
		FragmentTransaction beginTransaction = fragmentManager
				.beginTransaction();
		switch (v.getId()) {
		case R.id.llIndex:
			beginTransaction.replace(R.id.ll_main, new IndexFragment());
		case 0:
			ivIndex.setSelected(true);
			ivCurrent = ivIndex;
			tvIndex.setSelected(true);
			tvCurrent = tvIndex;
			break;
		case R.id.llDonate:
			beginTransaction.replace(R.id.ll_main, new DonateFragment());
		case 1:
			ivDonate.setSelected(true);
			ivCurrent = ivDonate;
			tvDonate.setSelected(true);
			tvCurrent = tvDonate;
			break;
		case R.id.llQuery:
			beginTransaction.replace(R.id.ll_main, new QueryFragment());
		case 2:
			ivQuery.setSelected(true);
			ivCurrent = ivQuery;
			tvQuery.setSelected(true);
			tvCurrent = tvQuery;
			break;
		case R.id.llMe:
			beginTransaction.replace(R.id.ll_main, new MeFragment());
		case 3:
			ivMe.setSelected(true);
			ivCurrent = ivMe;
			tvMe.setSelected(true);
			tvCurrent = tvMe;
			break;
		default:
			break;
		}
		beginTransaction.commit();
	}
 
}

Their corresponding xml The document code is as follows

<LinearLayout 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"
    android:orientation="vertical" >
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="#0E6DB0"
        android:gravity="center"
        android:orientation="vertical" >
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/app_name"
            android:textColor="#ffffff"
            android:textSize="20sp"
            android:textStyle="bold" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/ll_main"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical" >
    </LinearLayout>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="#0E6DB0"
        android:orientation="horizontal" >
 
        <LinearLayout
            android:id="@+id/llIndex"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >
 
            <ImageView
                android:id="@+id/ivIndex"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/tab_index" />
 
            <TextView
                android:id="@+id/tvIndex"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=" home page "
                android:textColor="@drawable/tab_textview" />
        </LinearLayout>
 
        <LinearLayout
            android:id="@+id/llDonate"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >
 
            <ImageView
                android:id="@+id/ivDonate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/tab_donate" />
 
            <TextView
                android:id="@+id/tvDonate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=" donation "
                android:textColor="@drawable/tab_textview" />
        </LinearLayout>
 
        <LinearLayout
            android:id="@+id/llQuery"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >
 
            <ImageView
                android:id="@+id/ivQuery"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/tab_query" />
 
            <TextView
                android:id="@+id/tvQuery"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=" Inquire about "
                android:textColor="@drawable/tab_textview" />
        </LinearLayout>
 
        <LinearLayout
            android:id="@+id/llMe"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >
 
            <ImageView
                android:id="@+id/ivMe"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/tab_me" />
 
            <TextView
                android:id="@+id/tvMe"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=" I "
                android:textColor="@drawable/tab_textview" />
        </LinearLayout>
    </LinearLayout>
 
</LinearLayout>

3、 ... and 、index On the page

java The code is as follows

package com.wllfengshu.index;
 
import com.wllfengshu.donate.R;
 
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class IndexFragment extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		
		View view=inflater.inflate(R.layout.index_fragment, null);
		return view;
	}
}

Their corresponding xml The document code is as follows

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView 
	    android:layout_width="match_parent"
    	android:layout_height="match_parent"
    	android:text=" I am a index"/>
</RelativeLayout>

Four 、 In the remaining pages java Code and xml Code and index The page is the same , No more repetition here

explain ： This article refers to some navigation bar making methods , But this method has the least amount of code , It's better to understand , There is no need to import other jar package , Some picture resources in this case 、 Layout and other resources using other cases .

Source code ： link ： Navigation bar effect LinearLayout+Fragment-Android Code class resources -CSDN download