Android仿微信5实现滑动导航条

Android仿微信5实现滑动导航条

简介

本文主要介绍如何使用Android Studio开发一个仿微信5的滑动导航条,包括悬浮指示器,顶部导航栏,以及各个页面内容的显示等,方便开发者在自己的应用中快速实现类似的功能。

开发步骤

  1. 新建Android Studio项目。在创建项目的时候,需要选择“Bottom Navigation Activity”模板,这个模板已经默认提供了底部导航栏,可以快速实现滑动导航条的效果。

  2. 修改布局文件。打开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">

    <include layout="@layout/layout_top_toolbar"/>

    <FrameLayout
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottom_nav"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/top_toolbar"
        app:navGraph="@navigation/mobile_navigation" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:labelVisibilityMode="unlabeled"
        app:itemIconTint="@color/bottom_nav_color_selector"
        app:itemTextColor="@color/bottom_nav_color_selector"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

使用include标签引入了名为layout_top_toolbar.xml的内容,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/top_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:title="微信"
    app:titleTextColor="@android:color/white" />

其中,layout_top_toolbar.xml中定义了一个支持返回的Toolbar。在activity_main.xml中通过引用,将其展示在顶部位置。另外,修改app:labelVisibilityMode="unlabeled"可以隐藏底部导航栏的文字标签。

  1. 定义滑动导航条中各页面之间的切换。在res/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.app.ui.home.HomeFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/navigation_dashboard"
        android:name="com.example.app.ui.dashboard.DashboardFragment"
        android:label="@string/title_dashboard"
        tools:layout="@layout/fragment_dashboard" />

    <fragment
        android:id="@+id/navigation_notifications"
        android:name="com.example.app.ui.notifications.NotificationsFragment"
        android:label="@string/title_notifications"
        tools:layout="@layout/fragment_notifications" />
</navigation>
  1. 在MainActivity中实现滑动导航条。在MainActivity中,需要将顶部导航栏与底部导航栏关联起来,在导航栏切换的时候显示相应的页面内容。示例如下:
class MainActivity : AppCompatActivity() {

    private lateinit var appBarConfiguration: AppBarConfiguration

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val toolbar: Toolbar = findViewById(R.id.top_toolbar)
        setSupportActionBar(toolbar)

        val navController = findNavController(R.id.nav_host_fragment)
        appBarConfiguration = AppBarConfiguration(navController.graph)
        setupActionBarWithNavController(navController, appBarConfiguration)

        val bottomNav: BottomNavigationView = findViewById(R.id.bottom_nav)
        bottomNav.setupWithNavController(navController)
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.menu_main, menu)
        return true
    }

    override fun onSupportNavigateUp(): Boolean {
        val navController = findNavController(R.id.nav_host_fragment)
        return navController.navigateUp(appBarConfiguration)
                || super.onSupportNavigateUp()
    }
}

在onCreate()方法中,先是找到activity_main.xml中的各个控件对象,然后通过setupWithNavController()方法将底部导航栏与NavController对象关联。在关联之后,就可以通过点击底部导航栏的各个项目,切换到相应的页面。

至此,仿微信5实现滑动导航条的开发就已经完成了。

示例说明

示例1:改变导航栏图标颜色

如果要改变底部导航栏的图标颜色,需要在res/color/目录下新建一个选择器文件bottom_nav_color_selector.xml文件,内容如下:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_checked="true"/>
    <item android:color="@android:color/darker_gray" android:state_checked="false"/>
</selector>

这个选择器文件指定底部导航栏中选中图标的颜色为colorAccent,未选中的图标颜色为darker_gray。

示例2:添加页面内容

如果需要添加新的页面内容,需要做如下步骤:

  1. 在res/layout/目录下新建一个布局文件,定义页面显示内容。

  2. 在res/menu/目录下新建一个菜单文件,定义底部导航栏中显示的图标和标签。

  3. 在mobile_navigation.xml中添加相应的指向新页面的Fragment。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Android仿微信5实现滑动导航条 - Python技术站

(0)
上一篇 2023年5月23日
下一篇 2023年5月23日

相关文章

  • Java 数组获取最大和最小值的实例实现

    让我为您详细讲解如何实现Java数组获取最大和最小值。 1. 获取数组中的最大值 我们可以通过以下步骤获取Java数组中的最大值: 声明和初始化一个数组 使用for循环遍历数组,逐个比较数组元素大小,将最大值储存在一个变量中 输出最大值 以下是一个例子: //声明一个整型数组,包含10个元素 int[] array = {10, 8, 20, 5, 14, …

    Java 2023年5月26日
    00
  • Java实现的时间戳与date对象相互转换功能示例

    以下是“Java实现的时间戳与date对象相互转换功能示例”的攻略: 1. 使用Date对象实现时间戳与日期字符串的相互转换 1.1 时间戳转日期字符串 import java.text.SimpleDateFormat; import java.util.Date; public class TimestampToDateStr { public stat…

    Java 2023年5月20日
    00
  • 概述Java的struts2框架

    概述Java的struts2框架 简介 Java的struts2框架是一个MVC(Model-View-Controller)模式的Web框架,它借鉴了许多JSP/Servlet和Struts的优点,同时也做了很多改进,达到了更优秀的Web应用开发效果。struts2框架可以很好的帮助开发人员快速搭建Web应用程序,并且可以方便地进行功能扩展和维护。 str…

    Java 2023年5月20日
    00
  • Maven打包上云的实现步骤

    下面我将为你详细讲解”Maven打包上云的实现步骤”的完整攻略。 一、背景介绍 随着云计算和微服务的兴起,很多应用都开始在云上部署和运行。为了方便在云上部署和管理应用,我们往往需要将应用打包成云原生的镜像,并通过容器技术进行部署。在Java应用中,我们可以使用Maven工具来进行应用的打包和构建。 二、Maven打包步骤 Maven是一个开源的项目管理工具,…

    Java 2023年5月19日
    00
  • java日期格式化SimpleDateFormat的使用详解

    Java日期格式化SimpleDateFormat的使用详解 概述 在Java编程中,我们经常需要将日期时间类型的数据格式化成我们需要的字符串格式。Java提供了一个SimpleDateFormat类,可以帮助我们将日期时间类型的数据格式化为指定的字符串格式。 SimpleDateFormat类可以在Java的java.text包中找到,它是一个具有丰富功能…

    Java 2023年5月20日
    00
  • java maven项目如何读取配置文件信息

    要让Java的Maven项目读取配置文件信息,通常有以下几个步骤。 1.将配置文件放置到资源目录下 Maven项目的标准目录结构中,资源文件通常放置在src/main/resources目录下。将配置文件放置到该目录下,可以方便项目的打包和部署。在这个目录下新建一个名为config.properties的配置文件,文件内容如下: database.host=…

    Java 2023年5月19日
    00
  • MybatisPlus特殊查询的实现介绍

    MybatisPlus特殊查询的实现介绍 MybatisPlus是基于Mybatis的一个增强库,其中包括了很多常用操作的封装,极大地降低了开发者的编码难度和时间成本,同时也提高了代码的可读性和可维护性。 但是有些时候,简单的CRUD操作并不能满足我们的需求。MybatisPlus提供了很多特殊查询的实现方式,本文将简单介绍其中的几种。 前置条件 在具体实现…

    Java 2023年5月20日
    00
  • java 获取冒号后面的参数(正则)实现代码

    获取冒号后面的参数可以使用正则表达式进行匹配。以下是一个实现代码的完整攻略: 首先,我们需要从文本中匹配出所有的冒号后面的参数,可以使用正则表达式来完成。Java中使用Pattern类和Matcher类来完成正则表达式的匹配。 正则表达式的模式应该为冒号后面的任意字符,可以使用“:.+”表示,其中“:”表示冒号,“.”表示匹配任意字符,“+”表示匹配前面的字…

    Java 2023年6月15日
    00
合作推广
合作推广
分享本页
返回顶部