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

前言

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

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

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

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

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

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

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

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

[code]                <LinearLayoutandroid: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.CENTERtagItem.layoutParams = lptagItem.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)