Kotlin Anko Layout+MVP(Glide,Retrofit,OkHttp,RxJava)开发Android运用程序

Kotlin编程开发Android运用程序的相关介绍：

• Kotlin编程之AndroidStudio（包括3.0与2.x版本）配置与使用
• Kotlin编程开发Android运用程序（Volley+Gson依赖库）
• Kotlin编程之Kotlin Android Extensions（扩展插件）
• Kotlin编程之Glide v4 Generated API(Unresolved reference GlideApp)
• Kotlin Android Extensions+Android MVP项目(RxJava+Rerotfit+OkHttp+Glide)
• AndroidStudio2.2-2.3配置Anko插件

---

介绍：

Anko是一个Kotlin库，使Android运用程序开发更快更容易，代码整洁，易于阅读，且让你忘记Android SDKfor Java的粗糙边缘。

Anko库中包含的子库：

• Anko Commons : 一个轻量级的库，包含intent,dialogs,logging等的帮助。

• Anko Layouts :一种快速和类型安全的方式来编写动态的Android布局

• Anko SQLite :用于Android SQLite的查询DSL和解析后的集合。

• Anko Coroutines :基于kotlinx.corountines库的实用程序。

---

这里，使用的是Anko Lyouat v0.10.0版本。

分析项目：

案例中页面图：

实现UI的过程分析：使用Anko-Layout实现

• 最外层用Activity，写一个RelativeLayout作为根布局，用于添加Fragment。
• Framgent的根布局包裹一个标题的TextView,和一个滚动视图的RecyclerView。
• 滚动视图中item是用一个布局包裹一个ImageView和一个TextView.

业务模块分析：

• 使用MVP架构为项目分离关注点。
• Retrofit+OkHttp作为网络异步框架
• RxJava+RxAndroid作为响应式框架
• Glide作为图片异步加载框架

在Gradle配置依赖库：

根据上面的分析 ,在项目的Gradle中 添加相关的Anko Layout包和相关业务依赖包：AndroidStudio2.2-2.3配置Anko插件。

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    testCompile 'junit:junit:4.12'
    compile "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
    // 添加Anko Layouts，根据当前sdk来决定版本号
    compile 'org.jetbrains.anko:anko-sdk25:0.10.0'
    compile 'org.jetbrains.anko:anko-appcompat-v7:0.10.0'
    // 添加协调 listeners for Anko Layouts
    compile 'org.jetbrains.anko:anko-sdk25-coroutines:0.10.0'
    compile 'org.jetbrains.anko:anko-appcompat-v7-coroutines:0.10.0'
    // RecyclerView-v7
    compile 'org.jetbrains.anko:anko-recyclerview-v7:0.10.0'
    compile 'org.jetbrains.anko:anko-recyclerview-v7-coroutines:0.10.0'
    compile 'com.android.support:recyclerview-v7:25.3.1'


    //Glide v4
    compile 'com.github.bumptech.glide:glide:4.0.0-RC0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.0.0-RC0'
    //Retrofit 2.x
    compile 'com.squareup.retrofit2:retrofit:2.3.0'
    compile 'com.squareup.retrofit2:converter-gson:2.3.0'
    compile 'com.squareup.retrofit2:adapter-rxjava:2.3.0'
    //OkHttp 3.x
    compile 'com.squareup.okhttp3:okhttp:3.8.0'
    compile 'com.squareup.okhttp3:logging-interceptor:3.8.0'
    //RxJava 1.x
    compile 'io.reactivex:rxjava:1.3.0'
    compile 'io.reactivex:rxandroid:1.2.1'
}

开始编写代码：

1. 在Activity中编写一个RelativeLayout:

这里使用AnkoComponent接口，来创建DSL的UI。

class MovieListActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //Anko Component接口的扩展方法setContentView（）
        ActivityUI().setContentView(this)
        .........
    }
}
/**
 * 使用AnkoComponent作为
 */
class ActivityUI : AnkoComponent {
    override fun createView(ui: AnkoContext) = with(ui) {
        relativeLayout{//RelativeLayout作为根布局
           id= ViewID.CONTENT_LAYOUT//设置id，方便添加Fragment
        }
    }
}

2.在Fragment中编写一个标题和一个滚动视图：

在Fragment的onCreateView()中使用UI { ... }.view来构建Layout DSL。一个竖直方向的Linearlayout包裹一个TextView和RecyclerView。

class MovieListFragment : Fragment(), MovieListConstract.View {

   lateinit var recyclerView: RecyclerView
   lateinit var rootView :View

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       rootView = UI {
            verticalLayout {
                lparams(width= matchParent,height = matchParent)//设置布局的宽高
                textView(R.string.title) {//设置tile
                    textSize = 18f//字体大小
                    paint.isFakeBoldText = true//设置粗体
                    gravity = Gravity.CENTER_HORIZONTAL//控件中字体水平居中
                    verticalPadding = dip(10) //控件的上下Padding值
                    textColor=Color.WHITE//字体颜色
                    backgroundResource = R.color.colorPrimaryDark//控件的背景
                }.lparams(width = matchParent, height = wrapContent)//控件的宽高
                recyclerView {//设置滚动视图RecyclerView
                    id = ViewID.RECYCLERVIEW_ID//控件的id
                }.lparams(width = matchParent, height = matchParent)//控件的宽高
            }
        }.view
        // 根据id获取指定控件
        recyclerView = rootView.findViewById(ViewID.RECYCLERVIEW_ID) as RecyclerView 
        return rootView
    }

    ......//省略部分代码

    companion object {
        val instance = MovieListFragment()
        val TAG = MovieListFragment::class.java.simpleName
    }
}

然后在Activity添加Framgent:

class MovieListActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        ActivityUI().setContentView(this)//Anko Component接口的扩展方法setContentView（）

        var view=MovieListFragment.instance
        MovieListPresenter(view)
        supportFragmentManager.beginTransaction().add(ViewID.CONTENT_LAYOUT, view, MovieListFragment.TAG).commit()
    }
}

3. 编写RecyclerView中的item:

使用AnkoComponent来构建item的UI.一个水平方向的LinearLayout包裹一个ImageView和一个TextView。

class MovieListAdapter(val context: Context,var list: List) : RecyclerView.Adapter() {
    /**
     * 重复使用的Context添加多个view.
     */
    private val ankoContext = AnkoContext.createReusable(context, this)

    override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): ViewHolder {
        return ViewHolder(MovieListAdapterUI().createView(ankoContext))
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        GlideUtils.loadUrlImage(context,list[position].images.large,holder.imageView)
        holder.title_Tv.text=list[position].title
    }

    override fun getItemCount() = list.size
    /**
     * 自定义ViewHolder
     */
    inner class ViewHolder(rootView: View) : RecyclerView.ViewHolder(rootView) {
         val  imageView=rootView.findViewById(ViewID.IMAGEVIEW_ID) as ImageView
         val  title_Tv=rootView.findViewById(ViewID.TITLE_ID) as TextView
    }
}

/**
 * 使用AnkoComponent来构建item的UI
 */
class MovieListAdapterUI : AnkoComponent {
    override fun createView(ui: AnkoContext) = with(ui) {
        linearLayout {
            padding = dip(10)//设置padding
            imageView {
                id = ViewID.IMAGEVIEW_ID//设置id
                scaleType = ImageView.ScaleType.CENTER_CROP//图片中心裁剪
            }.lparams(width = dip(60), height = dip(60))//设置图片的宽高
            textView {
                id = ViewID.TITLE_ID//设置id
                textSize = 14f//字体大小
                paint.isFakeBoldText = true//粗体
            }.lparams {
                leftMargin = dip(10)//左边偏移量
                gravity = Gravity.CENTER_VERTICAL//竖直居中
            }
        }
    }
}

然后将Adapter添加到RecyclerView中：

   /**
     * 加载数据
     */
override fun loadMovie(list: List) {
        recyclerView .layoutManager = LinearLayoutManager(activity)
        recyclerView.adapter = MovieListAdapter(activity, list)
}

4.考虑到控件的Id管理，编写了一个类：

class ViewID{
    /**
     * 定义常量的控件ID
     */
    companion object{
        const  val IMAGEVIEW_ID=1//图片的id
        const  val TITLE_ID=2//页面中标题的id
        const  val RECYCLERVIEW_ID=3//页面中滚动视图的id
        const  val CONTENT_LAYOUT=4//页面中容器的id
    }
}

5. 编写电影列表的业务实现：

如何使用MVP架构，如何使用Glide ,Retrofit,OkHttp,RxJava，在上篇已经详细介绍了。这里就不在介绍，请阅读Kotlin 编写Android MVP项目(RxJava+Rerotfit+OkHttp+Glide)。

项目最终结构图：

6. 效果图展示：

7. 本项目的代码： https://github.com/13767004362/KotlinAnkoLayoutProject

---

资源参考：

• Anko库：https://github.com/Kotlin/anko