用Kotlin实现RecyclerView探索

自从Kotlin被Google钦定后热闹了一阵子，感觉应该拥抱一下互联网，特此记录一下自己的Kotlin学习过程

1、Kotlin介绍

Kotlin被Google扶正后，大家学习热情高涨，试着去用一下发现确实好用，有更方便的语言特性，开发起来更加迅速，代码更加简洁，并且与Java兼容！这篇为什么我要改用Kotlin写得很好，也许会激发你学习的热情！但是毕竟是一门语言，学习是一个过程，不可一蹴而就，闲暇时候学点也是极好的。
基本的语法可以看一下：Kotlin-in-Chinese

2、配置工程

Project Gradle：

buildscript {
    ext.kotlin_version = '1.1.2-3'
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlin_version"
    }
}

allprojects {
    repositories {
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

App Gradle：

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.1"
    defaultConfig {
        applicationId "com.jun.kotlinlearn"
        minSdkVersion 15
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:25.1.1'
    testCompile 'junit:junit:4.12'
    compile "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
}

这里其实应用kotlin-android即可使用Kotlin，但是强烈建议加上kotlin-android-extensions， Kotlin Android Extensions是另一个Kotlin团队研发的插件，让我们用更少的代码来开发程序 。包括了view的绑定。该插件自动创建了很多的属性来让我们直接访问XML中的view，不需要我们在布局中去找到这些views。

3、AS插件

Kotlin插件

插件不是必须的，但是不装的话想象不出来怎么写Kotlin，都是Jetbrain出品用起来就是了~

4、Hello World

对于才创建的工程可以选中后点击Code->Convert Java File to Kotlin File，将Java文件转换为Kotlin文件：

Paste_Image.png

转换后的Class风格如下：

Hello World

也可以New kt文件：

New File

以上就是Kotlin在Android studio上的配置与介绍

实现一个简易的RecyclerView

经过以上简单的介绍后，下面我们来使用Kotlin来实现Android的简易界面

首先是Activity代码，只包含了一个RecyclerView

class MainActivity : AppCompatActivity() {

    val items = listOf(
            "给初学者的RxJava2.0教程（七）: Flowable",
            "Android之View的诞生之谜",
            "Android之自定义View的死亡三部曲之Measure",
            "Using ThreadPoolExecutor in Android ",
            "Kotlin 泛型定义与 Java 类似，但有着更多特性支持。",
            "Android异步的姿势，你真的用对了吗？",
            "Android 高质量录音库。",
            "Android 边缘侧滑效果，支持多种场景下的侧滑退出。"
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val listview = findViewById(R.id.list_view) as RecyclerView
        listview.layoutManager = LinearLayoutManager(this)
        listview.adapter = MainAdapter(items)
    }
}

所使用的layout文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

对这里不需要find view 也不需要用其它方式bind，直接import即可使用该view，并且也需要set其属性，直接等于就好。

RecyclerView所使用的Adapter：

class MainAdapter(val items : List<String>) : RecyclerView.Adapter<MainAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(TextView(parent.context))
    }

    override fun getItemCount(): Int = items.size

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.textView.text = items[position]
    }

    class ViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)
}

这里的：override fun getItemCount(): Int = items.size 直接返回不需要return，非常方便。

列表效果图

列表效果图

二、使用API实现列表

以上是一个简单的Kotlin使用，list数据是写死的，并没有太多的参考价值，接下来尝试一下调用API实现列表。

1、在此借用Gank.io来实现API请求例子：

class Request(val url: String) {

    companion object {
        val BASE_URL = "http://gank.io/api/"
    }

    fun run(): String {
        val resultStr = URL(url).readText()
        return resultStr
    }
}

这里 URL(url).readText()就可以将数据请求到，就是这么方便...小规模的请求这个肯定是没问题了

2、定义GankNews：

data class GankNews(val _id: String,
                    val createdAt: String,
                    val desc: String,
                    val publishedAt: String,
                    val type: String,
                    val url: String,
                    val used: Boolean,
                    val who: String)

这里不需要像Java那样写set和get，在构造函数内定义成val即可。

3、再用Gson进行反序列化：

    compile "com.google.code.gson:gson:2.8.0"

class DataLoader {

    fun getGankNewsList(date:String): List<GankNews> {
        val url = Request.BASE_URL+date
        return Gson().fromJson(Request(url).run(),GankNewsList::class.java).results
    }
}

这样即取到了我们所需的list

4、RecyclerView所使用的Adapter：

class GankNewsAdapter(val items : List<GankNews>, val itemClickListener: (GankNews)->Unit) : RecyclerView.Adapter<GankNewsAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_view_list_layout, parent, false)
        return ViewHolder(view, itemClickListener)
    }

    override fun getItemCount(): Int = items.size

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.bind(items[position])
    }

    class ViewHolder(val view: View, val itemClickListener: (GankNews) -> Unit) : RecyclerView.ViewHolder(view) {
        fun bind(news: GankNews) {
            view.title.text = news.desc
            view.desc.text = news.type
            view.setOnClickListener {
                itemClickListener(news)
            }
        }
    }
}

6、列表的Fragment，好像也没啥好说的

class GankNewsFragment : Fragment() {
    companion object {
        fun newInstance() : GankNewsFragment {
            var fragment = GankNewsFragment()
            return fragment
        }
    }

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater!!.inflate(R.layout.fragment_news_list_layout, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        recyclerView.layoutManager = LinearLayoutManager(activity)
        getGanksNewsList()
    }

    fun getGanksNewsList() = doAsync {
        val news = DataLoader().getGankNewsList("data/all/20/2")
        uiThread {
            recyclerView.adapter = GankNewsAdapter(news) {
                val intent = Intent()
                intent.setClass(activity, WebActivity::class.java)
                intent.putExtra("url", it.url)
                startActivity(intent)
            }
        }
    }
}

可以看到使用doAsync和uiThread等相关的函数可以更好进行线程的控制，再也不用写一大堆异步函数了

列表效果图

Gank效果图

三、使用Jsoup 实现的数据填充

有时候想做点应用，而又没有API时，我们都会使用爬虫去抓取数据应用到我们APP上，而现在Jsoup和Kotlin结合总觉得有珠联璧合的感觉，以下用cnbeta来撸一个新闻列表。

1、首先是Jsoup爬取网页数据

private fun loadList() = doAsync {
        val result = getLinks("http://www.cnbeta.com/")
        uiThread {
            recyclerView.adapter = MainAdapter(result) {
                val url = "http://m.cnbeta.com/view" + it.url.substring(it.url.lastIndexOf("/"))
                val intent = Intent()
                intent.setClass(activity, WebActivity::class.java)
                intent.putExtra("url", url)
                startActivity(intent)
            }
        }
    }

    private fun getLinks(url :String): ArrayList<News>{
        val links = ArrayList<News>()
        val doc: Document = Jsoup.connect(url).get()
        val elements: Elements = doc.select("div.items-area").first().allElements.first().children()

        for (e in elements) {
            if (e.getElementsByTag("dt").text().isEmpty())
                continue
            links.add(News(e.getElementsByTag("dt").text(),
                    e.getElementsByTag("dd").text(),
                    e.select("a[href]").first().attr("href"),
                    e.select("img[src]").first().attr("src")))
        }
        return links
    }

然后加个图片加载器

    compile "com.github.bumptech.glide:glide:3.6.1"

再写个adapter

class MainAdapter(val items : List<News>, val itemClickListener: (News)->Unit) : RecyclerView.Adapter<MainAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_view_list_layout, parent, false)
        return ViewHolder(view, itemClickListener)
    }

    override fun getItemCount(): Int = items.size

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.bind(items[position])
    }

    class ViewHolder(val view: View, val itemClickListener: (News)->Unit) : RecyclerView.ViewHolder(view) {
        fun bind(news: News) {
            view.title.text = news.title
            view.desc.text = news.desc
            if (news.image.isNotEmpty()) {
                Glide.with(view.context).load(news.image).into(view.image)
                view.image.visibility = View.VISIBLE
            } else{
                view.image.visibility = View.GONE
            }

            view.setOnClickListener {
                itemClickListener(news)
            }
        }
    }
}

然后就已经实现了完整的新闻列表页，效果图如下：

列表效果图：

cnbeta新闻列表

这里的难点可能是网页标签的选取，其它代码和上面的没有什么两样！

以上就是kotlin的一个简单的使用，有不明白的地方可以看一下GitHub地址上的源码，如有错误多谢指出！