Navigation(一)
写这个系列文章的原因在于:自己作为一个新人小白,对于android jetpack组件的学习处于一个初入门的阶段。在网上也找了很多的教程,但是大多数都讲解的比较深奥,或者说版本比较老,很多东西不适用于现在。所以想要写一个纯小白文,加强自己对知识点的掌握,也希望能够帮助其他新人学习者。
通过这篇文章你可以学习到怎样通过navigation实现多个fragment页面之间的转跳(学不会拿板砖来找我=-=) 更多别的功能放在后续文章继续讲解 纯Kotlin
- 首先第一步的话,还是和其他组件一样,需要引入相关的依赖包
implementation(“androidx.navigation:navigation-fragment-ktx:2.4.2”) implementation(“androidx.navigation:navigation-ui-ktx:2.4.2”)
-
既然要实现fragment之间的转跳,那肯定少不了fragment呀 创建两个fragment并与对应的xml文件进行绑定(这个应该很简单可以实现)
page1
class MainPage1Fragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_page1,container,false)
}
}
page2
class MainPage2Fragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
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>
- 接下来在项目中添加导航图
在“Project”窗口中,右键点击 res 目录,然后依次选择 New > Android Resource File。此时系统会显示 NewResource File 对话框。 在 File name 字段中输入名称,例如“nav_graph”。 从 Resource type 下拉列表中选择 Navigation,然后点击 OK。
这一步其实理解成添加一个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/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>
- 最后在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>
- 最后分别在两个fragment中增加按钮的转跳逻辑,整个代码就大功告成
=======================================================================================
其实如果单纯的想要使用navigation设置两个页面之间的转跳功能的话,逻辑是很清晰的
首先创建两个转跳的fragment界面,然后创建一个导航图,导航图中再实现相关的转跳逻辑,最后在main.xml文件中实现导航图的加载,就完成了
|