创新实训博客（19）——Android开发中Layout组件动态化

前言

以博文展示的页面为例子：

每个博客都有自己对应的标签，而且标签的数量可能并不是一个。

按照原来的那种绘制界面的方式来说，只能是静态数量的组件个数然后设置对应的显示效果。

在Vue.js开发中，Vue自身提供了v-for来遍历添加，而且html和css搭配起来也很方便。

但是在Android开发中，因为在xml中没有办法做到for循环遍历添加。

只能通过尝试在Kotlin代码中来完成相应的操作。

xml中绘制存放动态组件的Layout

在博文展示的页面放置一个tag的list

[code]                <LinearLayout
android:id="@+id/blog_tag_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginTop="16dp"
android:orientation="horizontal" />

kotlin中获取view

[code]val tagLayout: LinearLayout = findViewById(R.id.blog_tag_list)

然后首先移除里面所有的组件

[code]tagLayout.removeAllViews()

使用kotlin代码绘制动态组件

这里主要是遍历一个列表，列表里面存放着要显示的数据

首先遍历处理json数据

[code]        for(i in tagList.indices){
// 处理JSON对象
val tagObj = JSON.parseObject(tagList[i].toString())

然后设置组件的左右边距

[code]        val lp = LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)
lp.setMargins(8,0,8,0)

新建一个textview对象

[code]val tagItem = TextView(this)

设置好里面的基本信息

包括宽度、高度、文字方向、以及组件整体的边距样式

[code]tagItem.background = getDrawable(R.drawable.shape_radius_category)
//            tagItem.width = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 64F,resources.displayMetrics).toInt()
tagItem.height = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 28F,resources.displayMetrics).toInt()
tagItem.setPadding(32,0,32,0)
tagItem.gravity = Gravity.CENTER
tagItem.layoutParams = lp
tagItem.text = "#" + tagObj["name"].toString()
tagItem.setTextColor(getColor(R.color.bBlue))

添加到layout中

[code]tagLayout.addView(tagItem)

设置单个组件的响应事件

[code]// 设置监听跳转
val onClickListener = object : View.OnClickListener{
override fun onClick(v: View?) {
val token = intent.getStringExtra("token")
val tagIntent = Intent(this@BlogActivity, AuthorActivity::class.java)
tagIntent.putExtra("type", 0)
tagIntent.putExtra("id", tagObj["id"].toString().toInt())
tagIntent.putExtra("token", token)
startActivity(tagIntent)
}
}
tagItem.setOnClickListener(onClickListener)

显示效果

使用Log显示每个组件的相关信息