kotlin中的界面组件
我们学习Android第一节应该都是界面的布局,下列我将讲述jet pack中常用的界面组件如下
UI 构建(Compose)、列表展示(RecyclerView)、
导航管理(Navigation)和滑动交互(ViewPager2)。
Jetpack Compose
工作原理
- 声明式编程模型:Jetpack Compose 采用声明式编程方式,开发者通过编写
@Composable
注解的函数来描述 UI 的样子。这些函数接收数据作为输入,根据数据状态生成对应的 UI 元素。当数据发生变化时,Compose 框架会自动检测到这些变化,并重新调用相关的@Composable
函数,从而更新 UI 以反映新的数据状态。这种方式避免了传统命令式编程中手动更新 UI 的繁琐操作,使代码更加简洁和易于维护。 - 组合与重组:在 Compose 中,UI 是由多个
@Composable
函数组合而成的。每个@Composable
函数可以调用其他@Composable
函数,形成一个树形结构。当数据变化触发重组时,Compose 框架会智能地只重新计算和更新受影响的部分,而不是整个 UI 树,从而提高性能。 - 状态管理:Compose 提供了多种状态管理机制,如
mutableStateOf
用于创建可变状态。状态的变化会触发重组,从而更新依赖该状态的 UI 元素。
使用方法
- 添加依赖:在项目的
build.gradle
文件中添加 Jetpack Compose 的依赖。
implementation 'androidx.compose.ui:ui:1.4.3'
implementation 'androidx.compose.material:material:1.4.3'
implementation 'androidx.compose.ui:ui-tooling-preview:1.4.3'
- 创建
@Composable
函数:编写一个简单的@Composable
函数来显示文本。
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
@Composable
fun Greeting(name: String) {
Text(text = "Hello, $name!")
}
- 在 Activity 中使用:在 Activity 中设置 Compose 内容。
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
Surface(modifier = Modifier.fillMaxSize()) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Greeting("Jetpack Compose")
}
}
}
}
}
}
RecyclerView
工作原理
- 视图复用机制:
RecyclerView
通过ViewHolder
来实现视图的复用。ViewHolder
是一个用于缓存视图的容器,它包含了列表项的所有子视图。当列表滚动时,RecyclerView
会回收那些移出屏幕的ViewHolder
,并将其重新用于显示新的列表项,避免了频繁创建和销毁视图,从而提高了性能。 - Adapter 和 LayoutManager:
Adapter
负责将数据集合绑定到RecyclerView
的每个条目上。它需要实现onCreateViewHolder
方法来创建新的ViewHolder
,以及onBindViewHolder
方法来将数据绑定到ViewHolder
中的视图上。LayoutManager
则负责确定RecyclerView
中条目的布局方式,如线性布局、网格布局或瀑布流布局。
使用方法
- 添加依赖:在项目的
build.gradle
文件中添加RecyclerView
的依赖
implementation 'androidx.recyclerview:recyclerview:1.3.0'
- 创建布局文件:创建列表项的布局文件
item_layout.xml
。
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp" />
- 创建 Adapter:创建一个继承自
RecyclerView.Adapter
的子类。
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
class MyAdapter(private val itemList: List<String>) : RecyclerView.Adapter<MyAdapter.MyViewHolder>() {
class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val textView: TextView = itemView.findViewById(R.id.textView)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false)
return MyViewHolder(view)
}
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
val item = itemList[position]
holder.textView.text = item
}
override fun getItemCount(): Int {
return itemList.size
}
}
- 在 Activity 中使用:在 Activity 中设置
RecyclerView
。
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
recyclerView.layoutManager = LinearLayoutManager(this)
val itemList = listOf("Item 1", "Item 2", "Item 3")
val adapter = MyAdapter(itemList)
recyclerView.adapter = adapter
}
}
Navigation Component
工作原理
- 导航图(Navigation Graph):导航图是一个 XML 文件,用于定义应用中的所有目的地(如 Fragment、Activity)以及它们之间的导航关系。导航图中包含了目的地的定义、动作(Action)的定义,动作表示从一个目的地到另一个目的地的导航操作。
- NavHostFragment:作为导航图的容器,它是一个特殊的 Fragment,负责显示导航图中的目的地。在 Activity 的布局文件中添加
NavHostFragment
,并指定其对应的导航图。 - NavController:用于控制导航操作,如导航到指定的目的地、返回上一个目的地等。
NavController
可以通过NavHostFragment
获取,然后调用其navigate
方法进行导航。
使用方法
- 添加依赖:在项目的
build.gradle
文件中添加 Navigation Component 的依赖。
implementation 'androidx.navigation:navigation-fragment-ktx:2.5.3'
implementation 'androidx.navigation:navigation-ui-ktx:2.5.3'
- 创建导航图:创建一个
navigation_graph.xml
文件。<navigation xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/nav_graph" app:startDestination="@id/firstFragment"> <fragment android:id="@+id/firstFragment" android:name="com.example.app.FirstFragment" android:label="First Fragment"> <action android:id="@+id/action_firstFragment_to_secondFragment" app:destination="@id/secondFragment" /> </fragment> <fragment android:id="@+id/secondFragment" android:name="com.example.app.SecondFragment" android:label="Second Fragment" /> </navigation>
- 在 Activity 布局中添加
NavHostFragment
:在activity_main.xml
中添加NavHostFragment
。
<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:defaultNavHost="true"
app:navGraph="@navigation/nav_graph" />
- 在 Fragment 中进行导航操作:在
FirstFragment
中添加导航逻辑。
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.navigation.fragment.findNavController
import com.example.app.R
class FirstFragment : Fragment(R.layout.fragment_first) {
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
val button: View = view.findViewById(R.id.button)
button.setOnClickListener {
findNavController().navigate(R.id.action_firstFragment_to_secondFragment)
}
}
}
ViewPager2
工作原理
- 基于 RecyclerView:
ViewPager2
是基于RecyclerView
实现的,因此它继承了RecyclerView
的高性能和灵活性。ViewPager2
同样使用ViewHolder
来复用视图,通过Adapter
来绑定数据。 - 滑动和分页:
ViewPager2
支持水平和垂直滑动,通过设置orientation
属性可以指定滑动方向。它还支持分页功能,用户可以通过滑动屏幕在不同的页面之间切换。
使用方法
- 添加依赖:在项目的
build.gradle
文件中添加ViewPager2
的依赖。
implementation 'androidx.viewpager2:viewpager2:1.1.0-beta01'
- 创建布局文件:创建页面的布局文件
page_layout.xml
。
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="24sp" />
- 创建 Adapter:创建一个继承自
RecyclerView.Adapter
的子类。
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
class PageAdapter(private val pageList: List<String>) : RecyclerView.Adapter<PageAdapter.PageViewHolder>() {
class PageViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val textView: TextView = itemView.findViewById(R.id.textView)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PageViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.page_layout, parent, false)
return PageViewHolder(view)
}
override fun onBindViewHolder(holder: PageViewHolder, position: Int) {
val page = pageList[position]
holder.textView.text = page
}
override fun getItemCount(): Int {
return pageList.size
}
}
- 在 Activity 中使用:在 Activity 中设置
ViewPager2
。
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager2.widget.ViewPager2
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val viewPager2: ViewPager2 = findViewById(R.id.viewPager2)
val pageList = listOf("Page 1", "Page 2", "Page 3")
val adapter = PageAdapter(pageList)
viewPager2.adapter = adapter
}
}
总结:
Jetpack Compose 以声明式编程高效构建 UI 并随数据自动更新,
RecyclerView 凭借视图复用机制高性能展示大量数据列表,
Navigation Component 利用导航图和控制器简化应用内页面跳转逻辑,
ViewPager2 基于 RecyclerView 实现平滑的水平或垂直页面滑动切换。
感谢观看!!!
下一篇我将讲解行为化组件(工具类) 敬请期待