Android设置虚线、圆角、渐变

本文详细介绍如何在Android中使用自定义View实现多种视觉效果,包括虚线、圆角、渐变填充及交互点击效果等,并针对4.0以上设备出现的问题提供了解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

from:http://blog.youkuaiyun.com/lan410812571/article/details/9946991

有图又真相,先上图再说。


点击效果:




设置虚线:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:shape="line" >  
  4.     <stroke  
  5.         android:dashGap="3dp"  
  6.         android:dashWidth="6dp"  
  7.         android:width="1dp"  
  8.         android:color="#63a219" />  
  9.     <!-- 虚线的高度 -->  
  10.     <size android:height="1dp" />  
  11. </shape>  
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >
    <stroke
        android:dashGap="3dp"
        android:dashWidth="6dp"
        android:width="1dp"
        android:color="#63a219" />
	<!-- 虚线的高度 -->
    <size android:height="1dp" />
</shape>

其中,破折线的宽度为dashWith,破折线之间的空隙的宽度为dashGap,当dashGap=0dp时,为实线


设置圆角:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
  3.     android:shape="rectangle">  
  4.     <!-- 填充颜色 -->  
  5.     <solid android:color="#FFFFFF"></solid>  
  6.     <!-- 线的宽度,颜色灰色 -->  
  7.     <stroke android:width="1dp" android:color="#63a219"></stroke>          
  8.     <!-- 矩形的圆角半径 -->  
  9.     <corners android:radius="10dp" />         
  10. </shape>  
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <!-- 填充颜色 -->
    <solid android:color="#FFFFFF"></solid>
    <!-- 线的宽度,颜色灰色 -->
    <stroke android:width="1dp" android:color="#63a219"></stroke>        
    <!-- 矩形的圆角半径 -->
    <corners android:radius="10dp" />       
</shape>

设置渐变填充和四个圆角半径:
  1. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
  2.     android:shape="rectangle">  
  3.     <!--分別對應上面左圆角的半径,上面右圆角的半径,下面左圆角的半径,下面右圆角的半径-->  
  4.     <corners    
  5.           android:topLeftRadius="0dp"  
  6.           android:topRightRadius="7dp"  
  7.           android:bottomLeftRadius="0dp"  
  8.           android:bottomRightRadius="7dp"/>  
  9.     <!--設置漸變-->  
  10.     <gradient android:startColor="#9cff00"   
  11.           android:endColor="#197600"  
  12.           android:angle="270"/>  
  13.     <stroke     
  14.         android:width="1dp"   
  15.         android:color="#63a219" />   
  16. </shape>  
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <!--分別對應上面左圆角的半径,上面右圆角的半径,下面左圆角的半径,下面右圆角的半径-->
    <corners  
          android:topLeftRadius="0dp"
          android:topRightRadius="7dp"
          android:bottomLeftRadius="0dp"
          android:bottomRightRadius="7dp"/>
    <!--設置漸變-->
    <gradient android:startColor="#9cff00" 
          android:endColor="#197600"
          android:angle="270"/>
    <stroke   
        android:width="1dp" 
        android:color="#63a219" /> 
</shape>


设置渐变点击效果:

  1. <style name="list_item_top">  
  2.     <item name="android:clickable">true</item>  
  3.     <item name="android:focusable">true</item>  
  4.     <item name="android:paddingTop">10dip</item>  
  5.     <item name="android:paddingBottom">10dip</item>  
  6.     <item name="android:paddingLeft">10dip</item>  
  7.         <item name="android:paddingRight">10dip</item>  
  8.         <item name="android:gravity">center_vertical</item>  
  9.         <item name="android:background">@drawable/background_view_rounded_top</item>  
  10. </style>  
<style name="list_item_top">
	<item name="android:clickable">true</item>
	<item name="android:focusable">true</item>
	<item name="android:paddingTop">10dip</item>
	<item name="android:paddingBottom">10dip</item>
	<item name="android:paddingLeft">10dip</item>
    	<item name="android:paddingRight">10dip</item>
    	<item name="android:gravity">center_vertical</item>
    	<item name="android:background">@drawable/background_view_rounded_top</item>
</style>

  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <inset xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:insetLeft="1.0px"  
  4.     android:insetRight="1.0px" >  
  5.   
  6.     <selector>  
  7.         <item android:state_pressed="true">  
  8.             <shape>  
  9.                 <gradient  
  10.                     android:angle="270.0"  
  11.                     android:endColor="@color/base_end_color_pressed"  
  12.                     android:startColor="@color/base_start_color_pressed" />  
  13.   
  14.                 <corners  
  15.                     android:bottomLeftRadius="0.0dip"  
  16.                     android:bottomRightRadius="0.0dip"  
  17.                     android:radius="2.0dip"  
  18.                     android:topLeftRadius="10.0dip"  
  19.                     android:topRightRadius="10.0dip" />  
  20.                   
  21.                 <stroke   
  22.                     android:width="1dp"   
  23.                     android:color="#eededede" />  
  24.             </shape>  
  25.         </item>  
  26.         <item>  
  27.             <shape>  
  28.                 <gradient  
  29.                     android:angle="270.0"  
  30.                     android:endColor="@color/base_end_color_default"  
  31.                     android:startColor="@color/base_start_color_default" />  
  32.   
  33.                 <corners  
  34.                     android:bottomLeftRadius="0.0dip"  
  35.                     android:bottomRightRadius="0.0dip"  
  36.                     android:radius="2.0dip"  
  37.                     android:topLeftRadius="11.0dip"  
  38.                     android:topRightRadius="11.0dip" />  
  39.                   
  40.                 <stroke   
  41.                     android:width="1dp"   
  42.                     android:color="#eededede" />  
  43.             </shape>  
  44.         </item>  
  45.     </selector>  
  46.   
  47. </inset>  
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="1.0px"
    android:insetRight="1.0px" >

    <selector>
        <item android:state_pressed="true">
            <shape>
                <gradient
                    android:angle="270.0"
                    android:endColor="@color/base_end_color_pressed"
                    android:startColor="@color/base_start_color_pressed" />

                <corners
                    android:bottomLeftRadius="0.0dip"
                    android:bottomRightRadius="0.0dip"
                    android:radius="2.0dip"
                    android:topLeftRadius="10.0dip"
                    android:topRightRadius="10.0dip" />
                
                <stroke 
                    android:width="1dp" 
                    android:color="#eededede" />
            </shape>
        </item>
        <item>
            <shape>
                <gradient
                    android:angle="270.0"
                    android:endColor="@color/base_end_color_default"
                    android:startColor="@color/base_start_color_default" />

                <corners
                    android:bottomLeftRadius="0.0dip"
                    android:bottomRightRadius="0.0dip"
                    android:radius="2.0dip"
                    android:topLeftRadius="11.0dip"
                    android:topRightRadius="11.0dip" />
                
                <stroke 
                    android:width="1dp" 
                    android:color="#eededede" />
            </shape>
        </item>
    </selector>

</inset>



重新补充:好久没有关注自己的博客,没有注意到各位的评论,关于4.0以上设备虚线会变实线的问题,下面几位仁兄已经给出了答案,

代码中可以添加:

  1. line.setLayerType(View.LAYER_TYPE_SOFTWARE, null);  
line.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

xml中可以添加:

  1. android:layerType="software"  
android:layerType="software"

谢谢大家的参与!


源码免费下载地址:免费下载

http://download.youkuaiyun.com/detail/lan410812571/5925371

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值