Android大作业(二)——顶部导航栏和底部导航栏
目录
效果
顶部导航栏和底部导航栏,能够跳转不同页面,效果如下:
提示:以下是本篇文章正文内容,下面案例可供参考
一、底部导航栏
在layout创建四个fragment,我命名为fragment_home、fragment_book、fragment_view、fragment_user。
其页面按自己喜好布置,同时需要在创建四个fragment对应的java类,重写其onCreateView方法,这里以UserFragment为例,代码如下:
public class UserFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_user, container, false);
}
}
之后在res目录下新建menu目录,在其中添加xml文件bottom_nav_menu.xml,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/home"
android:title="主页" />
<item
android:id="@+id/navigation_book"
android:icon="@drawable/book"
android:title="书架" />
<item
android:id="@+id/navigation_view"
android:icon="@drawable/view"
android:title="分类" />
<item
android:id="@+id/navigation_user"
android:icon="@drawable/user"
android:title="我的" />
</menu>
再新建一个目录叫navigation,添加文件mobile_navigation.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/mobile_navigation"
app:startDestination="@+id/navigation_home">
<fragment
android:id="@+id/navigation_home"
android:name="com.example.hotel.fragment.HomeFragment"
tools:layout="@layout/fragment_home" />
<fragment
android:id="@+id/navigation_book"
android:name="com.example.hotel.fragment.BookFragment"
tools:layout="@layout/fragment_book" />
<fragment
android:id="@+id/navigation_view"
android:name="com.example.hotel.fragment.ViewFragment"
tools:layout="@layout/fragment_view" />
<fragment
android:id="@+id/navigation_user"
android:name="com.example.hotel.fragment.UserFragment"
tools:layout="@layout/fragment_user" />
</navigation>
新建一个Activity,引用底部导航栏,其layout文件代码如下:
<?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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- android:paddingTop="?attr/actionBarSize">-->
<!-- 页面中显式fragment的容器-->
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
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/mobile_navigation" />
<!-- 底部导航栏 -->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
其Java文件代码如下:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
// 获取页面上的底部导航栏控件
BottomNavigationView navView = findViewById(R.id.nav_view);
// 配置navigation与底部菜单之间的联系
// 底部菜单的样式里面的item里面的ID与navigation布局里面指定的ID必须相同,否则会出现绑定失败的情况
AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
R.id.navigation_home,R.id.navigation_book,R.id.navigation_view,R.id.navigation_user)
.build();
// 建立fragment容器的控制器
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
// 设置ActionBar为null,以使其在此处不使用ActionBar
setSupportActionBar(null);
NavigationUI.setupWithNavController(navView, navController);
}
}
至此底部导航栏便完成了。
二、顶部导航栏
在开始前,需要在res目录中的value目录里的themes目录中添加主题,加入下面这个style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<!-- Primary brand color. -->
<item name="colorPrimary">@color/gray</item>
<item name="colorPrimaryVariant">@color/black_overlay</item>
<item name="colorOnPrimary">@color/bottom</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
原先创建工程后给出的主题parent="Theme.MaterialComponents.DayNight.DarkActionBar"
最后以DarkActionBar结尾,将其改为NoActionBar也一样可以。
在AndroidManifest.xml中配置主题:
<activity
android:name=".ui.MainActivity"
android:exported="true"
android:theme="@style/AppTheme">
</activity>
然后修改fragment的java代码,下面给出了一个示例:
public class BookFragment extends Fragment {
private Toolbar mToolbar;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_book, container, false);
// 初始化 Toolbar
mToolbar = view.findViewById(R.id.toolbar);
mToolbar.setTitle("书架");
// 设置 Toolbar 为 Fragment 的 ActionBar
((AppCompatActivity)getActivity()).setSupportActionBar(mToolbar);
setHasOptionsMenu(true);
return view;
}
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
inflater.inflate(R.menu.bottom_nav_menu, menu);
super.onCreateOptionsMenu(menu, inflater);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_book:
// 点击了书架菜单项
openBookshelf();
return true;
case R.id.menu_browse_history:
// 点击了浏览历史菜单项
openBrowseHistory();
return true;
case R.id.menu_circle:
// 点击了圈子菜单项
openCircle();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
// private void openBookshelf() {
// // 打开书架页面
// xxx
// }
//
// private void openBrowseHistory() {
// // 打开浏览历史页面
// xxx
// }
//
// private void openCircle() {
// // 打开圈子页面
// xxx
// }
}
在对应的layout中要加入toolbar的标签:
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:background="@color/white"
android:layout_gravity="top"/>
这样便完成了。