当一个项目开始时,我们需要确定我们App主页面框架,常用的写法包括:
① RadioGroup+Fragment
② TabLayout+Fragment
③ TabHost+Fragment
④ FragmentTabHost+Fragment
今天我与大家分享的是利用BottomNavigationView+Fragment打造一个底部导航栏效果。话不多说,先上效果图
一、简介
BottomNavigationView是Android 5.0后推出的一个底部导航栏控件。一般配合Fragment使用。
二、集成
(1)Android support导入
implementation 'com.android.support:design:27.1.1'//版本号随项目的引用版本
② Android X导入
implementation 'com.google.android.material:material:1.1.0'
三、使用
注:项目Demo是Android X库使用的,如果自己项目使用Android support包,需自己切换下文件的包名
(1)创建activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<!--androdid support 使用-->
<!-- <android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/general_line_top_bg"
app:itemIconTint="@color/color_main_tab"
app:labelVisibilityMode="labeled"
app:itemTextColor="@color/color_main_tab"
app:menu="@menu/menu_main">
</android.support.design.widget.BottomNavigationView>-->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/general_line_top_bg"
app:itemIconTint="@color/color_main_tab"
app:labelVisibilityMode="labeled"
app:itemTextColor="@color/color_main_tab"
app:menu="@menu/menu_main" />
</LinearLayout>
(2)res文件目录下创建meun文件夹,并添加menu_main.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/tab_home"
android:icon="@drawable/tab_home"
android:title="@string/home" />
<item
android:id="@+id/tab_template"
android:icon="@drawable/tab_template"
android:title="@string/template" />
<item
android:id="@+id/tab_mine"
android:icon="@drawable/tab_mine"
android:title="@string/mine" />
</menu>
(3)MainActivity主要代码
package com.basics;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import com.basics.module.home.TabHomeFragment;
import com.basics.module.mine.TabMineFragment;
import com.basics.module.template.TabTemplateFragment;
import com.common.lib.ui.BaseActivity;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends BaseActivity {
BottomNavigationView mNavigationView;
private List<Fragment> fragments;
@Override
protected void onCreateProxy(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
init();
setListeners();
}
@Override
public void init() {
mNavigationView=findViewById(R.id.bottom_nav);
fragments = new ArrayList<>();
fragments.add(new TabHomeFragment());
fragments.add(new TabTemplateFragment());
fragments.add(new TabMineFragment());
int index=0;
switchFragment(index);
}
@Override
public void setListeners() {
mNavigationView.setOnNavigationItemSelectedListener(menuItem -> {
switch (menuItem.getItemId()) {
case R.id.tab_home:
switchFragment(0);
break;
case R.id.tab_template:
switchFragment(1);
break;
case R.id.tab_mine:
switchFragment(2);
break;
}
// 这里注意返回true,否则点击失效
return true;
});
}
private void switchFragment(int position) {
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.fragment_container, fragments.get(position));
transaction.commit();
}
}