Android: Drawable Resources

概述:drawable 资源是一个比较广泛的概念,drawable目录下面用好几种drawable资源。包括: 1. Bitmap File, (.png, .png, .gif), 映射的类型是BitmapDrawable。 2. Nine-Patch File, 点9文件, 映射的类型是NinePatchDrawable。 3. Layer List, 层级列表, 索引越大,越在最上面, 映射的类型是LayerListDrawable。 4. State List, 申请列表, 映射的类型是StateListDrawable。 5. Level List, 等级列表, 每个item都有一个maxLevel值, 映射类型是LevelListDrawable。6. Transition Drawable, 两个drawable资源之间切换, 映射的类型是TransitionDrawable。 7. Inset Drawable, 如果View的背景需要比View的尺寸小的时候,这个时候就派上用场了。 8. Clip Drawable,剪切drawable, 映射的类型是 ClipDrawable。 9. Scale Drawable, 缩放drawable, 映射的类型ScaleDrawable。 10. Shape Drawable, 几何形状, 映射的类型ShapeDrawable。

一、Bitmap

android系统支持3中格式: .png(支持最好), .jpg(可以接受), .gif(不推荐)。

文件位置:res/drawable/filename.png (.png, .jpg, .gif)

映射类型:BitmapDrawable。

引用方式: 1. 在java中, R.drawable.filename。 2. 在xml中, @[package:]drawable/filename。

实例:

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

Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage);
XML Bitmap

文件位置:res/drawable/filename.xml

映射类型:BitmapDrawable。

引用方式: 1. 在java中, R.drawable.filename。 2. 在xml中, @[package:]drawable/filename。

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@[package:]drawable/drawable_resource"
    android:antialias=["true" | "false"]
    android:dither=["true" | "false"]
    android:filter=["true" | "false"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                      "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                      "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    android:mipMap=["true" | "false"]
    android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />
<bitmap>

定义一个bitmap资源。

xmlns:android

只有<bitmap>作为xml的根节点的时候需要填写这个属性, 如果<bitmap>作为其他节点的子节点的时候,就不要这个属性了, 比如<bitmap>作为<item>的子节点的时候,就不需要了。

android:src

指向的bitmap资源。

android:antialias

boolean类型, 是否抗锯齿。

android:dither

boolean类型, 是否脉冲。

android:filter


android:gravity

关键字, 

top Put the object at the top of its container, not changing its size.
bottom Put the object at the bottom of its container, not changing its size.
left Put the object at the left edge of its container, not changing its size.
right Put the object at the right edge of its container, not changing its size.
center_vertical Place object in the vertical center of its container, not changing its size.
fill_vertical Grow the vertical size of the object if needed so it completely fills its container.
center_horizontal Place object in the horizontal center of its container, not changing its size.
fill_horizontal Grow the horizontal size of the object if needed so it completely fills its container.
center Place the object in the center of its container in both the vertical and horizontal axis, not changing its size.
fill Grow the horizontal and vertical size of the object if needed so it completely fills its container. This is the default.
clip_vertical Additional option that can be set to have the top and/or bottom edges of the child clipped to its container's bounds. The clip is based on the vertical gravity: a top gravity clips the bottom edge, a bottom gravity clips the top edge, and neither clips both edges.
clip_horizontal Additional option that can be set to have the left and/or right edges of the child clipped to its container's bounds. The clip is based on the horizontal gravity: a left gravity clips the right edge, a right gravity clips the left edge, and neither clips both edges.
android:mipmap


android:tileMode

关键字

Value Description
disabled Do not tile the bitmap. This is the default value.
clamp Replicates the edge color if the shader draws outside of its original bounds
repeat Repeats the shader's image horizontally and vertically.
mirror Repeats the shader's image horizontally and vertically, alternating mirror images so that adjacent images always seam.
实例:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/icon"
    android:tileMode="repeat" />

二、Nine-Patch

文件位置:res/drawable/filename.9.png

映射类型:NinePatchDrawable。

引用方式:1. 在java中, R.drawable.filename。 2. 在xml中, @[package:]drawable/filename。

实例:

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/myninepatch" />
XML Nine-Patch

文件位置:res/drawable/filename.xml

映射类型:NinePatchDrawable。

引用方式:1. 在java中, R.drawable.filename。 2. 在xml中, @[package:]drawable/filename。

<?xml version="1.0" encoding="utf-8"?>
<nine-patch
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@[package:]drawable/drawable_resource"
    android:dither=["true" | "false"] />

<nine-patch>

.9资源。

xmlns:android

命名空间, 值为:“http://schemas.android.com/apk/res/android”。这个值是固定的。

android:src

指向的一个.9资源。

android:dither


三、Layer List

文件位置:res/drawable/filename

映射类型:LayerListDrawable。

引用方式:1. 在java中, R.drawable.filename。 2. 在xml中, @[package:]drawable/filename。

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</layer-list>
<layer-list>

层级列表。

xmlns:android

命名空间, 和上面一样, 下面如果还有这个属性,就不做解释了。

<item>

android:drawable

指向的一个drawable资源。

android:id

指定一个id,可以通过View.findViewById(int)或Activity.findViewById(int)找到。然后可以做些修改。方便在java代码中,动态修改。

android:top, android:right, android:bottom, android:left

分别是,上,右, 下, 左。

在使用<layer-list>的时候有一个地方需要注意,<item>可以是一个自闭节点,然后指向一个drawable资源,也可以包含<bitmap>节点。

实例:

主布局文件:

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

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/layer_list1" />

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/layer_list2" />
</LinearLayout>

layer_list1.xml 文件:

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

    <item
        android:id="@+id/image1"
        android:drawable="@mipmap/images1" />

    <item
        android:id="@+id/image1"
        android:drawable="@mipmap/images1"
        android:top="100dp"
        android:left="100dp"/>

    <item
        android:id="@+id/image1"
        android:top="200dp"
        android:left="200dp"
        android:drawable="@mipmap/images1" />
</layer-list>

layer_list2.xml 文件:

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

    <item>
        <bitmap android:src="@mipmap/images3"
            android:gravity="center" />
    </item>
    <item android:top="100dp" android:left="100dp">
        <bitmap android:src="@mipmap/images3"
            android:gravity="center" />
    </item>
    <item android:top="200dp" android:left="200dp">
        <bitmap android:src="@mipmap/images3"
            android:gravity="center" />
    </item>
</layer-list>

效果图:




四、State List

申明列表, 描述列表。

简单说就是,事先在xml文件中,列出一系列drawable和状态对应的<item>。

文件位置:res/drawable/filename。

映射类型:StateListDrawable。

引用方式:1. 在java中, R.drawable.filename。 2. 在xml中, @[package:]drawable/filename。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"]
    android:dither=["true" | "false"]
    android:variablePadding=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:state_pressed=["true" | "false"]
        android:state_focused=["true" | "false"]
        android:state_hovered=["true" | "false"]
        android:state_selected=["true" | "false"]
        android:state_checkable=["true" | "false"]
        android:state_checked=["true" | "false"]
        android:state_enabled=["true" | "false"]
        android:state_activated=["true" | "false"]
        android:state_window_focused=["true" | "false"] />
</selector>
<selector>

android:constantSize

boolean类型。

android:dither

boolean类型。

android:variablePadding

boolean类型。

<item>

android:drawable

指向drawable资源。

android:state_pressed

boolean类型,表示:按下状态。后面的都是各种不同的状态。比如获得焦点状态, 被选择状态等等。。

实例:

主布局文件:

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

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/state_list_drawable"
        android:text="点我"
        android:textColor="@android:color/holo_red_dark" />
</LinearLayout>

state_list_drawable.xml 文件:

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

    <item android:drawable="@mipmap/images1" android:state_pressed="true" />
    <item android:drawable="@mipmap/images2" android:state_focused="true" />
    <item android:drawable="@mipmap/images3" android:state_hovered="true" />
</selector>

效果图:




五、Level List

文件位置:res/drawable/filename。

映射类型:LevelListDrawable。

引用方式:1. 在java中, R.drawable.filename。 2. 在xml中, @[package:]drawable/filename。

<?xml version="1.0" encoding="utf-8"?>
<level-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/drawable_resource"
        android:maxLevel="integer"
        android:minLevel="integer" />
</level-list>
<level-list>

<item>

android:drawable

指向drawable资源。

android:maxLevel

最大level。

android:minLevel

最小level。

实例:

主布局文件:

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/level_list" />
</LinearLayout>

level_list.xml 文件:

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

    <item
        android:drawable="@mipmap/images1"
        android:maxLevel="0" />

    <item
        android:drawable="@mipmap/images2"
        android:maxLevel="1" />
</level-list>

java代码:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_level_list);

    final ImageView image = (ImageView) findViewById(R.id.imageView);
    assert image != null;
    image.setClickable(true);
    image.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            LevelListDrawable drawable = (LevelListDrawable) image.getDrawable();
            if (drawable.getLevel() == 0) {
                image.setImageLevel(1);
            } else {
                image.setImageLevel(0);
            }
        }
    });
}


六、Transition Drawable

文件位置:res/drawable/filename。

映射类型:TransitionDrawable。

引用方式:1. 在java中, R.drawable.filename。 2. 在xml中, @[package:]drawable/filename。

<?xml version="1.0" encoding="utf-8"?>
<transition
xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</transition>

实例:

主布局文件:

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

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/transition" />
</LinearLayout>

transition.xml 文件:

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

    <item android:drawable="@mipmap/images1" />
    <item android:drawable="@mipmap/images2" />
</transition>

java代码:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_transation);

    ImageButton imageButton = (ImageButton) findViewById(R.id.imageButton);
    assert imageButton != null;
     TransitionDrawable drawable = (TransitionDrawable) imageButton.getDrawable();
    drawable.startTransition(1000);  // 图片切换时间为1s
}

七、Inset Drawable

文件位置:res/drawable/filename。

映射类型:TransitionDrawable。

引用方式:1. 在java中, R.drawable.filename。 2. 在xml中, @[package:]drawable/filename。

<?xml version="1.0" encoding="utf-8"?>
<inset
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:insetTop="dimension"
    android:insetRight="dimension"
    android:insetBottom="dimension"
    android:insetLeft="dimension" />
实例:

主布局文件:

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

    <!-- 为了看得更明显, 背景设置成黑色了 #000000 -->
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#000000"
        android:src="@drawable/inset" />
</LinearLayout>

inset.xml 文件:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@mipmap/images3"
    android:insetLeft="100dp"
    android:insetTop="100dp" />

效果图:




八、Clip Drawable

文件位置:res/drawable/filename。

映射类型:TransitionDrawable。

引用方式:1. 在java中, R.drawable.filename。 2. 在xml中, @[package:]drawable/filename。

<?xml version="1.0" encoding="utf-8"?>
<clip
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:clipOrientation=["horizontal" | "vertical"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                     "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                     "center" | "fill" | "clip_vertical" | "clip_horizontal"] />
android:clipOrientation

剪切方向,horizontal:水平。 vertical:垂直。

实例:

主布局文件:

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/clip" />
</LinearLayout>

clip.xml 问价:

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="horizontal"
    android:drawable="@mipmap/images4"
    android:gravity="left" />

java代码:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_clip);

    ImageView image = (ImageView) findViewById(R.id.imageView);
    assert image != null;
    ClipDrawable drawable = (ClipDrawable) image.getDrawable();
    Log.e(TAG, "onCreate: level = " + drawable.getLevel());
    drawable.setLevel(drawable.getLevel() + 7000);
}

效果图:



九、Scale Drawable

文件位置:res/drawable/filename。

映射类型:TransitionDrawable。

引用方式:1. 在java中, R.drawable.filename。 2. 在xml中, @[package:]drawable/filename。

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:scaleGravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                          "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                          "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    android:scaleHeight="percentage"
    android:scaleWidth="percentage" />

十、Shape Drawable

文件位置:res/drawable/filename。

映射类型:TransitionDrawable。

引用方式:1. 在java中, R.drawable.filename。 2. 在xml中, @[package:]drawable/filename。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>
<corners> 角度

<gradient> 渐变

<padding> 空隙

<size> 大小

<solid> 填充颜色

<stroke> 边框。


实例:

主布局文件:

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:text="Hello, World!" />
</LinearLayout>

shape.xml 文件:

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

    <gradient
        android:angle="45"
        android:startColor="#FFFF0000"
        android:centerColor="#000000"
        android:endColor="#80FF00FF" />

    <padding
        android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />

    <corners android:radius="8dp" />
</shape>

效果图:



猜你喜欢

转载自blog.csdn.net/u011326269/article/details/51815747