WechatIMG300.png
下面效果图是工作中遇到的一个效果图，需要自定义控件来实现此功能。当时确实蒙了，不知道如何去实现。 当你看到这个效果图后你有思路了吗？, 有好的想法思路可以分享分享， 看看我的这个做法是不是太复杂了
image.png
看到这个效果图是不是太简单， 但是产品的要求是 左边的标题要与标题最长的一个右对齐 就这一个条件当时真把 我难住了， 目前的截图里面只有有三个条件， 但是这里面的条目的个数是不确定的
- 接下来分析一下我的思路，看看我的这个思路如何？
如果能求出标题最长的控件的宽度， 然后将其它标题的宽度也设置成最长标题的宽度。并设置gravity为right， 是不是就能解决上面的这个问题了？？
- 如何求出最长标题的宽度的呢？ 这时候onMeasure方法就会登上用场了。
比如接口返回了10条数据， 那么需要求出10条数据里面标题最长的那一条标题的宽度 。
思路是： 自定义 一个控件继承自LinearLayout, 在绑定数据的时候调用bind方法， 参数是一个List， 然后遍历List，每一个item对应于上面的效果图的一个字条目， 然后动态的创建一个子item添加进当前控件，在添加进父控件之前，先测量一下左边title的宽度， 然后把宽度最大的值保存下来。当所有的item都遍历结束时，就能得到最大的标题宽度。然后在遍历一次当前控件的子item， 将每一个标题的宽度强制改成求出来的最大宽度，并且gravity设置成 right就能解决上面的这个问题
- 看一下我当前项目里面的核心代码
private fun addFundView(mDatas: List<IFundTopCategoryEntity>) {
val widthMeaspec = MeasureSpec.makeMeasureSpec(ScreenUtils.getScreenWidth(), MeasureSpec.EXACTLY)
val heightMeasureSpec = MeasureSpec.makeMeasureSpec(100, MeasureSpec.EXACTLY)
mDatas.forEach {
val view = LayoutInflater.from(context).inflate(R.layout.fund_view_top_category_item, this, false)
val rateLineView = view.findViewById<View>(R.id.rate_line)
(rateLineView.layoutParams as? LayoutParams)?.leftMargin = gap
val drawable = LinearGradientDrawable()
val startColor = ResourceUtils.getColor(R.color.day_mode_rate_line_start_color)
val endColor = ResourceUtils.getColor(R.color.day_mode_rate_line_end_color)
drawable.setColorAndRadius(startColor, endColor, 5f)
rateLineView.background = drawable
val rateTv = view.findViewById<TextView>(R.id.rate)
(rateTv.layoutParams as? LayoutParams)?.leftMargin = gap
rateTv?.text = "${it.getFundRate()}%"
val titleTv = view.findViewById<TextView>(R.id.name)
titleTv?.text = it.getFundName()
val params = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
params.topMargin = gap
view.tag = it.getFundRate()
rateLineView.hide(true)
view.measure(widthMeaspec, heightMeasureSpec)
if(maxTitleWidth < titleTv.measuredWidth)
maxTitleWidth = titleTv.measuredWidth
if(maxRateWidth < rateTv.measuredWidth)
maxRateWidth = rateTv.measuredWidth
rateLineView.show()
addView(view, params)
}
fundTitleTv?.layoutParams?.width = maxTitleWidth
if (childCount > notFundChildCount) {
(notFundChildCount until childCount)?.forEach {
getChildAt(it)?.findViewById<View>(R.id.name)?.layoutParams?.width = maxTitleWidth
}
}
}
-
着重看一下我圈起来的几个地方
image.png
- 首先创建widthMeasureSpec, heightMeasureSpec, 也就是调用View.measre()方法的两个参数
- 遍历集合创建出对应的子item
- 调用view的measure方法， 这样就能测出左边title的宽度了
- 通过计算，将最大的title宽度保存到maxTitleWidth
- 遍历所有的child，将左边的title控件的宽度改成maxTitleWidth
以上5步就能实现所给的效果图了。
