Android : BottomNavigation底部导航_简单应用

示例图：

1.先创建底部导航需要的图片

res → New → Vector Asset  创建三个矢量图

图片1  baseline_home.xml

<vector android:height="24dp" android:tint="#000000"android:viewportHeight="24" android:viewportWidth="24"android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"><path android:fillColor="@android:color/white" android:pathData="M10,20v-6h4v6h5v-8h3L12,3 2,12h3v8z"/>
</vector>

图片2  baseline_menu.xml

<vector android:height="24dp" android:tint="#000000"android:viewportHeight="24" android:viewportWidth="24"android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"><path android:fillColor="@android:color/white" android:pathData="M3,18h18v-2L3,16v2zM3,13h18v-2L3,11v2zM3,6v2h18L21,6L3,6z"/>
</vector>

图片3  baseline_author.xml

<vector android:height="24dp" android:tint="#000000"android:viewportHeight="24" android:viewportWidth="24"android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"><path android:fillColor="@android:color/white" android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,5c1.66,0 3,1.34 3,3s-1.34,3 -3,3 -3,-1.34 -3,-3 1.34,-3 3,-3zM12,19.2c-2.5,0 -4.71,-1.28 -6,-3.22 0.03,-1.99 4,-3.08 6,-3.08 1.99,0 5.97,1.09 6,3.08 -1.29,1.94 -3.5,3.22 -6,3.22z"/>
</vector>

图片4  用于操作的图片  baseline_img.xml

<vector android:height="50dp" android:tint="#44800C"android:viewportHeight="24" android:viewportWidth="24"android:width="50dp" xmlns:android="http://schemas.android.com/apk/res/android"><path android:fillColor="@android:color/white" android:pathData="M4.5,9.5m-2.5,0a2.5,2.5 0,1 1,5 0a2.5,2.5 0,1 1,-5 0"/><path android:fillColor="@android:color/white" android:pathData="M9,5.5m-2.5,0a2.5,2.5 0,1 1,5 0a2.5,2.5 0,1 1,-5 0"/><path android:fillColor="@android:color/white" android:pathData="M15,5.5m-2.5,0a2.5,2.5 0,1 1,5 0a2.5,2.5 0,1 1,-5 0"/><path android:fillColor="@android:color/white" android:pathData="M19.5,9.5m-2.5,0a2.5,2.5 0,1 1,5 0a2.5,2.5 0,1 1,-5 0"/><path android:fillColor="@android:color/white" android:pathData="M17.34,14.86c-0.87,-1.02 -1.6,-1.89 -2.48,-2.91 -0.46,-0.54 -1.05,-1.08 -1.75,-1.32 -0.11,-0.04 -0.22,-0.07 -0.33,-0.09 -0.25,-0.04 -0.52,-0.04 -0.78,-0.04s-0.53,0 -0.79,0.05c-0.11,0.02 -0.22,0.05 -0.33,0.09 -0.7,0.24 -1.28,0.78 -1.75,1.32 -0.87,1.02 -1.6,1.89 -2.48,2.91 -1.31,1.31 -2.92,2.76 -2.62,4.79 0.29,1.02 1.02,2.03 2.33,2.32 0.73,0.15 3.06,-0.44 5.54,-0.44h0.18c2.48,0 4.81,0.58 5.54,0.44 1.31,-0.29 2.04,-1.31 2.33,-2.32 0.31,-2.04 -1.3,-3.49 -2.61,-4.8z"/>
</vector>

2.创建 menu 文件  my_menu.xml

res → New → Android Resource File   类型选择 Menu 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:id="@+id/homeFragment"android:icon="@drawable/baseline_home"android:title="旋转" /><itemandroid:id="@+id/menuFragment"android:icon="@drawable/baseline_menu"android:title="缩放" /><itemandroid:id="@+id/authorFragment"android:icon="@drawable/baseline_author"android:title="移动" />
</menu>

3.创建3个Fragment 页面

res → New → Fragment → Fragment(with ViewModel)

创建了6个文件

HomeFragment.java        HomeViewModel.java        布局文件： fragment_home.xml

MenuFragment.java        MenuViewModel.java        布局文件 ： fragment_menu.xml

AuthorFragment.java        AuthorViewModel.java        布局文件：fragment_author.xml

往布局中添加操作的图片

fragment_home.xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"tools:context=".HomeFragment"><ImageViewandroid:id="@+id/imageView"android:layout_width="100dp"android:layout_height="100dp"android:layout_gravity="center"android:src="@drawable/baseline_img" />
</FrameLayout>

fragment_menu.xml        

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"tools:context=".MenuFragment"><ImageViewandroid:id="@+id/imageView"android:layout_width="100dp"android:layout_height="100dp"android:layout_gravity="center"android:src="@drawable/baseline_img" />
</FrameLayout>

fragment_author.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"tools:context=".AuthorFragment"><ImageViewandroid:id="@+id/imageView"android:layout_width="100dp"android:layout_height="100dp"android:layout_gravity="center"android:src="@drawable/baseline_img" />
</FrameLayout>

4.创建Navigation 导航文件 my_Navigation.xml

res → New → Android Resource File   类型选择 Navigation

<?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/my_navigation"app:startDestination="@id/homeFragment"><!-- 注意 这里的id 和 Menu  my_menu.xml文件中的id  相对应 才可点击跳转到对应的页面--><fragmentandroid:id="@+id/homeFragment"android:name="com.example.mybuttomnavigation.HomeFragment"android:label="旋转"tools:layout="@layout/fragment_home" /><fragmentandroid:id="@+id/menuFragment"android:name="com.example.mybuttomnavigation.MenuFragment"android:label="缩放"tools:layout="@layout/fragment_menu" /><fragmentandroid:id="@+id/authorFragment"android:name="com.example.mybuttomnavigation.AuthorFragment"android:label="移动"tools:layout="@layout/fragment_author" />
</navigation>

5.在主布局添加 底部导航（BottomNavigationView） 和 跳转的页面(NavHostFragment)

activity_main.xml

<?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"tools:context=".MainActivity"><com.google.android.material.bottomnavigation.BottomNavigationViewandroid:id="@+id/bottomNavigationView"android:layout_width="match_parent"android:layout_height="0dp"android:foregroundTint="#4700FF"android:outlineAmbientShadowColor="#FFEB3B"app:itemRippleColor="#ff0000ff"app:labelVisibilityMode="selected"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="parent"app:menu="@menu/my_menu"></com.google.android.material.bottomnavigation.BottomNavigationView><!-- 注意事项 ：默认选的是androidx.fragment.app.FragmentContainerView手动改成 fragment--><fragmentandroid:id="@+id/fragment"android:name="androidx.navigation.fragment.NavHostFragment"android:layout_width="match_parent"android:layout_height="0dp"app:defaultNavHost="true"app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintVertical_bias="0.017"app:navGraph="@navigation/my_navigation" /></androidx.constraintlayout.widget.ConstraintLayout>

6. 设置主题样式 默认是没有导航栏的

values 目录下 colors.xml 

<?xml version="1.0" encoding="utf-8"?>
<resources><color name="purple_200">#FFBB86FC</color><color name="purple_500">#FF6200EE</color><color name="purple_700">#FF3700B3</color><color name="teal_200">#FF03DAC5</color><color name="teal_700">#FF018786</color><color name="black">#FF000000</color><color name="white">#FFFFFFFF</color>
</resources>

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools"><!-- Base application theme. --><style name="Base.Theme.MyApplication" parent="Theme.Material3.DayNight.NoActionBar"><!-- Customize your light theme here. --><!-- <item name="colorPrimary">@color/my_light_primary</item> --></style><style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar"><!-- Primary brand color. --><item name="colorPrimary">@color/purple_500</item><item name="colorPrimaryVariant">@color/purple_700</item><item name="colorOnPrimary">@color/white</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>
</resources>

7. MainActivity.java 

package com.example.mybuttomnavigation;import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;import com.google.android.material.bottomnavigation.BottomNavigationView;public class MainActivity extends AppCompatActivity {// 底部导航private BottomNavigationView bottomNavigationView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);bottomNavigationView = findViewById(R.id.bottomNavigationView);//导航NavController navController = Navigation.findNavController(this, R.id.fragment);//设置顶部导航AppBarConfiguration configuration = new AppBarConfiguration.Builder(//带返回箭头 ←
//                navController.getGraph()//不带箭头的 ←bottomNavigationView.getMenu()// 或者这样写 ←不带箭头
//                R.id.menuFragment,R.id.authorFragment,R.id.homeFragment).build();//装配顶部导航NavigationUI.setupActionBarWithNavController(this, navController, configuration);NavigationUI.setupWithNavController(bottomNavigationView, navController);}
}

经过上面这些步骤已经可以跳转了

8.设置动画

旋转：HomeFragment.java

package com.example.mybuttomnavigation;import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;public class HomeFragment extends Fragment {private HomeViewModel mViewModel;private ImageView imageView;public static HomeFragment newInstance() {return new HomeFragment();}@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,@Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_home, container, false);imageView = view.findViewById(R.id.imageView);return view;}@Overridepublic void onActivityCreated(@Nullable Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);mViewModel = new ViewModelProvider(this).get(HomeViewModel.class);imageView.setRotation(mViewModel.startAnimation);// TODO: Use the ViewModel/**设置动画** alpha（透明度）* scaleX（X轴缩放）* scaleY（Y轴缩放）* rotation（旋转）* translationX（X轴平移）* translationY（Y轴平移）* */ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(imageView, "rotation", 0.0f);//点击事件imageView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// 判断动画是在运动 objectAnimator.isRunning() 在运动//!objectAnimator.isRunning()取反//重新设置旋转角度              当前的角度  旋转到 当前的角度+100，objectAnimator.setFloatValues(imageView.getRotation(), imageView.getRotation() + 100);mViewModel.startAnimation += 100;objectAnimator.start();}});}}

HomeViewModel.java

package com.example.mybuttomnavigation;import androidx.lifecycle.ViewModel;public class HomeViewModel extends ViewModel {// TODO: Implement the ViewModelfloat startAnimation = 0;
}

缩放：MenuFragment.java

package com.example.mybuttomnavigation;import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;public class MenuFragment extends Fragment {private MenuViewModel mViewModel;private ImageView imageView;public static MenuFragment newInstance() {return new MenuFragment();}@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,@Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_menu, container, false);imageView = view.findViewById(R.id.imageView);return view;}@Overridepublic void onActivityCreated(@Nullable Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);mViewModel = new ViewModelProvider(this).get(MenuViewModel.class);imageView.setScaleX(mViewModel.scaleFactor);imageView.setScaleY(mViewModel.scaleFactor);// TODO: Use the ViewModel/**设置动画** alpha（透明度）* scaleX（X轴缩放）* scaleY（Y轴缩放）* rotation（旋转）* translationX（X轴平移）* translationY（Y轴平移）* */ObjectAnimator objectAnimatorX = ObjectAnimator.ofFloat(imageView, "scaleX", 0);ObjectAnimator objectAnimatorY = ObjectAnimator.ofFloat(imageView, "scaleY", 0);objectAnimatorX.setDuration(500);objectAnimatorY.setDuration(500);//点击事件imageView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// 判断动画是在运动 objectAnimator.isRunning() 在运动//!objectAnimator.isRunning()取反//重新设置缩放            objectAnimatorX.setFloatValues(imageView.getScaleX() + 0.1f);objectAnimatorY.setFloatValues(imageView.getScaleY() + 0.1f);mViewModel.scaleFactor += 0.1;objectAnimatorX.start();objectAnimatorY.start();}});}}

MenuViewModel.java 

package com.example.mybuttomnavigation;import androidx.lifecycle.ViewModel;public class MenuViewModel extends ViewModel {// TODO: Implement the ViewModelfloat scaleFactor = 1 ;
}

平移：AuthorFragment.java

package com.example.mybuttomnavigation;import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;import java.util.Random;public class AuthorFragment extends Fragment {private AuthorViewModel mViewModel;public ImageView imageView;public static AuthorFragment newInstance() {return new AuthorFragment();}@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,@Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_author, container, false);imageView = view.findViewById(R.id.imageView);return view;}@Overridepublic void onActivityCreated(@Nullable Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);mViewModel = new ViewModelProvider(this).get(AuthorViewModel.class);// TODO: Use the ViewModelimageView.setX(imageView.getX() + mViewModel.mark);// TODO: Use the ViewModel/**设置动画** alpha（透明度）* scaleX（X轴缩放）* scaleY（Y轴缩放）* rotation（旋转）* translationX（X轴平移）* translationY（Y轴平移）* */ObjectAnimator objectAnimatorX = ObjectAnimator.ofFloat(imageView, "x", 0);//设置动画500毫秒objectAnimatorX.setDuration(500);//点击事件imageView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// 判断动画是在运动 objectAnimator.isRunning() 在运动//!objectAnimator.isRunning()取反float dx = new Random().nextBoolean() ? 100 : -100;//重新设置缩放            = 当前值 移动到 ， 当前值 + dxobjectAnimatorX.setFloatValues(imageView.getScaleX(), imageView.getScaleX() + dx);mViewModel.mark += dx;objectAnimatorX.start();}});}}

AuthorViewModel.java

package com.example.mybuttomnavigation;import androidx.lifecycle.ViewModel;public class AuthorViewModel extends ViewModel {// TODO: Implement the ViewModelfloat mark = 0;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/269646.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

让植被管理更精准：数据可视化的新利器

让植被管理更精准：数据可视化的新利器

【小编整理了300可视化大屏源文件&#xff0c;需要可后台私~&#xff01;】 在当今时代&#xff0c;数据可视化技术已经成为了一个非常重要的技术。对于植被管理来说&#xff0c;数据可视化也有着非常重要的作用。通过将植被管理数据可视化&#xff0c;我们可以更加清晰地了解植…
阅读更多...
maui sqlite开发一个商城加购物车的演示(1)

maui sqlite开发一个商城加购物车的演示(1)

界面演示 using ShoppingUI;namespace ShoppingUI;public partial class App : Application {public App(){InitializeComponent();MainPage new LoginPage();}static LoginDatabase database;// Create the database connection as a singleton.public static LoginDatabase …
阅读更多...
PyTorch: 基于【MobileNet V2】处理MNIST数据集的图像分类任务【准确率99%+】

PyTorch: 基于【MobileNet V2】处理MNIST数据集的图像分类任务【准确率99%+】

目录 引言1. 安装PyTorch2. 下载并加载MNIST数据集3. 搭建基于MobileNet V2的图像分类模型运行结果&#xff08;重点看网络开头和结束位置即可&#xff09; 4. 设置超参数、损失函数、优化器5. 训练模型6. 测试模型运行结果 完整代码结束语 引言 在深度学习和计算机视觉的世界…
阅读更多...
（第32天）RHEL 7 安装 Oracle 12CR2 RAC 数据库

（第32天）RHEL 7 安装 Oracle 12CR2 RAC 数据库

前言 Oracle 12CR2 版本是 12.2.0.1 版本，是 12C 家族中最早的比较稳定的版本，在 19C 没出来之前，很多人选择 12CR2 作为稳定版本进行安装。目前 19C 长期稳定版已经出来，Oracle 对于 12CR2 版本的支持周期也止步于 2022 年，应该很少会有人再选择 12CR2，除非应用上不支持…
阅读更多...
【Hadoop_04】HDFS的API操作与读写流程

【Hadoop_04】HDFS的API操作与读写流程

1、HDFS的API操作1.1 客户端环境准备1.2 API创建文件夹1.3 API上传1.4 API参数的优先级1.5 API文件夹下载1.6 API文件删除1.7 API文件更名和移动1.8 API文件详情和查看1.9 API文件和文件夹判断 2、HDFS的读写流程&#xff08;面试重点&#xff09;2.1 HDFS写数据流程2.2 网络拓…
阅读更多...
数据结构-05-跳表SkipList

数据结构-05-跳表SkipList

1-什么是跳表 跳表SkipList是一种随机化的数据结构&#xff0c;基于并联的链表&#xff0c;实现简单&#xff0c;插入、删除、查找的复杂度均为 O(logN)&#xff08;大多数情况下&#xff0c;因为是实现上是概率问题&#xff09;&#xff0c;因为其性能匹敌红黑树且实现较为简单…
阅读更多...
Layui深入

Layui深入

1、代码&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>注册页面</title> <style> .container { max-width: 600px; margin: 0 auto; padding: 20px; …
阅读更多...
Ubuntu20.04降低linux版本到5.4.0-26-generic

Ubuntu20.04降低linux版本到5.4.0-26-generic

前言 试用ubuntu20.04安装昇腾的驱动和cann的时&#xff0c;出现如下问题&#xff1a; (base) rootubuntu:/home/work# ./Ascend-hdk-910-npu-driver_23.0.rc3_linux-aarch64.run --full Verifying archive integrity... 100% SHA256 checksums are OK. All good. Uncompr…
阅读更多...
时序分解 | Matlab实现SSA-ICEEMDAN麻雀算法优化ICEEMDAN时间序列信号分解

时序分解 | Matlab实现SSA-ICEEMDAN麻雀算法优化ICEEMDAN时间序列信号分解

时序分解 | Matlab实现SSA-ICEEMDAN麻雀算法优化ICEEMDAN时间序列信号分解 目录 时序分解 | Matlab实现SSA-ICEEMDAN麻雀算法优化ICEEMDAN时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现SSA-ICEEMDAN麻雀算法优化ICEEMDAN时间序列信号分解 可…
阅读更多...
java版Spring Cloud+Spring Boot+Mybatis之隐私计算 FATE - 多分类神经网络算法测试

java版Spring Cloud+Spring Boot+Mybatis之隐私计算 FATE - 多分类神经网络算法测试

一、说明 本文分享基于 Fate 使用 横向联邦 神经网络算法 对 多分类 的数据进行 模型训练&#xff0c;并使用该模型对数据进行 多分类预测。 二分类算法&#xff1a;是指待预测的 label 标签的取值只有两种&#xff1b;直白来讲就是每个实例的可能类别只有两种 (0 或者 1)&…
阅读更多...
数据挖掘目标（客户价值分析）

数据挖掘目标（客户价值分析）

import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as snsIn [2]: datapd.read_csv(r../教师文件/air_data.csv)In [3]: data.head()Out[3]: Start_timeEnd_timeFareCityAgeFlight_countAvg_discountFlight_mileage02011/08/182014/0…
阅读更多...
打工人副业变现秘籍，某多/某手变现底层引擎-Stable Diffusion替换背景

打工人副业变现秘籍，某多/某手变现底层引擎-Stable Diffusion替换背景

在Stable Diffusion软件中，使用ControlNet+模型实现固定物体批量替换背景 出图的流程。 一、准备好图片 1.你需要准备好一些白底图或者透明底图用于训练模型。 2.你需要准备同样角度的其他背景色底图用于ControlNet勾线 3.注意检查你的图片尺寸，是否为1:1，…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023