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

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

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

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

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

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

（1）rectangle：矩形。默认值

（2）oval：椭圆。此时corners节点会失效

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

（4）ring：圆环

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 指定了形状内部的填充颜色 -->
    <solid android:color="#ffdd66" />
    <!-- 指定了形状轮廓的粗细与颜色 -->
    <stroke
        android:width="1dp"
        android:color="#aaaaaa" />
    <!-- 指定了形状四个圆角的半径 -->
    <corners android:radius="10dp" />
</shape>

首页布局：

<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:id="@+id/btn_next"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="点击跳转下一个activity页面"
        android:textColor="@color/black"
        android:textSize="17sp" />

</LinearLayout>

首页代码：

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));  //创建一个目标确定的意图

        }
    }
}

第二个布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:id="@+id/v_content"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/teal_200"
        android:layout_margin="10dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_rect"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="圆角矩形背景"
            android:textColor="@color/black"
            android:textSize="17sp" />

        <Button
            android:id="@+id/btn_oval"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="椭圆背景"
            android:textColor="@color/black"
            android:textSize="17sp" />

    </LinearLayout>

</LinearLayout>

第二个代码：

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的背景设置为椭圆形状
        }
    }

}

shape_oval_rose.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <!-- 指定了形状内部的填充颜色 -->
    <solid android:color="#F3F2EC" />

    <!-- 指定了形状轮廓的粗细与颜色 -->
    <stroke
        android:width="1dp"
        android:color="#F10606" />

</shape>

shape_rect_gold.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 指定了形状内部的填充颜色 -->
    <solid android:color="#ffdd66" />

    <!-- 指定了形状轮廓的粗细与颜色 -->
    <stroke
        android:width="1dp"
        android:color="#E61111" />

    <!-- 指定了形状四个圆角的半径 -->
    <corners android:radius="10dp" />

</shape>

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

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

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

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

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

Button按钮的背景在正常情况下是凸起的，在按下时是凹陷的，从按下到弹起的过程，用户便能知道点击了这个按钮。

在项目中创建状态图形的XML文件，则需右击drawable目录，

然后在右键菜单中依次选择New→Drawable resource file，即可自动生成一个空的XML文件。

下面是一个状态列表图形的drawable文件：

<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>

布局：

<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="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="5dp"
        android:text="默认样式的按钮"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="5dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:background="@drawable/btn_nine_selector"
        android:text="定制样式的按钮"
        android:textColor="@color/black"
        android:textSize="17sp" />

</LinearLayout>

btn_nine_selector.xml

<?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>

代码：

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class DrawableStateActivity extends AppCompatActivity
{

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


    }
}

posted @ 2022-08-06 15:01 小白龙白龙马阅读(229) 评论(0) 收藏举报

刷新页面返回顶部