基础复习——图形定制——图形Drawable——形状图形——九宫格图片——状态列表图形...

Myth丶恋晨 2023-09-28 18:53 76阅读 0赞

Drawable类型表达了各种各样的图形，包括图片、色块、画板、背景等。

包含图片在内的图形文件放在res目录的各个drawable目录下，其中drawable目录一般保存描述性的XML文件，而图片文件一般放在具体分辨率的drawable目录下。

各视图的background属性、ImageView和ImageButton的src属性、TextView和Button四个方向的drawable\*\*\*系列属性都可以引用图形文件。

![172ed997101727a574aaf7db23470e9e.png][]

![3c38a793e801c05e0ec7575f2c03c6c4.png][]

Shape图形又称形状图形，它用来描述常见的几何形状，包括矩形、圆角矩形、圆形、椭圆等等。

形状图形的定义文件是以shape标签为根节点的XML描述文件，它支持四种类型的形状：

(1)rectangle：矩形。默认值

(2)oval：椭圆。此时corners节点会失效

(3)line：直线。此时必须设置stroke节点，不然会报错

(4)ring：圆环

![2cfc021191b1c7985b2cb10ad6fb0938.png][]

![b0ac1515db32ae403c8ff108b978cb67.png][]

![1b6dbe939634a8e868a425a90d045f68.png][]

![5afc9fa2a246305a12ce23f711dfde23.png][]

![8c3310adebf04d0fd2a38b6e2ee605e3.png][]

![4643504ccefa5438d6c13b86e9e71cb8.png][]

![64a336107dcdf6b5040a5e7aa7471b04.png][]

![a2040015c2ec8c8b139e8cc315794dab.png][]

![869b59f00d1440a7cc8b2634161a80b9.png][]

![c230718c5266efc21964a50197d1f9b5.png][]

![d7108cffb7acfd5d2e068db3af6f9606.png][]

首页布局：

![c8fe5132d7e3d600b7109d9ee5d71d38.png][]

首页代码：

package com.example.myapplication;
    
    import android.content.Intent;
    import android.os.Bundle;
    import android.view.View;
    import androidx.appcompat.app.AppCompatActivity;
    
    public class MainActivity extends AppCompatActivity implements View.OnClickListener
    {
    
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            findViewById(R.id.btn_next).setOnClickListener(this);
        }
    
        @Override
        public void onClick(View v)
        {
            if (v.getId() == R.id.btn_next)
            {
                startActivity(new Intent(this, DrawableShapeActivity.class));  //创建一个目标确定的意图
    
            }
        }
    }

![45933c951ad9fd741acae1cee843ca37.png][]

第二个布局：

![cd420c0915cf4101bedb4b92891add02.png][]

第二个代码：

package com.example.myapplication;
    
    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.setBackgroundResource(R.drawable.shape_rect_gold);   // v_content的背景设置为圆角矩形
            }
            else if (v.getId() == R.id.btn_oval)          // 点击了“椭圆背景”按钮
            {
    
                v_content.setBackgroundResource(R.drawable.shape_oval_rose);         // v_content的背景设置为椭圆形状
            }
        }
    
    }

![19cf03cb83766607be2ad0c6d8338806.png][]

![8b3775ba85c9a8d6a15b1da4b096fbfa.png][]

shape\_oval\_rose.xml

![f716124575321abff9889fcbda93f69a.png][]

shape\_rect\_gold.xml

![b765907884e2e8336af238c068e62f59.png][]

![d9571cdf8ba829e41798c0d568bbca6a.png][]

![8d75ee9217cb7f734071f361ca47a3f9.png][]

![ec48271b34eba606a907c5560f995599.png][]

=================================================================================================================

![0fd307af96659b3007b4866db599c824.png][]

![5ec58c36b0c7cec1dc1e327f4fe1a062.png][]

![fd44c1a6e69f6a8d6eb27471f4978bba.png][]

点九图片的扩展名是png，文件名后面常带有“.9”字样。因为该图片划分了3×3的九宫格区域，所以得名点九图片，也叫九宫格图片。

在拉伸点九图片时，只拉伸内部区域，不拉伸边缘线条。

在Android Studio中右击某张图片，并在右键菜单中选择“Create 9-Patch files”，接着单击OK按钮即可自动生成点九图片。

![3329380e2f14f0d6b2cdcc41708f93e4.png][]

![b4ca624b041353f31fb6ce894aae26c4.png][]

![ee7b841805b0e1fb8f98d4d711322e1a.png][]

![1684042a73799eb7165a1c3573972ce8.png][]

![b3960b6a30daa0e9dc227c16daea4050.png][]

![4f0344106a90edec005324e05edb5403.png][]

123

[172ed997101727a574aaf7db23470e9e.png]: https://img-blog.csdnimg.cn/img_convert/172ed997101727a574aaf7db23470e9e.png
[3c38a793e801c05e0ec7575f2c03c6c4.png]: https://img-blog.csdnimg.cn/img_convert/3c38a793e801c05e0ec7575f2c03c6c4.png
[2cfc021191b1c7985b2cb10ad6fb0938.png]: https://img-blog.csdnimg.cn/img_convert/2cfc021191b1c7985b2cb10ad6fb0938.png
[b0ac1515db32ae403c8ff108b978cb67.png]: https://img-blog.csdnimg.cn/img_convert/b0ac1515db32ae403c8ff108b978cb67.png
[1b6dbe939634a8e868a425a90d045f68.png]: https://img-blog.csdnimg.cn/img_convert/1b6dbe939634a8e868a425a90d045f68.png
[5afc9fa2a246305a12ce23f711dfde23.png]: https://img-blog.csdnimg.cn/img_convert/5afc9fa2a246305a12ce23f711dfde23.png
[8c3310adebf04d0fd2a38b6e2ee605e3.png]: https://img-blog.csdnimg.cn/img_convert/8c3310adebf04d0fd2a38b6e2ee605e3.png
[4643504ccefa5438d6c13b86e9e71cb8.png]: https://img-blog.csdnimg.cn/img_convert/4643504ccefa5438d6c13b86e9e71cb8.png
[64a336107dcdf6b5040a5e7aa7471b04.png]: https://img-blog.csdnimg.cn/img_convert/64a336107dcdf6b5040a5e7aa7471b04.png
[a2040015c2ec8c8b139e8cc315794dab.png]: https://img-blog.csdnimg.cn/img_convert/a2040015c2ec8c8b139e8cc315794dab.png
[869b59f00d1440a7cc8b2634161a80b9.png]: https://img-blog.csdnimg.cn/img_convert/869b59f00d1440a7cc8b2634161a80b9.png
[c230718c5266efc21964a50197d1f9b5.png]: https://img-blog.csdnimg.cn/img_convert/c230718c5266efc21964a50197d1f9b5.png
[d7108cffb7acfd5d2e068db3af6f9606.png]: https://img-blog.csdnimg.cn/img_convert/d7108cffb7acfd5d2e068db3af6f9606.png
[c8fe5132d7e3d600b7109d9ee5d71d38.png]: https://img-blog.csdnimg.cn/img_convert/c8fe5132d7e3d600b7109d9ee5d71d38.png
[45933c951ad9fd741acae1cee843ca37.png]: https://img-blog.csdnimg.cn/img_convert/45933c951ad9fd741acae1cee843ca37.png
[cd420c0915cf4101bedb4b92891add02.png]: https://img-blog.csdnimg.cn/img_convert/cd420c0915cf4101bedb4b92891add02.png
[19cf03cb83766607be2ad0c6d8338806.png]: https://img-blog.csdnimg.cn/img_convert/19cf03cb83766607be2ad0c6d8338806.png
[8b3775ba85c9a8d6a15b1da4b096fbfa.png]: https://img-blog.csdnimg.cn/img_convert/8b3775ba85c9a8d6a15b1da4b096fbfa.png
[f716124575321abff9889fcbda93f69a.png]: https://img-blog.csdnimg.cn/img_convert/f716124575321abff9889fcbda93f69a.png
[b765907884e2e8336af238c068e62f59.png]: https://img-blog.csdnimg.cn/img_convert/b765907884e2e8336af238c068e62f59.png
[d9571cdf8ba829e41798c0d568bbca6a.png]: https://img-blog.csdnimg.cn/img_convert/d9571cdf8ba829e41798c0d568bbca6a.png
[8d75ee9217cb7f734071f361ca47a3f9.png]: https://img-blog.csdnimg.cn/img_convert/8d75ee9217cb7f734071f361ca47a3f9.png
[ec48271b34eba606a907c5560f995599.png]: https://img-blog.csdnimg.cn/img_convert/ec48271b34eba606a907c5560f995599.png
[0fd307af96659b3007b4866db599c824.png]: https://img-blog.csdnimg.cn/img_convert/0fd307af96659b3007b4866db599c824.png
[5ec58c36b0c7cec1dc1e327f4fe1a062.png]: https://img-blog.csdnimg.cn/img_convert/5ec58c36b0c7cec1dc1e327f4fe1a062.png
[fd44c1a6e69f6a8d6eb27471f4978bba.png]: https://img-blog.csdnimg.cn/img_convert/fd44c1a6e69f6a8d6eb27471f4978bba.png
[3329380e2f14f0d6b2cdcc41708f93e4.png]: https://img-blog.csdnimg.cn/img_convert/3329380e2f14f0d6b2cdcc41708f93e4.png
[b4ca624b041353f31fb6ce894aae26c4.png]: https://img-blog.csdnimg.cn/img_convert/b4ca624b041353f31fb6ce894aae26c4.png
[ee7b841805b0e1fb8f98d4d711322e1a.png]: https://img-blog.csdnimg.cn/img_convert/ee7b841805b0e1fb8f98d4d711322e1a.png
[1684042a73799eb7165a1c3573972ce8.png]: https://img-blog.csdnimg.cn/img_convert/1684042a73799eb7165a1c3573972ce8.png
[b3960b6a30daa0e9dc227c16daea4050.png]: https://img-blog.csdnimg.cn/img_convert/b3960b6a30daa0e9dc227c16daea4050.png
[4f0344106a90edec005324e05edb5403.png]: https://img-blog.csdnimg.cn/img_convert/4f0344106a90edec005324e05edb5403.png