kotlin中的界面组件
目录
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。 - 创建 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) : RecyclerView.Adapter() { 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文件。在 Activity 布局中添加
NavHostFragment：在activity_main.xml中添加NavHostFragment。在 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。 - 创建 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) : RecyclerView.Adapter() { 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 实现平滑的水平或垂直页面滑动切换。 感谢观看！！！ 下一篇我将讲解行为化组件（工具类） 敬请期待