android MD风格组件(TextInputLayout AutoCompleteTextView MaterialButton SwitchMaterial MaterialRadio)(二)

已于 2022-04-18 15:46:09 修改
阅读量3.5k 收藏 6
点赞数 4
分类专栏： material Android进阶 文章标签： android materialdesign kotlin
于 2022-01-22 15:24:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44819566/article/details/122623027
版权

android material design风格组件TextInputLayout,MaterialButton,SwitchMaterial,MaterialRadio

相关文章:

今日完成效果:

效果一效果二效果三

基本使用

<com.google.android.material.textfield.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginTop="20dp"
     android:hint="请输入账号">

     <com.google.android.material.textfield.TextInputEditText
         android:layout_width="match_parent"
         android:layout_height="wrap_content" />
 </com.google.android.material.textfield.TextInputLayout>

app:endIconMode 模式

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginTop="20dp"
     android:hint="请输入密码"
     app:endIconMode="password_toggle"
     
     app:startIconDrawable="@drawable/ic_emoji_02"
     app:startIconTint="@color/white"
     app:startIconTintMode="multiply"
	>
 <!-- app:endIconDrawable="@drawable/ic_emoji_03"
    app:endIconTint="@color/white"
    app:endIconTintMode="multiply" -->
    
     <com.google.android.material.textfield.TextInputEditText
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:inputType="numberPassword" />
 </com.google.android.material.textfield.TextInputLayout>
  • app:endIconMode end模式
  • startIcon 图标
  • startIconTint start色调
  • endIcon图标
  • endIconTint end色调

效果图:

passwordclearcustom(自定义)
TextInputLayout#endIconMode="password_toggle"
TextInputEditText#inputType=“numberPassword”		TextInputEditText#endIconMode=“clear_text”TextInputEditText#endIconMode=“custom”

前置与后置

<com.google.android.material.textfield.TextInputLayout
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_marginTop="20dp"
     android:layout_marginRight="5dp"
     android:layout_weight="1"

     
     app:prefixText="$"
     
	 app:suffixText="$"
     app:prefixTextColor="@color/black">

     <!--
         android:inputType="numberSigned" 数字
     -->
     <com.google.android.material.textfield.TextInputEditText
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:inputType="numberSigned" />
 </com.google.android.material.textfield.TextInputLayout>
  • app:prefixText 前置图标
  • app:prefixTextColor 前置图标颜色
  • app:suffixText 后置图标
  • app:suffixTextColor 后置图标颜色

其他常用操作

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/errorTextInput"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:hint="你可以尝试输入12位"
    app:boxStrokeErrorColor="@color/red"
    app:counterEnabled="true"
    app:counterMaxLength="11"
    app:errorEnabled="true"
    app:helperText="你可以输入11位哦~"
    app:helperTextEnabled="true"
    app:placeholderText="更加专业的hint">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/errorEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
  • boxStrokeErrorColor 输入错误颜色 [默认红色]
  • counterEnabled 计数器是否启动
  • counterMaxLength 计数器最大值
  • errorEnabled 错误检测启动
  • placeholderText 占位符
  • helperTextEnabled 帮助文字是否启动
    动态代码:
 binding.errorEditText.doOnTextChanged { text, start, count, after ->
            if (text?.length!! >= 11) {
                binding.errorTextInput.error = "动态代码设置.错误信息"
                binding.errorEditText.error = "只能输入11位"
            } else {
                binding.errorTextInput.error = null
            }
            binding.errorTextInput.errorIconDrawable = null
        }
  • doOnTextChanged() 监听变化

请添加图片描述

可下拉选择的

<com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginTop="20dp"
     android:hint="可下拉的">

     <AutoCompleteTextView
         android:id="@+id/autoText"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:inputType="none"
         tools:ignore="LabelFor" />
 </com.google.android.material.textfield.TextInputLayout>

动态设置数据:

val items =
            listOf(
                "Material",
                "Design",
                "Components",
                "Android",
                "kotlin",
                "java",
                "ios",
                "c",
                "c++",
                "js",
                "python"
            )
        val adapter = ArrayAdapter(this, R.layout.list_item, items)
        binding.autoText.setAdapter(adapter)

list_item.xml:

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:ellipsize="end"
    android:maxLines="1"
    android:textAppearance="?attr/textAppearanceSubtitle1"
    />

其他样式:

  • Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu 弹出输入框
  • Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu 不弹出输入框
  • Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu 不弹出输入框2
弹出输入框不弹出输入框不弹出输入框2

TextInputLayout配合 AutoCompleteTextView使用

tips: AutoCompleteTextView 继承自EditText

<com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:hint="可下拉的">
            <!--
                 android:popupBackground 弹出背景【不起作用，需要动态代码!】
            -->
            <AutoCompleteTextView
                android:id="@+id/autoText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:completionHint="这是一条提示语。。。"
                android:dropDownWidth="100dp"
                android:dropDownHeight="200dp"
                android:dropDownHorizontalOffset="50dp"
                android:dropDownVerticalOffset="50dp"
                android:dropDownSelector="@drawable/ic_emoji_09"
                android:inputType="text"
                android:popupBackground="@drawable/ic_emoji_05"
                tools:ignore="LabelFor" />
        </com.google.android.material.textfield.TextInputLayout>

动态代码:

val items =
            listOf(
                "Material",
                "Design",
                "Components",
                "Android",
                "kotlin",
                "java",
                "ios",
                "c",
                "c++",
                "js",
                "python"
            )
        val adapter = ArrayAdapter(this, R.layout.list_item, items)
        binding.autoText.setAdapter(adapter)

        // 设置AutoCompleteTextView.pop背景
        binding.autoText.setDropDownBackgroundResource(R.drawable.ic_emoji_06)

  • android:dropDownHeight 设置下拉高度

  • android:completionHint 提示语

  • android:dropDownWidth 弹出pop的宽

  • android:dropDownHeight 弹出pop的高

  • android:inputType 允许输入类型

  • android:dropDownHorizontalOffset 距离水平的位置

  • android:dropDownVerticalOffset 距离垂直侧的位置

  • android:dropDownSelector 选中时候的背景

效果图:


注意:这里设置背景一定要谨慎使用:

android:dropDownSelector="@drawable/ic_emoji_09" // 回收时候展示的图片

android:popupBackground="@drawable/ic_emoji_05" // 不起作用需要动态设置代码
binding.autoText.setDropDownBackgroundResource(R.drawable.ic_emoji_06) // 动态代码替换

bug分析:
当第一次进入的时候,如果弹出的软键盘和pop重叠的时候,会显示不了图片,可能显示图片了只是刷新掉了,众所周知,软键盘和弹出的pop都是一个window,我猜测可能是这里是配没有适配全,来看两张图就懂了!

bug复现理想状态

可以看出,只要是人写的代码,或多或少存在一定的毛病(偷笑)

Ohter

还有一些其他主题和风格一起看看吧!

<com.google.android.material.textfield.TextInputLayout
     style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginTop="20dp"
     
     app:shapeAppearance="@style/CutTheme2"
     android:hint="TextInputLayout.OutlinedBox">

     <com.google.android.material.textfield.TextInputEditText
         android:layout_width="match_parent"
         android:layout_height="wrap_content" />
 </com.google.android.material.textfield.TextInputLayout>

@style/CutTheme2:

<style name="CutTheme2">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">16dp</item>
</style>

这个上一章说过就不重复提了

materialRadioButton

MaterialRadioButton貌似没有什么变化,目前还没有看出来… 拿常用的方法看看就可以了!

<RadioGroup
     android:id="@+id/radioGroup"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:checkedButton="@id/javaRadioButton"
     android:orientation="horizontal">

     <!--
         android:buttonTint 设置 色调颜色
         tips: 单选按钮的颜色默认为 ?attr/colorOnSurface （未选中）和 ?attr/colorSecondary（选中）
     -->
     <com.google.android.material.radiobutton.MaterialRadioButton
         android:id="@+id/javaRadioButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft="5dp"
         android:layout_marginTop="5dp"
         android:buttonTint="@color/red"
         android:text="java" />

     <com.google.android.material.radiobutton.MaterialRadioButton
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft="5dp"
         android:layout_marginTop="5dp"
         android:buttonTint="@color/black"
         android:text="kotlin" />

     <com.google.android.material.radiobutton.MaterialRadioButton
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft="5dp"
         android:layout_marginTop="5dp"
         android:buttonTint="@color/teal_200"
         android:text="python" />

     <com.google.android.material.radiobutton.MaterialRadioButton
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft="5dp"
         android:layout_marginTop="5dp"
         android:button="@null"
         android:buttonTint="@color/teal_200"
         android:text="我也是单选" />
 </RadioGroup>

MaterialCheckBox

materialCheckBox和CheckBox好像也是相差无几,那就介绍几种自定义的方法吧

自定义按钮:

<com.google.android.material.checkbox.MaterialCheckBox
        android:id="@+id/materialCheckoutBox2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/check_box_material_select"
        android:text="自定义materialCheckBox"
        app:useMaterialThemeColors="false" />
  • button 设置按钮状态
  • app:useMaterialThemeColors=“false” 自定义颜色

自定义选择器:
@drawable/check_box_material_select:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/ic_emoji_04"/>
    <item android:state_checked="false" android:drawable="@drawable/ic_emoji_03"/>
</selector>

效果图:

自定义background

<com.google.android.material.checkbox.MaterialCheckBox
        android:id="@+id/materialCheckoutBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/switch_material_select"
        android:button="@null"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:text="绿色未选中"
        android:textColor="@color/white" />
  • android:button="@null" 隐藏按钮

自定义选中效果:
@drawable/switch_material_select:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/switch_material_open"/>
    <item android:state_checked="false" android:drawable="@drawable/switch_material_clone"/>
</selector>

打开时,switch_material_open.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="@dimen/dp_10" />
    <stroke
        android:width="1dp"
        android:color="@color/red" />
    <solid android:color="@color/black"/>
</shape>

关闭时,switch_material_clone.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="@dimen/dp_10" />
    <stroke
        android:width="1dp"
        android:color="@color/green" />
    <solid android:color="@color/black" />
</shape>

效果:

SwitchMaterial

switchMaterial比较简单,直接看所有属性了!

<com.google.android.material.switchmaterial.SwitchMaterial
        android:id="@+id/materialSwitch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="这是一串文字"
        android:textOff="开"
        android:textOn="关"
        app:showText="true"
        
        app:thumbTint="@color/green"
        app:trackTint="@color/red"
        
        app:track="@drawable/switch_material_select"
        app:trackTintMode="multiply"
        
        app:switchMinWidth="100dp"
        app:switchPadding="20dp" />
  • android:textOff [checked=false help文字]
  • android:textOn [checked=true help文字]
  • app:showText [显示help文字]
  • app:switchMinWidth [文字宽度]
  • app:switchPadding [文字和switch的距离]
  • app:switchTextAppearance 自定义样式
  • android:typeface 设置字体
  • app:thumbTint 按钮颜色
  • app:trackTint 轨道颜色[可配合app:trackTintMode]
  • app:track 自定义颜色/背景

来看看效果吧:


完整代码

相关文章:

原创不易,您的点赞就是对我最大的支持!

s10g
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Android中使用 AutoCompleteTextView 实现手机号格式化附带清空历史的操作
08-31
有个小伙伴遇到了这样一个问题，就是AutoCompleteTextView实现自动填充的功能。同时要具备手机格式化的功能。接下来通过本文给大家分享使用 AutoCompleteTextView 实现手机号格式化附带清空历史的操作方法，需要的朋友参考下
Android Material 常用组件详解（四）—— SwitchMaterial、Chip、ChipGroup 使用详解
weixin_42046829的博客
11-27 1万+
1.SwitchMaterial 加强版的Switch 直接使用 <com.google.android.material.switchmaterial.SwitchMaterial android:layout_width="wrap_content" android:layout_height="match_parent" android:checked="true" android:enabled="true"/> 添加开关文字 <com.
安卓修改RadioButton相关属性
最新发布
moaking的博客
06-22 225
给RadioButton的isChecked赋值为true会选中当前RadioButton,并调用RadioGroup.setOnCheckedChangeListener 回调函数。代码中修改文字颜色，大小，textStyle。去掉RadioButton的圆圈按钮。设置图片在文字的相对位置。
Android Material Design之SwitchMaterial(四)
csdn_yang123的博客
11-23 1136
SwitchMaterial
Android 开关控件Switch
热门推荐
u014453443的博客
07-13 1万+
目录： 1.应用场景与概述 2.常用属性 3.简单使用 4.更改默认Switch的样式 5.自定义Switch 1.应用场景与概述 Switch是在4.0以后推出的，所以要注意开发时的minsdk设置,google在API 21后也推出support v7 包下的SwitchCompa的Material Design 开关控件，对低版本的有了更好的的支持。其实switch的应用场景和ToggleButton类似，多应用于两种状态的切换。 2...
【Android-JetpackCompose】7、布局、Material 组件和布局、自定义布局
呆呆的猫的博客
10-06 1502
每个界面元素都有一个父元素，还可能有多个子元素。此外，每个元素在其父元素中都有一个位置，指定为 (x, y) 位置；也都有一个尺寸，指定为 width 和 height。父元素定义其子元素的约束条件。元素需要在这些约束条件内定义尺寸。约束条件可限制元素的最小和最大 width 和 height。如果某个元素有子元素，它可能会测量每个子元素，以帮助确定其尺寸。在界面树中布置每个节点的过程分为三个步骤。测量所有子项确定自己的尺寸放置其子项layout 修饰符仅更改调用可组合项。
Android中的Switch控件
qq_51108920的博客
07-29 1万+
?xmlnshttps。
Android高级组件AutoCompleteTextView自动完成文本框使用详解
08-28
Android 高级组件 AutoCompleteTextView 自动完成文本框使用详解 AutoCompleteTextView 是 Android 中的一种高级组件，用于实现自动完成文本框的功能。它可以允许用户输入一定字符后，显示一个下拉菜单，供用户从中...
Android开发高级组件之自动完成文本框(AutoCompleteTextView)用法示例【附源码下载】
08-28
总之，Android的AutoCompleteTextView组件是一个强大的工具，能提高用户在输入时的效率和准确性。通过适当地配置属性和数据源，你可以创建一个自定义的自动补全体验，提升你的应用程序的用户体验。提供的源码示例...
实例讲解Android中的AutoCompleteTextView自动补全组件
09-02
AutoCompleteTextView是Android SDK提供的一种增强型的EditText组件，它具备自动补全功能，能够根据用户输入的内容，从预设的数据源中匹配并显示建议的完成项。在开发Android应用时，尤其是涉及到用户输入的场景，如...
Android自动编辑文本框(AutoCompleteTextView)使用方法详解
08-31
在Android开发中，AutoCompleteTextView是一个非常实用的控件，它继承自EditText，提供了一种在用户输入时显示下拉列表进行智能提示的功能。这种功能常见于搜索框、地址输入等场景，能提升用户体验，减少用户输入...
Android代码-material-animated-switch
08-06
Material Animated Switch A material Switch with icon animations and color transitions Sample video: Youtube Material Animated Switch video Sample app: Based on Inbox Pinned by Derek Torsani How to use By default show the inbox pinned switch With custom colors and icons attributes Remember put this for custom attribute usage xmlns:app="http://schemas.android.com/apk/res-auto" For Gradle Add repository repositories { maven { url "http://dl.bintray.com/glomadrian/maven" } } Ad
Android Switch自定义实现IOS效果
01-21
先看下效果图 自定义View public class Seniorswitch extends Switch { /** * 监听是否存在动作 */ private boolean IF_EVENT_MOVE = false; /** * 监听滑动时间 */ private long MOVE_TIME = -1; public Seniorswitch(Context context) { super(context); } public Seniorswitch(Context
MaterialAutoCompleteTextView自定义下拉选择，模糊搜索
呆咖啡的博客
11-24 660
使用 MaterialAutoCompleteTextView自定义下拉选择，模糊搜索
Android Material Design控件之Switch|SwitchCompat
LinWeiJ的博客
12-07 4631
Material Design Android控件之介绍 开关 Switch|SwitchCompat 自定义属性 Material Design控件之 源码地址：https://github.com/LinweiJ/MaterialDesignWidget
Android Material Design控件使用(二)
Lbsssss的博客
08-12 843
Android Material Design控件使用(二)
Android 使用Material Design实现滑动菜单
大山喵写博客的地方
08-20 1229
DrawerLayout布局 　　DrawerLayout是Design库中实现滑动菜单效果的支撑性布局，它允许放入两个直接子控件，第一个子控件是主屏幕中的内容，第二个子控件是滑动菜单中显示的内容。我们在activity_main.xml文件中使用DrawerLayout布局如下： <?xml version="1.0" encoding="utf-8"?> <android...
android MD风格组件(BottomNavigationView,配合lottie使用) (三)
高级开发者进阶ing... QaQ
01-26 3755
android MD风格组件(BottomNavigationView,配合lottie使用[三]基本使用设置小红点及其位置小坑:BottomNavigationView 配合lottie实现联动效果官方的效果 相关文章: android material design 风格组件(MaterialButton,MaterialButtonToggleGroup,Chip,ChipGroup)大汇总(一). android MD风格组件(TextInputLayout AutoCompleteTextVie
android md风格Switch,Android 两状态 或者 三状态 Switch 按钮，三状态切换超实用
weixin_26900991的博客
05-26 758
RMSwitch A simple View that works like a switch, but with more customizations.With the option to choose between two or three states. (from v1.1.0)** If you're upgrading from a version < 1.2.0, chec...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

s10g

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值