zoukankan      html  css  js  c++  java
  • Android中使用shape实现EditText圆角

    之前看到手机上的百度editText控件是圆角的就尝试做了一下,看了看相关的文章。

    因为代码少,看看就知道了。所以下面我就直接贴上代码供大家参考,有其他的好方法记得分享哦~

    整个代码不涉及JAVA代码,首先是需要被MainActivity加载的页面代码:

     1 <EditText
     2         android:id="@+id/edt_operator_name"
     3         
     4         android:layout_width="250dip"
     5         android:layout_height="wrap_content"
     6         android:background="@layout/rounded_edittext"
     7         android:gravity="center_vertical"
     8         android:hint="百度"
     9         android:paddingBottom="10dip"
    10         android:paddingTop="10dip" />

    然后就是具体的样式rounded_edittext.xml代码:

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     3     android:padding="10dp"
     4     android:shape="rectangle" >
     5 
     6     <solid android:color="#FFFFFF" />
     7 
     8     <corners
     9         android:bottomLeftRadius="15dp"
    10         android:bottomRightRadius="15dp"
    11         android:topLeftRadius="15dp"
    12         android:topRightRadius="15dp" />
    13 
    14 </shape>

    此时,运行即可。

    EditText去边框:EditText的background属性设置为@null就搞定了:android:background="@null"。

    其实以上内容的知识点就是shape的使用,下面简单的介绍一下:

    shape用于设定形状,可以在selector,layout等里面使用,有6个子标签,各属性如下:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
        
        <!-- 圆角 -->
        <corners
            android:radius="9dp"
            android:topLeftRadius="2dp"
            android:topRightRadius="2dp"
            android:bottomLeftRadius="2dp"
            android:bottomRightRadius="2dp"/><!-- 设置圆角半径 -->
        
        <!-- 渐变 -->
        <gradient
            android:startColor="@android:color/white"
            android:centerColor="@android:color/black"
            android:endColor="@android:color/black"
            android:useLevel="true"
            android:angle="45"//android:angle 整型 渐变角度(PS:当angle=0时,渐变色是从左向右。 然后逆时针方向转,当angle=90时为从下往上。angle必须为45的整数倍)
            android:type="radial"
            android:centerX="0"
            android:centerY="0"
            android:gradientRadius="90"/>
        
        <!-- 间隔 -->
        <padding
            android:left="2dp"
            android:top="2dp"
            android:right="2dp"
            android:bottom="2dp"/><!-- 各方向的间隔 -->
        
        <!-- 大小 -->
        <size
            android:width="50dp"
            android:height="50dp"/><!-- 宽度和高度 -->
        
        <!-- 填充 -->
        <solid
            android:color="@android:color/white"/><!-- 填充的颜色 -->
        
        <!-- 描边 -->
        <stroke
            android:width="2dp"
            android:color="@android:color/black"
            android:dashWidth="1dp"
            android:dashGap="2dp"/>
        
    </shape>

    填充:设置填充的颜色

    间隔:设置四个方向上的间隔

    大小:设置大小

    圆角:同时设置五个属性,则Radius属性无效

    android:Radius="20dp"                           设置四个角的半径

    android:topLeftRadius="20dp"              设置左上角的半径
    android:topRightRadius="20dp"           设置右上角的半径
    android:bottomLeftRadius="20dp"      设置右下角的半径
    android:bottomRightRadius="20dp"    设置左下角的半径

    描边:dashWidth和dashGap属性,只要其中一个设置为0dp,则边框为实现边框

    android:width="20dp"                               设置边边的宽度
    android:color="@android:color/black"  设置边边的颜色
    android:dashWidth="2dp"                         设置虚线的宽度
    android:dashGap="20dp"                          设置虚线的间隔宽度

    渐变:当设置填充颜色后,无渐变效果。angle的值必须是45的倍数(包括0),仅在type="linear"有效,不然会报错。android:useLevel 这个属性不知道有什么用。

    上面的圆角例子是layout作为背景,下面有一个selecter作为背景的例子(这个例子出自:http://www.oschina.net/question/166763_34833):

    main.xml:

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TestShapeButton"
        android:background="@drawable/button_selector"
        />

    button_selector.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector
        xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true" >
            <shape>
                <!-- 渐变 -->
                <gradient
                    android:startColor="#ff8c00"
                    android:endColor="#FFFFFF"
                    android:type="radial"
                    android:gradientRadius="50" />
                <!-- 描边 -->
                <stroke
                    android:width="2dp"
                    android:color="#dcdcdc"
                    android:dashWidth="5dp" 
                    android:dashGap="3dp" />
                <!-- 圆角 -->
                <corners
                    android:radius="2dp" />
                <padding
                    android:left="10dp"
                    android:top="10dp"
                    android:right="10dp"
                    android:bottom="10dp" />
            </shape>
        </item>
    
        <item android:state_focused="true" >
            <shape>
                <gradient
                    android:startColor="#ffc2b7"
                    android:endColor="#ffc2b7"
                    android:angle="270" />
                <stroke
                    android:width="2dp"
                    android:color="#dcdcdc" />
                <corners
                    android:radius="2dp" />
                <padding
                    android:left="10dp"
                    android:top="10dp"
                    android:right="10dp"
                    android:bottom="10dp" />
            </shape>
        </item>
    
        <item>       
            <shape>
                <solid android:color="#ff9d77"/>
                <stroke
                    android:width="2dp"
                    android:color="#fad3cf" />
                <corners 
                    android:topRightRadius="5dp"
                    android:bottomLeftRadius="5dp"
                    android:topLeftRadius="0dp"
                    android:bottomRightRadius="0dp"
                />
                <padding
                    android:left="10dp"
                    android:top="10dp"
                    android:right="10dp"
                    android:bottom="10dp" />
            </shape>
        </item>
    </selector>

    此外,我还在网上找到了个渐变的实例,地址如下:

    http://l62s.iteye.com/blog/1659433

    作者:af74776
    文章出处:http://www.cnblogs.com/scetopcsa/
    欢迎关注微信公众号:yilu_yiyou(一路一游),一个不仅仅是代码的世界!
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    用于 webpack 打包后方便修改的配置文件
    antd 中对树形表格中二级元素进行筛选过滤
    layui快速搭建一个后台管理系统
    centos使用shell定时清空缓存
    内存异常原因查询
    Protocol "‘https" not supported or disabled in libcurl
    HTML table标签实现表头固定
    vue 查询某个对象在对象列表的索引位置
    vue 实现页面监听键盘按键 上下左右
    Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能
  • 原文地址:https://www.cnblogs.com/scetopcsa/p/3673182.html
Copyright © 2011-2022 走看看