用Kotlin和Anko实现安卓UI(一)

原文地址：Building a UI with Kotlin and Anko
原文作者： Ankul Jain
译文出自：安卓巴士
译者：MrlLee-2

  开始做安卓UI开发一直是使用XML文件来实现。虽然理论上，UI可以使用Java语言来实现，但并没有太多的用处。不久前，JetBrains推出了Kotlin，一种面向JVM的现代语言，可以很好的实现安卓UI。
  Jetbrains宣称Anko是Android中更快，更轻松的开发风格。Kotlin提供Anko库来作为DSL(领域专用语言)去设计安卓界面，一个简单的例子：
 下面的界面由一个图片和一个按钮组成：


    使用Anko实现如下：

[Java] 查看源文件 复制代码
verticalLayout{

   imageView(R.drawable.anko_logo).

            lparams(width= matchParent) {

                padding = dip(20)

                margin = dip(15)

    }

    button("Tap to Like") {

            onClick { toast("Thanks for the love!") }

    }

}
  我们定义了一个垂直的线性布局作为容器包含图片和按钮，使用lparams定义了布局的位置信息，由Kotlin的内联函数也实现了按钮的点击事件。

使用Anko的优点：

我们可以将UI布局嵌入到代码中，从而使其类型安全。
由于我们不用XML编写，所以它增加了效率，因为在分析XML浪费CPU时间。
在UI的程序化转换之后，我们可以将Anko DSL片段放入一个函数中。这样便于代码重用。
显然，代码更简洁，可读和可掌握性更高。
现在我们使用Anko Layout和Kotlin构建一个to-do app，来列出我们今天需要做的事。
你可以在GitHub上找到这个项目 to-do app
将Anko库添加到Android Studio：
在streamline-android-java-code-with-kotlin去学习如何添加Kotlin到你的安卓项目中，有了Kotlin，我们需要添加Anko依赖在app/build.gradle中，这样我们就可以顺利编译项目了。
[Java] 查看源文件 复制代码
compile [size=1em]’org.jetbrains.anko:anko-sdk15:0.8.3’

// sdk19,21,23 也可以使用

   可以根据你项目的minSdkVersion来添加这个依赖，上面的例子说明15<=minSdkVersion<19，你可以在Anko的GitHub库中找到自己需要的其他Anko依赖库。
  我们准备使用下买按的依赖库：

[Java] 查看源文件 复制代码

compile ‘org.jetbrains.anko:anko-design:0.8.3’

compile ‘org.jetbrains.anko:anko-appcompat-v7:0.8.3’

在Activity中调用Anko布局：
 我们不再使用XML来写布局文件，所以我们不需要XML View,所以也不需要findViewById()方法了。这里我们假设我们的Anko布局类为MainUI,然后我们可以开始写我们的activit内容：

[Java] 查看源文件 复制代码

var ui =MainUI() //MainUI类代替了XML布局

ui.setContentView(this) //this代表Activity类

现在我们创建一个Kotlin文件MainActivity.kt，写上如下代码：
[Java] 查看源文件 复制代码
import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import org.jetbrains.anko.*;

import java.util.*

class MainActivity : AppCompatActivity() {

   val task_list = ArrayList<String>()         //任务清单表

   override fun onCreate(savedInstanceState: Bundle?) {

      super.onCreate(savedInstanceState)

      savedInstanceState?.let {

          val arrayList = savedInstanceState.get("ToDoList")

          task_list.addAll(arrayList as List<String>)

      }

      var adapter=TodoAdapter(task_list)      //定义适配器

      var ui = MainUI(adapter)                //定义将要使用的Anko UI 布局

      ui.setContentView(this)                 //给Activity设置Anko布局

  }

  override fun onSaveInstanceState(outState: Bundle?) {

      outState?.putStringArrayList("ToDoList", task_list)

      super.onSaveInstanceState(outState)

    }

}

  task_list是ArrayList，将填充ListView的TodoAdapter。MainUI(adapter)是我们的Anko UI文件，它采用TodoAdapter类作为适配器参数。所以，接下来我们再创建一个TodoAdapter类。
 用于ListView的TodoAdapter适配器
  TodoAdapter类有一个ArrayList<String>类型的list，并且继承了BaseAdapter。所以我们需要重写一下四个方法：

[Java] 查看源文件 复制代码

     public int getCount()

     public Object getItem(int i)

     public long getItemId(int i)

     public View getView(int i, View view, ViewGroup viewGroup)


    在getView()方法中我们需要使用Anko设计一个表元素的布局。

[Java] 查看源文件 复制代码
override fun getView(i : Int, v : View?, parent : ViewGroup?) : View {

          return with(parent!!.context) {

          //任务数从1开始

          var taskNum: Int = i +1

         //清单表元素布局

         linearLayout {

               lparams(width = matchParent, height = wrapContent)

               padding = dip(10)

               orientation = HORIZONTAL

               //任务号

              textView {

                   id = R.id.taskNum

                   text=""+taskNum

                   textSize = 16f

                   typeface = Typeface.MONOSPACE

                   padding =dip(5)

              }

              //任务名

              textView {

                    id = R.id.taskName

                   text=list.get(i)

                   textSize = 16f

                   typeface = DEFAULT_BOLD

                   padding =dip(5)

              }

         }

     }

  }

在这个方法中，我们返回一个包含一个horizontalListView布局列表项的视图。这是使用Kotlin的with语法完成的，它允许我们一次在对象实例上调用很多方法。
每个列表项包含两个textview用于显示任务号和任务名称。
linearLayout，textView是扩展功能。扩展功能使我们有能力启用具有新功能的任何类。
text，textSize，typeface在android.widget.TextView有getter和setter方法，padding是Anko添加的属性。
继续下一步，我们需要定义列表的操作功能。因此，我们需要在TodoAdapter中定义add(String)和delete(Int)方法。add(String)将任务名称作为参数添加到任务中。delete(Int)将任务所在的位置作为参数来删除任务。下面是具体的实现：
[Java] 查看源文件 复制代码

   //将任务添加到任务清单的方法     

  fun add(text: String) {         

        list.add(list.size, text)         

        notifyDataSetChanged()          //更新数据    

 }      

  //将任务从任务清单中移除的方法     

  fun delete(i:Int) {        

        list.removeAt(i)         

        notifyDataSetChanged()          //更新数据     

  }

所以，现在我们设计了列表，我们也可以添加和删除项目到我们的列表中。接下来完成此适配器类的代码。
[Java] 查看源文件 复制代码

   import android.graphics.Typeface

   import android.graphics.Typeface.DEFAULT_BOLD

   import android.view.View

   import android.view.ViewGroup

   import android.widget.BaseAdapter

   import android.widget.LinearLayout.HORIZONTAL

   import org.jetbrains.anko.*

   import java.util.*class 



    TodoAdapter(val list: ArrayList<String> = ArrayList<String>()) : BaseAdapter() {    

                 override fun getView(i : Int, v : View?, parent : ViewGroup?) : View {        

                           return with(parent!!.context) {            

                                     //taskNum will serve as the S.No. of the list starting from 1            

                                     var taskNum: Int = i +1            

                                     //Layout for a list view item            

                                     linearLayout {                

                                            id = R.id.listItemContainer                

                                            lparams(width = matchParent, height = wrapContent)                

                                            padding = dip(10)                

                                            orientation = HORIZONTAL                

                                               textView {                    

                                                     id = R.id.taskNum                   

                                                     text=""+taskNum                   

                                                     textSize = 16f                  

                                                     typeface = Typeface.MONOSPACE                

                                                     padding =dip(5)               

                                               }                

                                            textView {                   

                                                    id = R.id.taskName                   

                                                    text=list.get(i)                   

                                                    textSize = 16f                    

                                                    typeface = DEFAULT_BOLD                   

                                                    padding =dip(5)               

                                             }           

                                      }        

                                  }   

                             }   

             override fun getItem(position : Int) : String {        

                        return list[position    

              }    

             override fun getCount() : Int {       

                        return list.size   

              }    

             override fun getItemId(position : Int) : Long {        

                       //can be used to return the item's ID column of table        

                       eturn 0L    

              }    

             //function to add an item to the list    

             fun add(text: String) {             

                     list.add(list.size, text)        

                     notifyDataSetChanged()   

             }    

            //function to delete an item from list   

            fun delete(i:Int) {        

                     list.removeAt(i)        

                     notifyDataSetChanged()   

            }

  }


  注意，使用Anko DSL类中必须要导入org.jetbrains.anko.*。