底部导航栏加页卡的切换,很多App采用这种布局设计,在以前的开发中,需要自定义底部导航栏以及使用FragmentTransaction来管理Fragment的切换,代码量较大,而使用Navigation后,系统框架为我们做了任务管理,大大简化了代码。
项目地址:https://github.com/zhangtiansimple/navigationBottomBar
1.导入相关依赖库
implementation 'androidx.navigation:navigation-fragment:2.1.0'
implementation 'androidx.navigation:navigation-ui:2.1.0'
implementation 'com.google.android.material:material'
2.新建两个Fragment用于切换
public class ProductFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_product, null);
}
}
public class UserFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_user, null);
}
}
以及两个布局文件,里面只有一个TextView,用于区分
<?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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ProductFragment"/>
</LinearLayout>
<?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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UserFragment"/>
</LinearLayout>
3.配置navigation
在res下新建navigation目录,在navigation目录下新建nav_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/nav_fragment"
app:startDestination="@id/product_fragment"
tools:ignore="UnusedNavigation">
<fragment
android:id="@+id/product_fragment"
android:name="com.pp.navigationdemo.ProductFragment" />
<fragment
android:id="@+id/user_fragment"
android:name="com.pp.navigationdemo.UserFragment" />
</navigation>
4.配置menu
在res下新建menu目录,在menu目录下新建nav_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/product_fragment"
android:icon="@color/colorAccent"
android:title="product_fragment" />
<item
android:id="@+id/user_fragment"
android:icon="@color/colorAccent"
android:title="user_fragment" />
</menu>
这里需要特别注意的是,menu里id要和navigation的id一致,例如demo里的id,两个id都为product_fragment和user_fragment
5.编写布局文件
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_view"
android:layout_width="0dp"
android:layout_height="48dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/nav_menu" />
<fragment
android:id="@+id/nav_host"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:defaultNavHost="false"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toTopOf="@+id/nav_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/nav_fragment" />
</androidx.constraintlayout.widget.ConstraintLayout>
6.编写逻辑代码
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
NavController navController = Navigation.findNavController(this, R.id.nav_host);
BottomNavigationView navigationView = findViewById(R.id.nav_view);
NavigationUI.setupWithNavController(navigationView, navController);
}
}
7.注意事项
关于这两个标签的使用需要关注一下
一个是defaultNavHost,值为true的时候,按返回键返回的是上一个页面,比如点击到了第二个页面,也就是demo中的UserFragment,这个时候点击返回键,回到的是第一个页面ProductFragment,如果希望直接退出应用,可以设置为false。
一个是labelVisibilityMode,如果大于三个页卡,希望不要变成滑动效果,则可以设置这个标签。
至此,就实现了底部导航栏的骨架部分,需要的小伙伴可在此基础上自己拓展。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)