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

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 和 LayoutManagerAdapter 负责将数据集合绑定到 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

工作原理
  • 基于 RecyclerViewViewPager2 是基于 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

相关文章:

  • 视频编码中视频帧的类型解析
  • (分块)洛谷 P2801 教主的魔法 题解
  • 上传本地项目到GitHub
  • windows系统amd核显机器安装cpu版本pytorch(仅用于学习)
  • 迁移Kubuntu到thinkbook14+ 2025
  • 设计模式在MyBatis中的具体应用与分析
  • [ISP] 人眼中的颜色
  • Manus 技术探索 - 使用 gVisor 在沙箱内运行 Ubuntu 容器并通过远程浏览器访问
  • 电子电气架构 --- 智能座舱和车载基础软件简介
  • SEO新手基础优化三步法
  • 向量数据库技术系列五-Weaviate介绍
  • (一)微服务初见之 Spring Cloud 介绍
  • ChatPromptTemplate的使用
  • 将分支`XXX`合并到远程分支`master
  • MySQL 数据库备份
  • 使用 Docker 部署前端项目全攻略
  • 【操作系统安全】任务2:用户与用户组
  • 基于小参数量大语言模型(Small Language Models) ---- 在制造业落地降本增效应用:可行性研究初探
  • LinuX---Shell---变量
  • 2025-03-13 学习记录--C/C++-PTA 练习2-14 求奇数分之一序列前N项和