【UI篇】BEditText-圆角/多边阴影/描边/渐变色/一键清空/输入法弹出控制/......

一、功能介绍

为了能够更直观的让大家知道BEditText都能做什么,下面我列了一个功能列表,做一下简单描述;如下:

功能 描述
圆角 可以统一设置圆角角度,也可以四个角单独设置
描边 可以设置描边大小、颜色,可以隐藏任意边
阴影 可以设置阴影大小、颜色、偏移、距离、单边多边显示等
渐变色 可以设置文本渐变色、背景渐变色
辅助功能 支持一键清空
支持内容可见性切换&自定义图标
支持设置四周图标&自定义宽高
支持输入法控制
另类样式 支付密码输入样式、验证码输入样式等

下面详细说说各个功能的使用方法:

◆ 圆角

圆角演示.gif
XML设置 代码设置 描述
app:bsv_roundRadius="10dp" setRoundradius(int radius) 设置四个角圆角值,优先级最高
app:bsv_topLeftRadius="10dp" setTopLeftRoundRadius(int radius) 左上角圆角值
app:bsv_topRightRadius="10dp" setTopRightRoundRadius(int radius) 右上角圆角值
app:bsv_bottomLeftRadius="10dp" setBottomLeftRoundRadius(int radius) 左下角圆角值
app:bsv_bottomRightRadius="10dp" setBottomRightRoundRadius(int radius) 左下角圆角值

如果设置了roundRadius的值默认会重置四个角度的值,以roundRadius为准

  <!--四个圆角都为10dp-->
  <com.bary.ui.view.BEditText
        ...
        app:bsv_roundRadius="10dp"
  />
  <!--左上、右上、坐下圆角为10dp-->
  <com.bary.ui.view.BEditText
        ...
        app:bsv_topLeftRadius="10dp"
        app:bsv_topRightRadius="10dp"
        app:bsv_bottomLeftRadius="10dp"
  />


◆ 描边

描边演示.gif
XML设置 代码设置 描述
app:bsv_borderSize="3dp" setBorderSize(float size) 设置描边尺寸
app:bsv_borderColor="#ff8585" setBorderColor(int color) 设置描边颜色
app:bsv_borderHideEdges="left|top" hideBorderEdges(int... edges) 设置需要隐藏的边,值为:
left、top、right、bottom;
可以同时设置多个用|分隔
即可(代码设置的话,
hideBorderEdges方法为
不定参,传多个参数即可;
BorderBuilder.LEFT、
BorderBuilder.TOP、
BorderBuilder.RIGHT、
BorderBuilder.BOTTOM)

想要显示描边borderShow必须为true

  <com.bary.ui.view.BEditText
        ...
        app:bsv_borderSize="3dp"
        app:bsv_borderColor="#ff8585"
        app:bsv_borderHideEdges="left|top"
  />


◆ 阴影

阴影演示.gif
XML设置 代码设置 描述
app:bsv_shadowShow="true" setShadowShow(boolean show) 设置是否展示阴影
app:bsv_shadowSize="3dp" setShadowSize(float size) 设置阴影尺寸,优先级最高
app:bsv_shadowXSize="3dp" setShadowXSize(float size) 可以单独设置横向阴影尺寸
app:bsv_shadowYSize="3dp" setShadowYSize(float size) 可以单独设置纵向阴影尺寸
app:bsv_shadowDx="1dp" setShadowDx(float dx) 设置横向的偏移值,默认0
视图在中心,左右阴影尺寸
相同
app:bsv_shadowDy="1dp" setShadowDy(float dy) 设置纵向的偏移值,默认0
视图在中心,上下阴影尺寸
相同
app:bsv_shadowColor="#ff8585" setShadowColor(int color) 设置阴影颜色
app:bsv_shadowAlpha="0.8" setShadowAlpha(float alpha) 设置阴影透明度
app:bsv_shadowHideEdges="left|top" hideShadowEdges(int... edges) 设置需要隐藏的边,值为:
left、top、right、bottom;
可以同时设置多个用|分隔
即可(代码设置的话,
hideShadowEdges方法为
不定参,传多个参数即可;
ShadowBuilder.LEFT、
ShadowBuilder.TOP、
ShadowBuilder.RIGHT、
ShadowBuilder.BOTTOM)

想要显示描边shadowShow必须为true,如果设置了shadowSize的值默认会重置shadowXSize,shadowYSize的值,以shadowSize为准,四边阴影尺寸相同,想要横向纵向尺寸不同,只设置shadowXSize,shadowYSize即可。

  <com.bary.ui.view.BEditText
        ...
        app:bsv_shadowShow="true"
        app:bsv_shadowSize="3dp"
        app:bsv_shadowDx="1dp"
        app:bsv_shadowDy="1dp"
        app:bsv_shadowColor="#ff8585"
        app:bsv_shadowAlpha="0.8"
        app:bsv_shadowHideEdges="left|top"
  />


◆ 渐变色

渐变色演示.gif
XML设置 代码设置 描述
app:bsv_backgroundGradientColor="#FF8585|#FF8B15" setBackgroundGradientColor(String... colors) 设置背景渐变色,至少两个16进制颜色值;
代码设置方法为不定参,传多个参数16进制颜色值
app:bsv_backgroundGradientType="linear" setBackgroundGradientType
(GradientType type)
设置渐变类型,参数为:
linear-线性
radial-圆环
sweep-角度
-------------------------
GradientType.LINEAR、
GradientType.RADIAL、
GradientType.SWEEP
app:bsv_backgroundGradientOrientation="horizontal" setBackgroundGradientOrientation
(GradientOrientation orientation)
设置渐变方向,参数为:
horizontal-垂直
vertical-水平
diagonal-对角
-------------------------
GradientOrientation.HORIZONTAL、
GradientOrientation.VERTICAL、
GradientOrientation.DIAGONAL
app:bsv_textGradientColor="#FF8585|#FF8B15" setBackgroundGradientColor(String... colors) 设置背景渐变色,至少两个16进制颜色值;
代码设置方法为不定参,传多个参数16进制颜色值
app:bsv_textGradientType="linear" setTextGradientType
(GradientType type)
设置渐变类型,参数同背景渐变类型相同
app:bsv_textGradientOrientation="horizontal" setTextGradientOrientation
(GradientOrientation orientation)
设置渐变方向,参数同背景渐变类型相同

☛ 由于渐变色需要在同一个属性下设置多个颜色,所以只能设置16进制颜色值,不能使用color下的颜色资源

背景渐变:

  <com.bary.ui.view.BEditText
        ...
        app:bsv_backgroundGradientColor="#FF8585|#FF8B15"
        app:bsv_backgroundGradientType="linear"
        app:bsv_backgroundGradientOrientation="horizontal"

  />

文本渐变:

  <com.bary.ui.view.BEditText
        ...
        app:bsv_textGradientColor="#FF8585|#FF8B15"
        app:bsv_textGradientType="linear"
        app:bsv_textGradientOrientation="horizontal"

  />


◆ 辅助功能

一键清空&内容可见.jpg
1、一键清空

自带一键清空功能,当文本框有内容的时候自动显示出来,可以设置展示/隐藏,图标可更换;具体说明如下:

XML设置 代码设置 描述
app:bsv_showClearIcon="true" showClearIcon(boolean show) 设置是否显示一键清空图标,默认true
app:bsv_clearIcon="@drawable/clear" setClearIcon(int res) 设置一键清空按钮图标


2、内容可见性切换&自定义图标

支持自定义内容可见按钮功能,默认隐藏,可以设置展示/隐藏,图标可更换;具体说明如下:

XML设置 代码设置 描述
app:bsv_showSecretIcon="false" showSecretIcon(boolean show) 设置是否显示内容可见控制图标,默认false
app:bsv_secretIconVisible="@drawable/visible"
app:bsv_secretIcoInvisible="@drawable/invisible"
setSecretIcon(int visibe, int invisibe) 设置内容隐藏按钮图标


3、添加左右两侧图标&自定义宽高
XML设置 代码设置 描述
app:bsv_leftIcon="@drawable/icon"
app:bsv_leftIconWidth="20dp"
app:bsv_leftIconHeight="20dp"
app:bsv_leftIconPadding="5dp"
addLeftIcon(
Drawable drawable,
int width,
int height,
int padding,
OnClickListener listener
)
添加左侧图标,代码添加支持多个
右侧同上(left-right) addRightIcon ......

注意:
1、xml设置图标左右两个各自职能设置一个,点击事件通过代码设置setOnLeftIconClickListener,setOnRightIconClickListener来实现。
2、在代码添加两侧图标时可以添加多个,直接附带点击事件。

4、输入法控制

可以设置编辑模式,默认普通模式
【普通模式】
【不可编辑模式】
【可编辑不弹输入法】(有光标,一般用在语音录入)


温馨提示:
addTextChangedListener ———— addNewTextChangedListener
setOnTouchListener ———— setNewOnTouchListener
setOnFocusChangeListener ———— setNewOnFocusChangeListener

这几个监听需要调用新的方法再能生效。

二、使用方法

1、把maven { url 'https://jitpack.io' }这段代码添加到项目的build.gradle存储库末尾

  allprojects {
        repositories {
              ...
              maven { url 'https://www.jitpack.io' }
        }
  }

2、在需要用的主程序或Module下的build.gradle中引用

  dependencies {
        ...
        implementation 'com.github.barystudio:BSuperView:最新版本'
  }



点击下方↓↓↓ 查看最新版本

BSuperView 如果觉得有用欢迎Star、赞、赏 O(∩_∩)O


Bary Studio

更多内容都在【Android开发这些年,沉淀下了什么?】专题中


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342