当前位置：首页 > article >正文

kotlin中的界面组件

article 2025/3/17 20:59:37

我们学习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 实现平滑的水平或垂直页面滑动切换。

感谢观看！！！

下一篇我将讲解行为化组件（工具类）敬请期待

查看全文

http://www.kler.cn/a/588843.html