IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> Jetpack学习之Navigation(1) -> 正文阅读

[移动开发]Jetpack学习之Navigation(1)

Navigation(一)

写这个系列文章的原因在于:自己作为一个新人小白,对于android jetpack组件的学习处于一个初入门的阶段。在网上也找了很多的教程,但是大多数都讲解的比较深奥,或者说版本比较老,很多东西不适用于现在。所以想要写一个纯小白文,加强自己对知识点的掌握,也希望能够帮助其他新人学习者。

通过这篇文章你可以学习到怎样通过navigation实现多个fragment页面之间的转跳(学不会拿板砖来找我=-=)
更多别的功能放在后续文章继续讲解
纯Kotlin


  1. 首先第一步的话,还是和其他组件一样,需要引入相关的依赖包

implementation(“androidx.navigation:navigation-fragment-ktx:2.4.2”)
implementation(“androidx.navigation:navigation-ui-ktx:2.4.2”)

  1. 既然要实现fragment之间的转跳,那肯定少不了fragment呀

    创建两个fragment并与对应的xml文件进行绑定(这个应该很简单可以实现)

page1

//这是第一个fragment 也是我们展示出来的fragment,取名叫做MainPage1Fragment
class MainPage1Fragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        //创建对应的xml文件 fragment_page1 并进行对应的绑定
        return inflater.inflate(R.layout.fragment_page1,container,false)
    }
}

page2

//这是第一个fragment 跳转进入的界面
class MainPage2Fragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        //对应的xml布局取名fragment_page2
        return inflater.inflate(R.layout.fragment_page2,container,false)
    }
}

page1_xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<!--    该xml文件放置一个按钮以及一个textview显示文本 -->
    <Button
        android:id="@+id/button_redirects"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Redirects"
        android:textAllCaps="false"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="100dp"
        android:layout_marginStart="50dp"
        android:layout_marginEnd="50dp"/>

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toBottomOf="@id/button_redirects"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="这是page1"
        android:gravity="center" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

page2_xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<!--    一样的布局 放入一个按钮以及一个显示文本-->
    <Button

        android:id="@+id/button_return"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Return"
        android:textAllCaps="false"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="100dp"
        android:layout_marginStart="50dp"
        android:layout_marginEnd="50dp"/>

    <TextView
        android:id="@+id/tv_2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toBottomOf="@id/button_return"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="这是page2"
        android:gravity="center" />
    
</androidx.constraintlayout.widget.ConstraintLayout>
  1. 接下来在项目中添加导航图

在“Project”窗口中,右键点击 res 目录,然后依次选择 New > Android Resource File。此时系统会显示
NewResource File 对话框。 在 File name 字段中输入名称,例如“nav_graph”。 从 Resource
type 下拉列表中选择 Navigation,然后点击 OK。

这一步其实理解成添加一个navigation,然后我们可以在里面进行一些逻辑上的操作,比如说跳转逻辑等等

  1. 在导航图中实现跳转逻辑

直接上代码

<?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_graph"
    app:startDestination="@id/page1Fragment">
<!--    我们一步一步说-->
<!--    首先这个id在你创建navigation的时候自动生成,后面要作为布局引入使用-->
<!--    startDestination后面的属性 就是你界面刚开始需要展现的样子,类似与fragment中的add,我们给第一个fragment取名page1Fragment,那么在布局引入时会直接先调用它-->


    <fragment
        android:id="@+id/page1Fragment"
        android:name="com.example.navigationstudy.MainPage1Fragment"
        tools:layout="@layout/fragment_page1"
        android:label="fragment_page1">
<!--        引入一个fragment 给它设置一个id 以及 name 现阶段layout和label直接照抄,不需要理解什么意思,后面会讲解-->

        <action
            android:id="@+id/action_page2"
            app:destination="@id/page2Fragment"/>
<!--        action字面意思动作,也就是我们需要转跳的逻辑代码
            destination通过有道翻译可以知道是目的地,也就是我们需要转跳进入的位置-->
    </fragment>

    <fragment
        android:id="@+id/page2Fragment"
        android:name="com.example.navigationstudy.MainPage2Fragment"
        tools:layout="@layout/fragment_page2"
        android:label="fragment_page2">

        <action
            android:id="@+id/action_page1"
            app:popUpTo="@id/page1Fragment"/>
<!--        popupto也是就我们想要转跳回去的位置-->
    </fragment>
</navigation>
  1. 最后在MainActivity.xml中引入导航图
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <androidx.fragment.app.FragmentContainerView

        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"


        app:defaultNavHost="true"
        app:navGraph = "@navigation/nav_graph"/>

<!--    其中id可以自己设置,name是固定写法
        navGraph也就是引入我们的导航图,类似于inflate-->

</androidx.constraintlayout.widget.ConstraintLayout>
  1. 最后分别在两个fragment中增加按钮的转跳逻辑,整个代码就大功告成

=======================================================================================

其实如果单纯的想要使用navigation设置两个页面之间的转跳功能的话,逻辑是很清晰的

首先创建两个转跳的fragment界面,然后创建一个导航图,导航图中再实现相关的转跳逻辑,最后在main.xml文件中实现导航图的加载,就完成了

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-06-29 19:12:58  更:2022-06-29 19:13:56 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/25 3:37:00-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码