Kotlin之通过接口返回JSON动态布局界面

引言

---

在写第一篇Kotlin文章的时候就已经打算做个项目好好的练练，于是选用了开眼app作为练手项目全程使用Kotlin。

在上一篇文章中已经获取到了页面数据，由于其页面通过JSON动态布局（个人观点），因此需要：熟练的JSON解析能力和自定义控件的能力

在下在这里就献个丑

正文

---

首先看一下对比图

开眼

我的仿制品

单击按钮获取数据，上面的数据表示根ViewGroup包含的子View
页面的内容还是很多的

看一下这个页面总共用了多少个控件

image.png

刚好10个，不用担心最后自定义控件会很多，因为其它页面也同时在使用这些控件。那如何将控件封装好？如何去初始化控件？这两个问题显得尤为重要，否则不同界面间各顾各的不仅开发起来困难以后也很难维护。

思路

• 我要达到的效果很简单，通过一个JSONObject转换成View
• 其中JSONObject含有View的类型和数据（开眼的JSON结构是这么做的）
• 创建model包含View的类型和数据

实现

1、分析JSON
返回的JSONObject中结构是这样的，一个列表和列表总数

image.png

具体的JSONObject都含有一个type和data的JSONObject

image.png

data的JSONObject里有含有一个dataType用来标示具体的数据类型也就是图中的itemList，不同的dataType下面代的JSONObject也不同，重点理解

image.png

2、创建mode ViewData

/**
 * Created by mr.lin on 2018/1/7.
 * 控件数据
 */
data class ViewData(private var jsonObject: JSONObject) {
    var type = jsonObject.getString("type")
    var json = jsonObject.getJSONObject("data")
}

3、将JSON拆成ViewData数组

        var json = JSONObject(string)
        var jsonArray = json.getJSONArray("itemList")
        for (i in 0 until jsonArray.length()) {
            var viewData = ViewData(jsonArray.getJSONObject(i))
            viewDatas.put(i, viewData)
        }

4、创建助手类将不同类型的View返回

/**
 * Created by mr.lin on 2018/1/8.
 * 将json转成View
 */
class JsonViewUtils {

    companion object {
        fun viewDataToView(context: Context, viewData: ViewData): View? {
            when (viewData.type) {
                "horizontalScrollCard" -> return ViewHorizontalScrollCard(context, viewData.json)
                "banner2" -> return ViewBanner2(context, viewData.json)
                "textCard" -> return ViewTextCard(context, viewData.json)
                "briefCard" -> return ViewBriefCard(context, viewData.json)
                "followCard" -> return ViewFollowCard(context, viewData.json)
                "videoSmallCard" -> return ViewVideoSmallCard(context, viewData.json)
                "squareCardCollection" -> return ViewSquareCardCollection(context, viewData.json)
                "videoCollectionWithBrief" -> return ViewVideoCollectionWithBrief(context, viewData.json)
                "video" -> return ViewVideo(context, viewData.json)
                "DynamicInfoCard" -> return ViewDynamicInfoCard(context, viewData.json)
            }
            return null
        }
    }

}

5、自定义具体的View

拿一个具体View看看

ViewSquareCardCollection

布局结构： 从上向下，顶部一个TextView，底部一条线，中间一个HorizontalScrollView

HorizontalScrollView包裹了ViewBanner2，这里就很好的体现出JsonViewUtils的优势了

/**
 * Created by mr.lin on 2018/1/10.
 */
class ViewSquareCardCollection(context: Context, json: JSONObject, attrs: AttributeSet?, defStyleAttr: Int) : FrameLayout(context, attrs, defStyleAttr) {

    constructor(context: Context, json: JSONObject, attrs: AttributeSet?) : this(context, json, attrs, 0)
    constructor(context: Context, json: JSONObject) : this(context, json, null)

    init {
        LayoutInflater.from(context).inflate(R.layout.view_squarecardcollection, this, true)

        titleTv.text = json.getJSONObject("header").getString("title")

        var itemList = json.getJSONArray("itemList")
        for (i in 0 until itemList.length()) {
            var viewData = ViewData(itemList.getJSONObject(i))
            containerLl.addView(JsonViewUtils.viewDataToView(context, viewData))
        }

    }

}

待优化

1、现在数据的传递全部都是JSON，可以在抽出一个实体类
2、现在只是将需要显示的数据取出了，还有业务上需要的数据没有存储
3、死页面