Kevin Learn Kotlin：Android UI (R

a.jpg

简介

RecyclerView 是 Android 中极其重要的一个高级 UI 控件，使用频率非常非常高，App 中 90% 以上的页面都会使用的到。由于其出色的性能和插拔式的架构设计，被全世界广大开发者一致称赞。

25.png

准备

添加 Kotlin 的扩展插件，可以直接使用布局中的控件 id 来操作 view 控件，不再 findViewById()。大大提高工作效率，减少模板代码量。

1. 在根目录 build.gradle 添加:

dependencies {
       ...
        classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlin_version"
    }

2. 在 app/build.gradle 添加：

plugins {
    ...
    id 'kotlin-android-extensions'
}

LinearLayoutManager (线性布局)

1. 效果图

26.png

2. 布局文件

item_fruit.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/iv_fruit"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp"
            android:src="@mipmap/ic_apple"/>

        <TextView
            android:id="@+id/tv_fruit_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:textColor="@color/black"
            android:textSize="18sp"
            android:textStyle="bold"
            android:text="Apple"
            android:layout_marginLeft="10dp"/>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#F3F3F3"/>
</LinearLayout>

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.home.HomeFragment">

    <TextView
        android:id="@+id/text_home"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@color/teal_200"
        android:gravity="center"
        android:textColor="@color/white"
        android:textStyle="bold"
        android:text="LinearLayoutManager 列表布局"
        android:textSize="20sp" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_fruit"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

3. kotlin 代码

class HomeFragment : Fragment(R.layout.fragment_home) {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        rv_fruit.layoutManager = LinearLayoutManager(context,LinearLayoutManager.VERTICAL,false)
        rv_fruit.adapter = MyAdapter()
    }

    inner class MyAdapter : RecyclerView.Adapter<MyViewHolder>(){
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
            val itemView = LayoutInflater.from(context)
                .inflate(R.layout.item_fruit,parent,false)
            return MyViewHolder(itemView)
        }

        override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
            // kotlin 三种方式加载图片资源
            holder.itemView.iv_fruit.setImageResource(R.mipmap.ic_apple)
            // context!! 表示context 不为null
            /*holder.itemView.iv_fruit.setImageDrawable(
                ContextCompat.getDrawable(
                    context!!,
                    R.mipmap.ic_apple
                )
            )

            holder.itemView.iv_fruit.setImageBitmap(
                BitmapFactory.decodeResource(
                    context!!.resources,
                    R.mipmap.ic_apple
                )
            )*/

            holder.itemView.tv_fruit_name.text = "【${position}】Apple"
        }

        override fun getItemCount(): Int {
            return 20
        }

    }

    class MyViewHolder(view: View) : RecyclerView.ViewHolder(view) {}
}

GridLayoutManager (网格布局)

1. 效果图

27.png

2. 布局文件

item_fruit_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/teal_200"
    android:layout_margin="12dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_fruit"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center_horizontal"
        android:src="@mipmap/ic_apple"/>

    <TextView
        android:id="@+id/tv_fruit_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:textColor="@color/white"
        android:textSize="16sp"
        android:layout_gravity="center_horizontal"/>

</LinearLayout>

fragment_dashboard.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.dashboard.DashboardFragment">

    <TextView
        android:id="@+id/text_home"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@color/teal_200"
        android:gravity="center"
        android:textColor="@color/white"
        android:textStyle="bold"
        android:text="GirdLayoutManager 网格布局"
        android:textSize="20sp" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_fruit"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

3. kotlin 代码

class DashboardFragment : Fragment(R.layout.fragment_dashboard) {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        rv_fruit.layoutManager = GridLayoutManager(context, 3)
        rv_fruit.adapter = MyAdapter()
    }

    inner class MyAdapter : RecyclerView.Adapter<MyViewHolder>(){
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
            val itemView = LayoutInflater.from(context)
                .inflate(R.layout.item_fruit_grid,parent,false)
            return MyViewHolder(itemView)
        }

        override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
            holder.itemView.iv_fruit.setImageResource(R.mipmap.ic_apple)

            holder.itemView.tv_fruit_name.text = "【${position}】Apple"
        }

        override fun getItemCount(): Int {
            return 20
        }

    }

    class MyViewHolder(view: View) : RecyclerView.ViewHolder(view) {}