默认效果图
布局
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/input_host"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dialog_item_logo_txt_padding"
android:layout_toRightOf="@+id/iv_host_logo"
android:textColorHint="@color/item_divider_dark_gray"
app:boxBackgroundColor="#00000000"
app:hintTextAppearance="@style/OurTextInputHint"
app:boxStrokeColor="@color/blue_gray_state_color">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/et_host"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/ID_BOOK_INFO_HOST"
android:minWidth="@dimen/book_edit_text_width"
android:singleLine="true"
android:text="x"
android:imeOptions="actionDone"
android:textColor="@color/dialog_item_text_color"
android:textSize="20sp" />
</com.google.android.material.textfield.TextInputLayout>
上边那个hint文字的颜色设置textColorHint 这个是state状态的,选中状态可以变个深色
app:hintTextAppearance :hint的文字其他属性,比如大小,只能通过这个设置了
<style name="OurTextInputHint" parent="TextAppearance.Design.Hint">
<item name="android:textSize">16sp</item>
</style>
可以看下源码,Layout的默认属性是这个,点进去看这个style就知道有啥了
private static final int DEF_STYLE_RES = R.style.Widget_Design_TextInputLayout;
<style name="Widget.Design.TextInputLayout" parent="android:Widget">
<item name="materialThemeOverlay">@style/ThemeOverlay.Design.TextInputEditText</item>
<item name="enforceMaterialTheme">false</item>
<item name="enforceTextAppearance">false</item>
<item name="boxBackgroundMode">none</item>
<item name="boxStrokeColor">@color/design_box_stroke_color</item>
<item name="passwordToggleDrawable">@drawable/design_password_eye</item>
<item name="passwordToggleTint">@color/design_icon_tint</item>
<item name="passwordToggleContentDescription">@string/password_toggle_content_description</item>
<item name="endIconTint">@color/design_icon_tint</item>
<item name="startIconTint">@color/design_icon_tint</item>
<item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item>
<item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item>
<item name="errorTextAppearance">@style/TextAppearance.Design.Error</item>
<item name="helperTextTextAppearance">@style/TextAppearance.Design.HelperText</item>
<item name="hintTextAppearance">@style/TextAppearance.Design.Hint</item>
<item name="counterTextColor">@null</item>
<item name="counterOverflowTextColor">@null</item>
<item name="errorTextColor">@null</item>
<item name="helperTextTextColor">@null</item>
<item name="hintTextColor">@null</item>
<item name="shapeAppearance">@null</item>
<item name="shapeAppearanceOverlay">@null</item>
</style>
TextInputEditText
这个其实没太多的东西,就是和TextInputLayout交互下hint的值而已。
如果它自己没有设置hint,那就取容器也就是TextInputLayout的hint值。
@Override
public CharSequence getHint() {
// Certain test frameworks expect the actionable element to expose its hint as a label. When
// TextInputLayout is providing our hint, retrieve it from the parent layout.
TextInputLayout layout = getTextInputLayout();
if ((layout != null) && layout.isProvidingHint()) {
return layout.getHint();
}
return super.getHint();
}
@Override
public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
final InputConnection ic = super.onCreateInputConnection(outAttrs);
if (ic != null && outAttrs.hintText == null) {
// If we don't have a hint and our parent is a TextInputLayout, use its hint for the
// EditorInfo. This allows us to display a hint in 'extract mode'.
outAttrs.hintText = getHintFromLayout();
}
return ic;
}
@Nullable
private TextInputLayout getTextInputLayout() {
ViewParent parent = getParent();
while (parent instanceof View) {
if (parent instanceof TextInputLayout) {
return (TextInputLayout) parent;
}
parent = parent.getParent();
}
return null;
}
@Nullable
private CharSequence getHintFromLayout() {
TextInputLayout layout = getTextInputLayout();
return (layout != null) ? layout.getHint() : null;
}
先看一些参数的效果
- app:boxBackgroundColor , boxBackgroundMode
<com.google.android.material.textfield.TextInputLayout
app:boxBackgroundMode="filled">
<com.google.android.material.textfield.TextInputLayout
android:background="@mipmap/adp_logo"
app:boxBackgroundColor="#E91E63"
app:boxBackgroundMode="outline">
boxBackgroundMode:3种,默认的filled,还有outline以及none
为filled,有个灰色背景色,edittext 点击以后,下边是一条线,主题色
而且好像上边2个角是圆角
app:boxBackgroundColor 可以修改背景色。
android:background :会被boxBackgroundColor的颜色挡住,可能看不见
app:boxBackgroundMode:
为none的时候,背景直接没了,成透明的拉;
为outline的时候,hint是显示在文字顶部的,而且它的rect的范围background被剪切掉了,你看到的背景就是容器的背景,这次不是底部有条线了,而是成了边框,颜色是主题色
- 背景的圆角
上边说了,默认的顶部2个角是圆角的,可以如下修改4个角
app:boxCornerRadiusBottomEnd="10dp"
app:boxCornerRadiusBottomStart="10dp"
app:boxCornerRadiusTopStart="10dp"
app:boxCornerRadiusTopEnd="10dp"
- 选中以后底部那条线【filled模式】,或者边框的颜色[outline模式]
app:boxStrokeColor="#009688"
strokeColor是支持state的,也就是聚焦和非聚焦不同的颜色,上边那种直接设置个颜色,那么就是foucus的颜色拉。
//boxStrokeColor 如果是单独的色值,非isStateful的情况,就走的else,也就是给了focusColor
//如果有state的话,对应设置下if里的3种state颜色就可以拉。
ColorStateList boxStrokeColorStateList =
MaterialResources.getColorStateList(context, a, R.styleable.TextInputLayout_boxStrokeColor);
if (boxStrokeColorStateList != null && boxStrokeColorStateList.isStateful()) {
defaultStrokeColor = boxStrokeColorStateList.getDefaultColor();
disabledColor =
boxStrokeColorStateList.getColorForState(new int[] {-android.R.attr.state_enabled}, -1);
hoveredStrokeColor =
boxStrokeColorStateList.getColorForState(new int[] {android.R.attr.state_hovered}, -1);
focusedStrokeColor =
boxStrokeColorStateList.getColorForState(new int[] {android.R.attr.state_focused}, -1);
} else {
// If attribute boxStrokeColor is not a color state list but only a single value, its value
// will be applied to the box's focus state.
focusedStrokeColor =
a.getColor(R.styleable.TextInputLayout_boxStrokeColor, Color.TRANSPARENT);
defaultStrokeColor =
ContextCompat.getColor(context, R.color.mtrl_textinput_default_box_stroke_color);
disabledColor = ContextCompat.getColor(context, R.color.mtrl_textinput_disabled_color);
hoveredStrokeColor =
ContextCompat.getColor(context, R.color.mtrl_textinput_hovered_box_stroke_color);
}
app:boxStrokeWidth="5dp" 看到有个属性,设置了下,感觉没效果
- hint文字
正确的合理做法是随便哪个其中一个设置hint就行,
Layout和EditText都设置了,那么就各是各的,如下图,
<com.google.android.material.textfield.TextInputLayout
android:hint="hint layout">
<com.google.android.material.textfield.TextInputEditText
android:textColorHint="#FF5722"
android:hint="hint">
2个都设置了,非聚焦状态可以看到2个重叠在一起了。
- hint文字距离顶部的距离
设置太大就没意义了,高度超过Layout的高度就不可见了。
app:boxCollapsedPaddingTop="0dp"
5.hint 文字style设置
复杂的比如字体大小,需要用TextAppearance来设置
简单的修改颜色就用hintTextColor,这个颜色优先级比上边appearance高
<style name="hintText" parent="Widget.Design.TextInputLayout">
<item name="android:textSize">16sp</item>
</style>
- helperText 相关
app:helperText="helper text"
app:helperTextTextColor="#009688"
app:helperTextEnabled="true"
app:helperTextTextAppearance="@style/test"
默认的属性,enalbe默认也是true的
<item name="helperTextTextAppearance">@style/TextAppearance.Design.HelperText</item>
<item name="helperTextTextColor">@null</item>
效果图,java代码里也有对应的方法可以处理
- 字数统计
app:counterEnabled="true"
app:counterMaxLength="20"
app:counterTextColor="@color/colorAccent"
app:counterOverflowTextColor="@color/txt_black_white"
app:counterTextAppearance="@style/test"//字体还可以设置style,其他类似,后边不在说这种
默认是不可用的,2种颜色,
counterMaxLength的值来决定,
比这个大的就是overflow颜色,否则就是正常的app:counterTextColor
注意事项,这2个color都不能直接使用#000000这种,必须是一个color资源也就是@color/xxx
- endIcon
看名字就猜到末尾有个icon
主要就是看mode区分作用的,
none:默认的,就是不显示icon,你设置了也没用。It will not display an end icon
clear_text :点击一下文字清除
password_toggle: 密码显示明文与否的开关
custom: icon会显示,就是没点击效果而已。
app:endIconDrawable="@mipmap/book_add"
app:endIconMode="clear_text"
注意事项:password_toggle的时候,你里边的EditText的inputType需要是password才行
- error text
布局里可以启用,以及设置颜色,显示的文字就需要代码里写了
调用Layout的setError方法即可,
app:errorEnabled="true"
app:errorTextColor="#ff0000"
可以看到:
errorText会隐藏 helper text,字数太长会把后边的counter也就是字数统计,挤到看不见了。
说下,如果你设置了errorText很长,把counter挤没了,接着你设置errorText为空,counter也不会还原的,你需要设置errorEnable为false,counter才能还原。
helper text和error text一样的效果,把counter挤到看不见了,
passwordToggle
这个好像弃用了,就是endIcon里的mode为password_toggle的效果,建议用endIconstartIcon
上边有图,前边显示的那个加号就是
···
app:startIconDrawable="@mipmap/book_add"
···
基本相关的属性都看完了,然后看下源码,了解下布局结构,也就方便理解上边的一些效果咋来的了
补充
看过一个ui密码显示按钮是在前边的,那咋办?
其实了,TextInputLayout前后两个icon都是可以点击的,而且可以有状态的
如下,Checkable设置为true
app:startIconCheckable="true"
app:startIconDrawable="@drawable/design_password_eye"
代码里就可以用了
et_layout2.setStartIconOnClickListener {
println("it=====$it")//listener里返回的view是CheckableImageButton【不对外使用的】
if(it is Checkable){
println("check=======${it.isChecked}")
// Store the current cursor position
val selection = editText!!.selectionEnd
//显示隐藏密码
this.editText?.transformationMethod = if(it.isChecked) PasswordTransformationMethod.getInstance() else null
// And restore the cursor position
editText!!.setSelection(selection)
it.toggle()//因为是checkable的,所以我们可以切换状态,也可以拿到当前状态来做处理,比如隐藏密码
}
}
源码解析
先打印下结构,没找到那个hint,难道不是个view?等待看完源码再说
至少发现,EditText被取出来放到一个FrameLayout里了.
helper text和error text这两个文本是在一个FrameLayout里的
public class TextInputLayout extends LinearLayout{
public TextInputLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
setOrientation(VERTICAL);//垂直方向的线性布局
inputFrame = new FrameLayout(context);
inputFrame.setAddStatesFromChildren(true);
addView(inputFrame);//先加了一个帧布局进来
startLayout = new LinearLayout(context);
startLayout.setOrientation(HORIZONTAL);
startLayout.setLayoutParams(
new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.MATCH_PARENT,
Gravity.START | Gravity.LEFT));
inputFrame.addView(startLayout);//frame里左侧添加一个startLayout
endLayout = new LinearLayout(context);
endLayout.setOrientation(HORIZONTAL);
endLayout.setLayoutParams(
new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.MATCH_PARENT,
Gravity.END | Gravity.RIGHT));
inputFrame.addView(endLayout);//frame里右侧添加一个endLayout
endIconFrame = new FrameLayout(context);
endIconFrame.setLayoutParams(
new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT));
//读取attr属性
// Initialize error icon view.
errorIconView =
(CheckableImageButton)
LayoutInflater.from(getContext())
.inflate(R.layout.design_text_input_end_icon, endLayout, false);
errorIconView.setVisibility(GONE);
// Initialize start icon view.
startIconView =
(CheckableImageButton)
LayoutInflater.from(getContext())
.inflate(R.layout.design_text_input_start_icon, startLayout, false);
startIconView.setVisibility(GONE);
// Initialize end icon view.
endIconView =
(CheckableImageButton)
LayoutInflater.from(getContext())
.inflate(R.layout.design_text_input_end_icon, endIconFrame, false);
endIconFrame.addView(endIconView);
// Set up prefix view.
prefixTextView = new AppCompatTextView(context);
prefixTextView.setId(R.id.textinput_prefix_text);
prefixTextView.setLayoutParams(
new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
startLayout.addView(startIconView);
startLayout.addView(prefixTextView);
// Set up suffix view.
suffixTextView = new AppCompatTextView(context);
suffixTextView.setId(R.id.textinput_suffix_text);
suffixTextView.setLayoutParams(
new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT,
Gravity.BOTTOM));
ViewCompat.setAccessibilityLiveRegion(
suffixTextView, ViewCompat.ACCESSIBILITY_LIVE_REGION_POLITE);
endLayout.addView(suffixTextView);
endLayout.addView(errorIconView);
endLayout.addView(endIconFrame);
}
//找到里边的EditText然后放到我们new出来的帧布局里
public void addView(
@NonNull View child, int index, @NonNull final ViewGroup.LayoutParams params) {
if (child instanceof EditText) {
// Make sure that the EditText is vertically at the bottom, so that it sits on the
// EditText's underline
FrameLayout.LayoutParams flp = new FrameLayout.LayoutParams(params);
flp.gravity = Gravity.CENTER_VERTICAL | (flp.gravity & ~Gravity.VERTICAL_GRAVITY_MASK);
inputFrame.addView(child, flp);
// Now use the EditText's LayoutParams as our own and update them to make enough space
// for the label
inputFrame.setLayoutParams(params);
updateInputLayoutMargins();
setEditText((EditText) child);
} else {
// Carry on adding the View...
super.addView(child, index, params);
}
}
hint部分简单看下源码
app:boxBackgroundMode="outline"
效果图
源码相关部分
//上图的就是collapse hint,所以会走下边的代码
private void collapseHint(boolean animate) {
//代码省略
if (cutoutEnabled()) {
openCutout();
}
}
private boolean cutoutEnabled() {
return hintEnabled && !TextUtils.isEmpty(hint) && boxBackground instanceof CutoutDrawable;
}
private void openCutout() {
if (!cutoutEnabled()) {
return;
}
final RectF cutoutBounds = tmpRectF;
collapsingTextHelper.getCollapsedTextActualBounds(cutoutBounds);
applyCutoutPadding(cutoutBounds);
// Offset the cutout bounds by the TextInputLayout's left padding to ensure that the cutout is
// inset relative to the TextInputLayout's bounds.
cutoutBounds.offset(-getPaddingLeft(), 0);
//可以看到background被减掉一部分,就是显示展开的hint的那部分
((CutoutDrawable) boxBackground).setCutout(cutoutBounds);
}
//通过helper获取rect
public void getCollapsedTextActualBounds(@NonNull RectF bounds) {
boolean isRtl = calculateIsRtl(text);
bounds.left =
!isRtl ? collapsedBounds.left : collapsedBounds.right - calculateCollapsedTextWidth();
bounds.top = collapsedBounds.top;
bounds.right = !isRtl ? bounds.left + calculateCollapsedTextWidth() : collapsedBounds.right;
bounds.bottom = collapsedBounds.top + getCollapsedTextHeight();
}
看下代码的初始化,肯定是CutoutDrawable的
case BOX_BACKGROUND_OUTLINE:
if (hintEnabled && !(boxBackground instanceof CutoutDrawable)) {
boxBackground = new CutoutDrawable(shapeAppearanceModel);
} else {
boxBackground = new MaterialShapeDrawable(shapeAppearanceModel);
}
boxUnderline = null;
break;
现在的studio有个layout inspector,我们可以用这个来分析这个view的结构
整体来看
分两部分,上边的 startIcon,prefix text, editText,suffix text,endIcon在一个FrameLayout里
下边的helper,error,count之类的在下边的一个线性布局里[水平方向的,所以help或者error 文本太长的话可能把counter挤到屏幕外看不见了]
其他知识
ui设计的时候不需要hint,而我们需要后边那个clear icon,结果会发现,那个文字和icon不对齐,icon默认是居中的,所以就是那个editTextView有问题了?
刚开始想到的是把那个endIcon的gravity设置成bottom,结果发现不太好看,理想的应该是和文字居中对齐的。
然后又继续去看源码,仔细的看布局里margin,高度咋设置的,首先看了edittextView的容器FrameLayout,在hint不可用的时候,它的margin已经是0了
private int calculateLabelMarginTop() {
if (!hintEnabled) {
return 0;
}
switch (boxBackgroundMode) {
case BOX_BACKGROUND_OUTLINE:
return (int) (collapsingTextHelper.getCollapsedTextHeight() / 2);
case BOX_BACKGROUND_FILLED:
case BOX_BACKGROUND_NONE:
return (int) collapsingTextHelper.getCollapsedTextHeight();
default:
return 0;
}
}
然后我用studio的工具layout inspect查看了下布局,发现EditTextView竟然有padding,4个方向都有,可我们xml里并没有给他设置.
我尝试在xml手动设置padding为0,然后发现 EditTextView高度果然变小了,既然不是我们设置的,那么必然是默认属性里的
</style>
<style name="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox">
<item name="editTextStyle">@style/Widget.MaterialComponents.TextInputEditText.FilledBox</item>
</style>
<style name="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox.Dense">
<item name="editTextStyle">@style/Widget.MaterialComponents.TextInputEditText.FilledBox.Dense
</item>
</style>
<style name="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="editTextStyle">@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox</item>
</style>
<style name="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense">
<item name="editTextStyle">@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox.Dense
</item>
</style>
对应的值
<style name="Widget.MaterialComponents.TextInputEditText.FilledBox" parent="Base.Widget.MaterialComponents.TextInputEditText">
<item name="android:paddingTop">28dp</item>
<item name="android:paddingBottom">12dp</item>
</style>
<style name="Widget.MaterialComponents.TextInputEditText.FilledBox.Dense">
<item name="android:paddingTop">24dp</item>
<item name="android:paddingBottom">8dp</item>
</style>
<style name="Widget.MaterialComponents.TextInputEditText.OutlinedBox" parent="Base.Widget.MaterialComponents.TextInputEditText"/>
<style name="Widget.MaterialComponents.TextInputEditText.OutlinedBox.Dense">
<item name="android:paddingTop">13dp</item>
<item name="android:paddingBottom">13dp</item>
</style>
解决办法
手动修改editTextView的padding
未完待续
突然发现我后边源码的部分咋丢了,我记得我写了啊,靠