drawable下的非图片资源之layer-list

转载 2016年05月31日 09:05:55

1.圆角图片:



也就是一个左右下角带圆角,上方不带圆角的白色背景矩形,而且只有左、右和下边框,颜色为浅灰色。

当然,切一个.9图片作为背景也能实现,但是能用代码实现的还是尽量用代码实现,因为图片过多一个消耗内存,另一个还增加apk大小。

这种效果可以通过layer-lsit来实现,在drawable文件夹下面建一个xml文件,具体代码如下:

复制代码
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">   
 3     <!-- 
 4         layer-list中的item是按照顺序从下往上叠加的,即先定义的item在下面,后面的依次往上面叠放
 5     -->  
 6     <!-- 这里定义一个下面带圆角,上面不带圆角的矩形,边框颜色为@color/line_color -->
 7     <item>   
 8          <shape>   
 9                <corners android:bottomLeftRadius="5dp" 
10                    android:bottomRightRadius="5dp" />
11                <stroke android:width="1px" android:color="@color/line_color" />
12          </shape>       
13     </item>  
14     <!-- 
15         这里定义一个下面带圆角,上面不带圆角的矩形,背景为白色
16         这里设置了android:right="1px" android:left="1px" android:bottom="1px"属性
17         android:right="1px"表示该item右边往里面缩了1px
18         android:left="1px"表示该item左边往里面缩了1px
19         android:bottom="1px"表示该item下面往里面缩了1px
20         这样,左、右、下都比原来缩小了1px,这缩小出来的郑刚是上面一个item的边框的左、右、下边框
21         而top没有缩小,所以覆盖了上面一个item的边框的上边框。
22         所以这个item叠加上面一个item之后的效果就是一个只含左、右、下灰色边框,下面带圆角,上面不带圆角的白色背景矩形
23      -->
24     <item android:right="1px" android:left="1px" android:bottom="1px">   
25          <shape>   
26                <corners android:bottomLeftRadius="5dp" 
27                    android:bottomRightRadius="5dp" />
28                <solid android:color="@color/white" />
29          </shape>       
30     </item>  
31 </layer-list>
复制代码

layer-lsit的用法注释中也讲的比较详细。

然后在View中设置背景为改drawable即可。

当然也可以直接用sharp来实现:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp"/>
    <solid android:color="#ffffff" />
    <stroke android:color="#66000000" android:width="1dp"/>


</shape>

2.两个图片叠加:

  1. <layer-list    
  2.    xmlns:android="http://schemas.android.com/apk/res/android">   
  3.     <!--图片1-->  
  4.      <item android:id="@+id/user_faceback_drawable"  
  5.            android:drawable="@drawable/faceback" />    
  6.     <!--图片2-->  
  7.      <item android:id="@+id/user_face_drawable"   
  8.            android:drawable="@drawable/h001"     
  9.            android:left="10.0dip"   
  10.            android:top="18.0dip"   
  11.            android:right="25.0dip"   
  12.            android:bottom="35.0dip" />    
  13.  </layer-list>   
  14. <!--2个图片的叠加-->

           +                    =           


3.旋转叠加:


创建drawable xml文件
   <?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <!-- 最底层的图片,以x,y轴坐标为中心进行旋转-->
        <rotate android:pivotX="0" android:pivotY="0"
                android:fromDegrees="-10" android:toDegrees="-10">
            <bitmap android:src="@drawable/chatting_bg_default_thumb"/>
         </rotate>
    </item>
    <!-- 第二层的图片,以x,y轴坐标为中心进行旋转-->
    <item>
        <rotate android:pivotX="0" android:pivotY="0"
                android:fromDegrees="15" android:toDegrees="15">
            <bitmap android:src="@drawable/chatting_bg_purecolor_thumb"/>
        </rotate>
    </item>
    <!-- 最上层的图片,以x,y轴坐标为中心进行旋转-->
    <item>
        <rotate android:pivotX="0" android:pivotY="0"
                android:fromDegrees="35" android:toDegrees="55">
            <bitmap android:src="@drawable/mark"/>
        </rotate>
    </item>
</layer-list>

布局文件中添加创建的图片

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/layer_image" />

</RelativeLayout>

layer-list <wbr>的使用

4.圆形按钮:


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

    <item>
        <shape android:shape="oval" >

            <solid android:color="#ffffff" />
            <size android:width="170dp" android:height="170dp"/>
        </shape>
    </item>

    <item android:bottom="8dp" android:right="8dp" android:top="8dp" android:left="8dp" >
        <selector xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:state_pressed="true">
                <shape android:shape="oval" >

                    <solid android:color="#e66b4f" />
                    <size android:width="162dp" android:height="162dp"/>
                </shape>
            </item>

            <item>
                <shape android:shape="oval" >

                    <solid android:color="#f3876f" />
                    <size android:width="162dp" android:height="162dp"/>
                </shape>
            </item>

        </selector>
    </item>

</layer-list>

5.使用layerlist定义seekbar样式(也可定义progressbar,rattingbar样式):

5.1.layerlist中使用图片:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/seekbar_bg" android:id="@android:id/background"/>
    <item  android:id="@android:id/progress" android:drawable="@drawable/seekbar_front"/>
        
    <item android:drawable="@drawable/seekbar_front" android:id="@android:id/secondaryProgress"/>

</layer-list>

seekbar_front.png如下图:

seekbar_bg.png如下图:


图片没必要这么长的,只要颜色和样子一样即可,这种短图片也会自动根据进度拉长

             

布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.example.zhouyi.layerlisttest.MainActivity">

   <SeekBar

       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:max="100"
       android:layout_centerInParent="true"
       android:progress="40"
       android:secondaryProgress="70"
       android:progressDrawable="@drawable/layerlist_seekbar"
       android:maxHeight="10dp"
       android:minHeight="10dp"
       />

</RelativeLayout>

maxHeight和minHeight定义为layerlist重最高图片的高度,否则会出现thumb不居中的问题

定义thumb:

selector:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按下状态 -->
    <item android:state_pressed="true"
        android:drawable="@drawable/thumb_dn" />


    <!-- 默认状态 -->
    <item android:drawable="@drawable/thumb_up" />

</selector>

thumb_up.png如下图:

thumb_dn.png如下图:

布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.example.zhouyi.layerlisttest.MainActivity">

   <SeekBar

       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:max="100"
       android:layout_centerInParent="true"
       android:progress="40"
       android:secondaryProgress="70"
       android:progressDrawable="@drawable/layerlist_seekbar"
       android:thumb="@drawable/sel_seekbarthumb"
       android:maxHeight="10dp"
       android:minHeight="10dp"
       />

</RelativeLayout>


效果:



5.2 layerlist中使用sharp:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent" />

        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
        <shape android:shape="rectangle">
            <solid android:color="#00ff00" />

        </shape>
        </clip>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
        <shape android:shape="rectangle">
            <solid android:color="#55000000" />

        </shape>
        </clip>
    </item>

</layer-list>
后面两个progress对应的item,一定要用clip包裹起来



<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.example.zhouyi.layerlisttest.MainActivity">

   <SeekBar

       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:max="100"
       android:layout_centerInParent="true"
       android:progress="40"
       android:secondaryProgress="70"
       android:progressDrawable="@drawable/layerlist_seekbar"
       android:thumb="@drawable/sel_seekbarthumb"
       android:maxHeight="10dp"
       android:minHeight="10dp"
       />

</RelativeLayout>


也要用max/minheight限定其大小,否则会出现进度条过大的情况





相关文章推荐

Android开发:shape和selector和layer-list的(详细说明)

shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector。可以这样说,shape和...
  • brokge
  • brokge
  • 2013年08月02日 09:59
  • 120099

StateListDrawable+LayerDrawable 概念的介绍

StateListDrawable 有些事只知其然,不知其所以然,对于写代码,就没那么流畅了呢! –只有书上有这个概念—用于组织多个Drawable对象,当使用StateListDrawable作为...

在drawable下的xml文件中layer-list的用法一:直接指定已有图片资源

layer-list可以实现多个图片的叠加 一,在drawable目录下创建layer.xml 其中,left,top,right,bottom属性可以设置上层图片距离底层图片的上下左右的边距 ...

LayerDrawable层叠样式layer-list

layer-list可以将多个图片按照顺序层叠起来。 语法:在drawalbe/drawable-layer.xml中 Java代码  "http://schemas.android.com/apk/...
  • kepoon
  • kepoon
  • 2011年07月04日 16:26
  • 3355

Android中的MVP架构总结(一)

MVC 、MVP 、MVVM 这些开发框架相信大家都已经听说并或多或少的用过了,在项目中,我也用到了MVP开发模式,在此结合网上一些介绍,做一个关于MVP的总结。一 、android中的MVC是什么?...

符合Material Design的抽屉导航效果

现在看来,抽屉式导航[已经成为主流导航模式之一](http://goo.gl/w4FVWS)。尽管广受批评,但我还是很喜欢该样式,因此我决定在我写的几个app上添加这个控件。这篇文章想通过介绍我觉得抽...

drawable下的非图片资源之sharp

一、sharp: sharp节点属性:  Android:shape=["rectangle" | "oval" | "line" | "ring"] 其中rectagle矩形,oval椭圆,...
  • LAMP_zy
  • LAMP_zy
  • 2016年05月29日 22:29
  • 671

不同屏幕尺寸时获取drawable图片资源的真实尺寸

不同屏幕尺寸时获取drawable图片资源的真实尺寸

关于Android读取不同位置(drawable,asset,SDCard)的图片资源的总结

近日做到从内存卡读取图片的功能,在此,对获取图片资源的方法稍作总结: 方式一: 已将图片保存到drawable目录下,通过图片id获得Drawable或者Bitmap,此方式最常用。(若只知道图片...
  • zcmain
  • zcmain
  • 2013年10月10日 14:37
  • 1741

Android读取不同位置(drawable,asset,SDCard)的图片资源

一、概念区别 Bitmap - 称作位图,一般位图的文件格式后缀为bmp,当然编码器也有很多如RGB565、RGB8888。作为一种逐像素的显示对象执行效率高,但是缺点也很明显存储效率低。我们理...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:drawable下的非图片资源之layer-list
举报原因:
原因补充:

(最多只允许输入30个字)