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

我就是我 2022-06-14 05:42 267阅读 0赞

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

*  [Kotlin编程之AndroidStudio（包括3.0与2.x版本）配置与使用][Kotlin_AndroidStudio_3.0_2.x]
 *  [ Kotlin编程开发Android运用程序（Volley+Gson依赖库）][Kotlin_Android_Volley_Gson]
 *  [Kotlin编程之Kotlin Android Extensions（扩展插件）][Kotlin_Kotlin Android Extensions]
 *  [Kotlin编程之Glide v4 Generated API(Unresolved reference GlideApp)][Kotlin_Glide v4 Generated API_Unresolved reference GlideApp]
 *  [Kotlin Android Extensions+Android MVP项目(RxJava+Rerotfit+OkHttp+Glide)][Kotlin Android Extensions_Android MVP_RxJava_Rerotfit_OkHttp_Glide]
 *  [AndroidStudio2.2-2.3配置Anko插件][AndroidStudio2.2-2.3_Anko]

--------------------

![image][]

**介绍**：

> 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版本**。

### **分析项目**： ###

**案例中页面图**：

![这里写图片描述][SouthEast]

**实现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插件][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<MainActivity> {
        override fun createView(ui: AnkoContext<MainActivity>) = 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<MovieList.Movie>) : RecyclerView.Adapter<MovieListAdapter.ViewHolder>() {
        /** * 重复使用的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<MovieListAdapter> {
        override fun createView(ui: AnkoContext<MovieListAdapter>) = 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<MovieList.Movie>) {
            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)][Kotlin Android Extensions_Android MVP_RxJava_Rerotfit_OkHttp_Glide]。

项目最终结构图：

![这里写图片描述][SouthEast 1]

#### **6. 效果图展示：** ####

![这里写图片描述][SouthEast 2]

#### **7. 本项目的代码**： [https://github.com/13767004362/KotlinAnkoLayoutProject][https_github.com_13767004362_KotlinAnkoLayoutProject] ####

--------------------

**资源参考**：

*  Anko库：[https://github.com/Kotlin/anko][https_github.com_Kotlin_anko]

[Kotlin_AndroidStudio_3.0_2.x]: http://blog.csdn.net/hexingen/article/details/72621795
[Kotlin_Android_Volley_Gson]: http://blog.csdn.net/hexingen/article/details/72625383
[Kotlin_Kotlin Android Extensions]: http://blog.csdn.net/hexingen/article/details/72967615
[Kotlin_Glide v4 Generated API_Unresolved reference GlideApp]: http://blog.csdn.net/hexingen/article/details/72970807
[Kotlin Android Extensions_Android MVP_RxJava_Rerotfit_OkHttp_Glide]: http://blog.csdn.net/hexingen/article/details/72972263
[AndroidStudio2.2-2.3_Anko]: http://blog.csdn.net/hexingen/article/details/73060923
[image]: /images/20220614/742d8bd4d4b944c78bd34b97159f7853.png
[SouthEast]: /images/20220614/b6b0fcca5a5e4cccb612a08f877e6e3d.png
[SouthEast 1]: /images/20220614/e3d5ed6963544583ad105d1515464b9d.png
[SouthEast 2]: /images/20220614/bc71b3c3ca4e41e7872853b570ca40fe.png
[https_github.com_13767004362_KotlinAnkoLayoutProject]: https://github.com/13767004362/KotlinAnkoLayoutProject
[https_github.com_Kotlin_anko]: https://github.com/Kotlin/anko