android自定义EditText,Button和Seekbar简单用法(shapeDrawable)

匿名 (未验证) 提交于 2019-12-02 23:51:01

系统提供的控件有时候并不能满足我们的需求,因此我们使用自定义控件,下面介绍Button高亮 ,Edittext的高亮,自定义Seekbar,Edittext的风格,并介绍ShapeDrawable!

1.Button点击高亮

当我们点击button按钮时,button按钮的颜色应当发生变化,不然用户不确定自己点击的button是否生效,我们选择两种颜色,一种是正常状态下的红色,一种是点击状态下的深红色,在drawable目录下新建一个xml文件,代码如下:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <!--当点击button按钮时,button的颜色--> <item android:state_pressed="true" android:drawable="@color/c1"></item>     <!--当未点击button按钮时,button的颜色--> <item android:state_pressed="false" android:drawable="@color/c10"></item>     <!--state_press="true|false"是确定按钮是否被点击-->     <!--c1和c10是我在color里自定义的两种颜色--> </selector> 

需要注意的是android:drawable不可以更换成android:color,否则会报错噢

然后在layout布局中新建一个Button组件并引用上面我们定义的xml文件,代码如下
  <Button         android:text="高亮BUTTON"         android:layout_margin="@dimen/spaceing"         android:background="@drawable/button_style"         android:layout_width="match_parent"         android:layout_height="wrap_content" />     <!--button_style是我们刚才写的xml文件--> 

运行代码,点击按钮就可以看见效果



2.自定义SeekBar
Seekbar是拖动条,拖动后颜色或状态会发生变化,这里先准备两张颜色不一样但是形状一样的图片,然后在drawable目录下新建一个XML文件,代码如下

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">     <!--定义轨道的背景-->     <item android:id="@android:id/background" android:drawable="@drawable/heart_black"/>     <!--定义已完成轨道的背景-->     <!--heart和heart_black是我放在drawable目录下的两张图片-->     <item android:id="@android:id/progress" android:drawable="@drawable/heart"/> </layer-list> 

注意:需要指定id!

然后再layout布局中新建一个SeekBar组件,引用我们刚才定义的xml,代码如下

<SeekBar         android:layout_margin="@dimen/spaceing"         android:max="100"         android:progressDrawable="@drawable/my_bar"         <!--my_bar是刚才定义xml文件的名称-->         android:layout_width="match_parent"         android:layout_height="wrap_content" /> 

然后运行,可以看见效果



3.Edittext高亮显示
过程和一类似,直接贴代码

<selector xmlns:android="http://schemas.android.com/apk/res/android">     <!--state_focused是判断当前文本框是有焦点即是否被选中-->     <item android:state_focused="true" android:color="@color/c1"/>     <item android:state_focused="false" android:color="@color/c2"/> </selector>  

注意这里是android:color!
然后在布局新建一个Edittext然后设置textColor属性的值为我们定义的xml文件即可
运行即可看到效果

4.自定义Edittext背景
首先还是要新建xml文件,然后根目录为shape,根据自己想要的风格去设置以下几个属性的值,如下

   <!--定义几何形的四个角度的弧度-->     <corners/> ridus的值越大,弧度越大,可以分别对四个角指定弧度,但是没什么必要     <!--定义使用渐变颜色填充-->     <gradient/> 渐变颜色主要是起始颜色,终止颜色,以及angle     <!--定义几何形状的内边距-->     <padding/> 指定上下左右的内边距,比如说edittext则是指定输入字体与整个框上下左的边距     <!--定义几何形状的大小-->     <size/> 定义宽度和高度     <!--定义使用单种颜色填充-->     <solid/> 设置单种固定颜色的填充    <stroke/>     <!--定义为几何形状绘制边框--> 

我写了四个Edittext背景的代码,分别如下

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">     <!--设置填充颜色-->    <solid android:color="@color/c7"/>     <!--设置四周的内边距-->     <padding android:left="@dimen/spaceing"         android:bottom="@dimen/spaceing"         android:right="@dimen/spaceing"         android:top="@dimen/spaceing"/>     <!--设置边框-->     <stroke android:width="3dip" android:color="@color/c9"/> </shape> 

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <!--定义填充渐变颜色-->     <gradient android:startColor="@color/c1"         android:endColor="@color/c3"         android:angle="45"/>     <!--设置内填充-->     <padding android:top="@dimen/spaceing"         android:right="@dimen/spaceing"         android:bottom="@dimen/spaceing"         android:left="@dimen/spaceing"/>     <!--设置圆角矩形-->     <corners android:radius="20dp"/> </shape> 

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <!--定义填充渐变颜色-->     <gradient android:startColor="@color/c1"         android:endColor="@color/c3"         android:angle="45"         android:type="linear"/>     <!--设置内填充-->     <padding android:left="@dimen/spaceing"         android:bottom="@dimen/spaceing"         android:right="@dimen/spaceing"         android:top="@dimen/spaceing"/>     <!--设置圆角矩形-->     <corners android:radius="8dp"/> </shape> 

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">    <stroke android:width="2dip"        android:color="@color/c2"        android:dashGap="5dip"        android:dashWidth="100dp"/> </shape> 

在layout布局中新建四个Edittext,并分别设置四个background为上面自定义的四个xml文件即可 主要记清楚ShapeDrawable几个属性的用法。

总的效果如图所示 ![高亮button和Seekbar以及四个Edittext](https://img-blog.csdnimg.cn/20190723151615902.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNzg5Mg==,size_16,color_FFFFFF,t_70)

文章来源: https://blog.csdn.net/weixin_43927892/article/details/96991870
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!