android 如何自定义这样的一个View， 当时确实把我难到

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

1. 首先创建widthMeasureSpec, heightMeasureSpec, 也就是调用View.measre()方法的两个参数
2. 遍历集合创建出对应的子item
3. 调用view的measure方法， 这样就能测出左边title的宽度了
4. 通过计算，将最大的title宽度保存到maxTitleWidth
5. 遍历所有的child，将左边的title控件的宽度改成maxTitleWidth

以上5步就能实现所给的效果图了。