Android 自定义多状态提示输入布局 ColorTextInputLayout

最新推荐文章于 2024-08-13 18:31:04 发布

m0_60635001

最新推荐文章于 2024-08-13 18:31:04 发布

阅读量748

点赞数 17

分类专栏： 2024年程序员学习文章标签： android c# 数据库

本文链接：https://blog.csdn.net/m0_60635001/article/details/137160331

版权

2024年程序员学习专栏收录该内容

265 篇文章 1 订阅

订阅专栏

XML中使用自定义 ViewGroup 的方式

通过addView()方法将需要的控件添加到ViewGroup中
通过在xml布局文件中配置需要包含的控件
混合布局：1+2

方案优缺点对比

方案1优点在于简洁，完全不需要另外配置xml布局文件，但也正是因此，它不具备在xml布局文件中动态配置子View的扩展性
方案2优点是具有完全的可配置性，可在xml布局文件中任意配置子View，但缺点也很明显：

通用的子 View仍然需要在每个使用该 ViewGroup的 xml布局文件 中配置，过于繁琐
在 xml布局文件中配置在 ViewGroup下的子 View都会被 add到 ViewGroup下，无法进一步分配

方案3的具有方案2的可配置性，同时又能通过方案1的方式来解决方案2的第1个缺点，也可以通过重写 ViewGroup 的 addView() 方法来解决方案2的第2个缺点。

结论

–

由于前述的需求，我需要1个通用的 TextView 来作为提示文本，同时又需要一个 ViewGroup 来存放从xml布局文件中加载进来的子View，这2个正对应方案2的2个问题，方案3正好能满足需求。

项目实施

====

在编写的过程中，有参考Google官方的 TextInputLayout，这个控件很有意思，它结合 EditText 一起使用的时候可以对hint文本进行移动，具体情况想了解可以搜一下看看。

TextInputLayout 重写的 addView() 方法：

public void addView(View child, int index, LayoutParams params) {

if (child instanceof EditText) {

FrameLayout.LayoutParams flp = new FrameLayout.LayoutParams(params);

flp.gravity = 16 | flp.gravity & -113;

this.inputFrame.addView(child, flp);

this.inputFrame.setLayoutParams(params);

this.updateInputLayoutMargins();

this.setEditText((EditText)child);

} else {

super.addView(child, index, params);

}

这里其实我走了一段弯路，开始参考TextInputLayout源码时，陷入它的2个坑里：

addView(View child, int index, LayoutParams params)方法可能是因为编译后的缘故，Override标志没了，我误以为此方法并非重写的方法。

params 没有标注完整的具体类型，因为TextInputLayout本身是继承的LinearLayout，我想当然的把它当作了LinearLayout.LayoutParams，而实际上它始终都是ViewGroup.LayoutParams。

本来错误2很容易发现，但是在错误1的加持下，这个问题被掩盖了，我花了几个小时在错误的方法上面，最后一无所获。无奈之下改为使用onLayout()方法，最终从肉眼视觉上达到想要的效果。这个方案相比直接在加载View的时候按需配置View树显然会差一些，不论是感觉上还是性能上均如此。

好消息是：次日我不甘心就这么算了，再次尝试addView() 方法，终于给我发现了上述的2个坑，从而成功的使用addView() 方法做到了想要的效果。

这里说说TextInputLayout 给我的2个重要启发：

addView() 方法在控件从xml布局文件转化为View过程中发挥的作用
setAddStatesFromChildren() 方法

我们先看 addView() 方法，setAddStatesFromChildren() 方法会在后面进行讲解。

addView() 方法

这里我重写的是带有3个参数的 addView(View child, int index, LayoutParams params)，因为我需要用到第3个参数，各参数分别表示：

child 将要add进来的View
index child将被add到的position，-1表示add到最后
params 将在child上设置的LayoutParams参数（其实就是包含child在xml布局文件中配置的属性的LayoutParams）

关于 addView() 方法在UI创建过程中的作用大概看了一下源码和网上的解析文章，有了个粗略的了解。

简单来说就是：在Android系统解析 xml布局文件转换成 View 的过程中，会调用当前正在解析的 ViewGroup 中的 addView() 方法，把 xml布局文件中该 ViewGroup 包含的 View 或 ViewGroup 一个个的 add 进来。

接下来进入到代码解析阶段：

[图片上传失败…(image-9eb6a8-1628150391084)]

1. 先看看构造方法：

public ColorTextInputLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr, 0);

setOrientation(VERTICAL);

setWillNotDraw(true);

mTvHint = new TextView(context);

mTvHint.setTag(TAG_HINT);

mFlInputPanel = new FrameLayout(context);

mFlInputPanel.setTag(TAG_PANEL);

mFlInputPanel.setAddStatesFromChildren(true);

mFlInputPanel.setBackgroundResource(R.drawable.selector_color_hint_panel);

mIvIndicator = new ImageView(context);

FrameLayout.LayoutParams indicatorLp = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.MATCH_PARENT);

mFlInputPanel.addView(mIvIndicator, 0, indicatorLp);

LinearLayout.LayoutParams rootLp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);

addView(mTvHint, 0, rootLp);

addView(mFlInputPanel, 1, rootLp);

… 省略掉了OnGlobalFocusChangeListener监听代码

}

代码解析：

这部分是 ColorTextInputLayout 的构造方法，我在 ColorTextInputLayout 的构造方法中 new TextView(提示文本 mTvHint) 和 FrameLayout(输入面板 mFlInputPanel) 时分别给它们setTag()，以便在 addView() 方法中把它们与xml布局文件中的View区分开来。同时 new ImageView(状态指示器 mIvIndicator)，并add到 mFlInputPanel 中。最后，把 mTvHint 和 mFlInputPanel add到 ColorTextInputLayout 中。