Android Studio App开发入门之图形定制Drawable的讲解及实战（附源码超详细必看）

梦里梦外; 2023-09-30 16:29 13阅读 0赞

> **运行有问题或需要源码数据集请点赞关注收藏后评论区留言~~~**

## 图形Drawable ##

Android把所有能够显示的图形都抽象为Drawable类，这里的图形不止是图片，还包括色块，画板，背景等等。包含图片在内的图形文件放在res的目录的各个drawable目录下，其实drawable目录一般保存描述性的XML文件，而图片文件一般放在具体分辨率的drawable目录下

### 形状图形 ###

Shape图形又称形状图形，它用来描述常见的几何形状，用好形状图形可以让App页面不再呆板，还可以节省美工不少工作量。

形状图形的定义文件放在drawable目录下，它是以shape标签为为根节点的XML描述文件，根节点下定义了6个节点 分别是以下六个

> size 尺寸 stroke 描边 corners 圆角 solid 填充 padding 间隔 gradient 渐变

![77419182a8df4c799455fcc703781589.jpeg][]

接下来演示一下形状图形的界面效果，首先右击drawable目录，并依次选择右键菜单的New -drawable resouruce file 然后ok即可生成一个XML文件 效果如下

![2919e31ebfbc415bb84c1ee0a5d0d9d8.png][]

![95a28abada0d4d95bd6b3e2fe57295c2.png][]

### DrawableShape类代码如下 ###

package com.example.chapter05;
    
    import android.os.Bundle;
    import android.view.View;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    public class DrawableShapeActivity extends AppCompatActivity implements View.OnClickListener {
        private View v_content; // 声明一个视图对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_drawable_shape);
            // 从布局文件中获取名叫v_content的视图
            v_content = findViewById(R.id.v_content);
            // v_content的背景设置为圆角矩形
            v_content.setBackgroundResource(R.drawable.shape_rect_gold);
            // 给btn_rect设置点击监听器
            findViewById(R.id.btn_rect).setOnClickListener(this);
            // 给btn_oval设置点击监听器
            findViewById(R.id.btn_oval).setOnClickListener(this);
        }
    
        @Override
        public void onClick(View v) {
            if (v.getId() == R.id.btn_rect) { // 点击了“圆角矩形背景”按钮
                // v_content的背景设置为圆角矩形
                v_content.setBackgroundResource(R.drawable.shape_rect_gold);
            } else if (v.getId() == R.id.btn_oval) { // 点击了“椭圆背景”按钮
                // v_content的背景设置为椭圆形状
                v_content.setBackgroundResource(R.drawable.shape_oval_rose);
            }
        }
    
    }

### 圆角矩形的shape\_rect\_goldXML文件代码如下 ###

### 椭圆形的shape\_oval\_roseXML文件代码如下 ###

## 九宫格图片 ##

将某张图片设置成视图背景时，如果图片尺寸太小，则系统会自动拉伸图片使之填满背景，可是一旦图片拉的过大，画面就会容易变得模糊，为了解决这个问题，Android专门设计了点九图片，扩展名为png，又带有.9的名字，因为该图片划分了3×3的九宫格区域 效果如下

![61abb4c430664edf9dd6cd7020df8132.png][]

## 状态列表图形 ##

常见的图形一般为静态图形，但有时会用到动态图形，比如按钮控件的背景在正常情况下时凸起的，在按下时时凹陷的，从按下到弹起的过程，用户便知道了点击了该按钮，根据不同的触摸情况变更图形状态，这种情况用到了Drawable的一个子类StateListDrawable，它在XML文件中规定了不同状态时候所呈现的图形列表 效果如下

可见按下了定制样式的按钮后颜色就变了 区分出不同

![b3e848a1b0f8428ebebf80869d1df59a.png][]

### DrawableState类代码如下 ###

package com.example.chapter05;
    
    import android.os.Bundle;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    public class DrawableStateActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_drawable_state);
        }
    }

### btn\_nine\_selectorXML文件代码如下 ###

<?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/button_pressed" />
        <item android:drawable="@drawable/button_normal" />
    </selector>

### btn\_orig\_selectorXML文件代码如下 ###

### activity\_drawable\_stateXML文件代码如下 ###

**创作不易 觉得有帮助请点赞关注收藏~~~**

[77419182a8df4c799455fcc703781589.jpeg]: https://img-blog.csdnimg.cn/77419182a8df4c799455fcc703781589.jpeg
[2919e31ebfbc415bb84c1ee0a5d0d9d8.png]: https://img-blog.csdnimg.cn/2919e31ebfbc415bb84c1ee0a5d0d9d8.png
[95a28abada0d4d95bd6b3e2fe57295c2.png]: https://img-blog.csdnimg.cn/95a28abada0d4d95bd6b3e2fe57295c2.png
[61abb4c430664edf9dd6cd7020df8132.png]: https://img-blog.csdnimg.cn/61abb4c430664edf9dd6cd7020df8132.png
[b3e848a1b0f8428ebebf80869d1df59a.png]: https://img-blog.csdnimg.cn/b3e848a1b0f8428ebebf80869d1df59a.png