【Android】 底部导航开发，只需要六步

Android 底部导航开发

方法1-Fragment

第一步，创建底部导航对应的页面

我们创建三个，所以需要三个对应的页面 在layout中新建xml文件 tab_bar_home_fragment.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">  
    <TextView  
    android:id="@+id/fu_tv1"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:layout_gravity="center_horizontal"  
    android:layout_marginTop="50dp"  
    android:text="首页"  
    android:textSize="24sp" />  
</LinearLayout>

按照这种方式再新建两个文件，分别为tab_bar_transmit_fragment.xml, tab_bar_user_fragment.xml

第二步，创建页面对应的java Fragment文件

新建java文件 HomeFragment.java

package com.hxtx.august.NavFragment;  
import android.os.Bundle;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
import androidx.annotation.Nullable;  
import androidx.fragment.app.Fragment;  
import com.hxtx.august.R;  
public class HomeFragment extends Fragment {  
    @Nullable  
    @Override  
    public View onCreateView(@Nullable LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){  
        return inflater.inflate(R.layout.tab_bar_home_fragment,container,false);  
    }  
}

按照这种方式再新建两个文件，分别为TransmitFragment.java, UserFragment.java 文件

第四步 创建底部按钮的变化状态

在drawable中新建xml文件，tab_bar_home_selector.xml
注意：tab_icon_home2是我准备好的png图片，也可以使用自带的xml，tab_icon_home2表示点击后的图标，tab_icon_home1表示未点击的图标

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <!-- 按下此item-->  
    <item android:drawable="@mipmap/tab_icon_home2" android:state_checked="true" />  
    <!-- 默认为此item-->  
    <item android:drawable="@mipmap/tab_icon_home1" android:state_checked="false" />  
</selector>

按照这种方式再新建两个文件，分别为tab_bar_transmit_selector.xml, tab_bar_user_selector.xml 文件

到此为止，我们的准备工作结束，开始开发底部导航。

第五步，在MainActivity对应的xml中这样布局

activity_main.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">  

    <FrameLayout  
        android:id="@+id/ant_frame_layout"  
        android:layout_width="match_parent"  
        android:layout_height="0dp"  
        android:layout_weight="1"  
    />  
    <RadioGroup  
        android:id="@+id/ans_radio_group"  
        android:layout_width="match_parent"  
        android:layout_height="55dp"  
        android:paddingTop="5dp"  
        android:layout_gravity="center_vertical"  
        android:orientation="horizontal"  
    >  
        <RadioButton  
            android:id="@+id/tab_bar_home_id"  
            android:layout_width="0dp"  
            android:layout_height="match_parent"  
            android:layout_weight="1"  
            android:button="@null"  
            android:checked="true"  
            android:drawableTop="@drawable/tab_bar_home_selector"  
            android:drawablePadding="3dp"  
            android:gravity="center"  
            android:text="首页"  
        />  
        <RadioButton  
            android:id="@+id/tab_bar_transmit_id"  
            android:layout_width="0dp"  
            android:layout_height="match_parent"  
            android:layout_weight="1"  
            android:button="@null"  
            android:checked="false"  
            android:drawableTop="@drawable/tab_bar_transmit_selector"  
            android:drawablePadding="3dp"  
            android:gravity="center"  
            android:text="新闻"  
        />  
        <RadioButton  
            android:id="@+id/tab_bar_cloud_id"  
            android:layout_width="0dp"  
            android:layout_height="match_parent"  
            android:layout_weight="1"  
            android:button="@null"  
            android:checked="false"  
            android:drawableTop="@drawable/tab_bar_cloud_selector"  
            android:drawablePadding="3dp"  
            android:gravity="center"  
            android:text="公告"  
        />  
        <RadioButton  
            android:id="@+id/tab_bar_connect_id"  
            android:layout_width="0dp"  
            android:layout_height="match_parent"  
            android:layout_weight="1"  
            android:button="@null"  
            android:checked="false"  
            android:drawableTop="@drawable/tab_bar_connect_selector"  
            android:drawablePadding="3dp"  
            android:gravity="center"  
            android:text="我的"  
        />  
        <RadioButton  
            android:id="@+id/tab_bar_user_id"  
            android:layout_width="0dp"  
            android:layout_height="match_parent"  
            android:layout_weight="1"  
            android:button="@null"  
            android:checked="false"  
            android:drawableTop="@drawable/tab_bar_user_selector"  
            android:drawablePadding="3dp"  
            android:gravity="center"  
            android:text="我的"  
        />  
    </RadioGroup>  
</LinearLayout>

第六步，在MainActivity文件入口加入以下代码

MainActivity.java

package com.hxtx.august;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.widget.FrameLayout;
import android.widget.RadioGroup;
import com.hxtx.august.NavFragment.ConnectFragment;
import com.hxtx.august.NavFragment.HomeFragment;
import com.hxtx.august.NavFragment.TransmitFragment;
import com.hxtx.august.NavFragment.CloudFragment;
import com.hxtx.august.NavFragment.UserFragment;
import android.content.Intent;
import android.content.IntentFilter;
import com.google.zxing.integration.android.IntentIntegrator;
import com.google.zxing.integration.android.IntentResult;
import com.hxtx.august.Page.QrCodeCManagePage;
import com.hxtx.august.Components.MessageDialog;
import com.hxtx.august.Tools.Utils;
import java.security.InvalidAlgorithmParameterException;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;
import javax.crypto.BadPaddingException;
import javax.crypto.IllegalBlockSizeException;
import javax.crypto.NoSuchPaddingException;

public class MainActivity extends AppCompatActivity {
    private FrameLayout antFrameLayout;
    private RadioGroup ansRadioGroup;
    private Fragment mCurrFragment;
    private HomeFragment homeFragment;
    private CloudFragment cloudFragment;
    private TransmitFragment transmitFragment;
    private ConnectFragment connectFragment;
    private UserFragment userFragment;
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        selectPage(0);
    }

    private void initView(){
        antFrameLayout = findViewById(R.id.ant_frame_layout);
        ansRadioGroup = findViewById(R.id.ans_radio_group);
        ansRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                selectPage(ansRadioGroup.indexOfChild((ansRadioGroup.findViewById(checkedId))));
            }
        });
    }

    private void selectPage(int index){
        switch (index){
            case 0:
                if(homeFragment == null){
                    homeFragment = new HomeFragment();
                }
                changeFragment(homeFragment);
                break;
            case 1:
                if(transmitFragment == null){
                    transmitFragment = new TransmitFragment();
                }
                changeFragment(transmitFragment);
                break;
            case 2:
                if(cloudFragment == null){
                    cloudFragment = new CloudFragment();
                }
                changeFragment(cloudFragment);
                break;
            case 3:
                if(connectFragment == null){
                    connectFragment = new ConnectFragment();
                }
                changeFragment(connectFragment);
                break;
            case 4:
                if(userFragment == null){
                    userFragment = new UserFragment();
                }
                changeFragment(userFragment);
                break;
        }
    }

    private void changeFragment(Fragment showFragment){
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction ft =  fm.beginTransaction();
        if(!showFragment.isAdded()){
            ft.add(R.id.ant_frame_layout,showFragment);
        }
        if(mCurrFragment !=null){
            ft.hide(mCurrFragment);
        }
        mCurrFragment = showFragment;
        ft.show(mCurrFragment);
        ft.commit();
    }
}

好了，布局完成。可以使用了
如果你看到了这里，觉得文章写得不错就给个赞呗？
更多Android进阶指南 可以扫码 解锁更多Android进阶资料


敲代码不易，关注一下吧。ღ( ´･ᴗ･` )