Android自定义图形图像,可实现圆角背景

来源:互联网 发布:如何进入淘宝试用中心 编辑:程序博客网 时间:2024/03/28 21:27

简介

手机应用程序开发,用户体验是极其重要的,他的重要性甚至要高于手机应用软件的功能。很多情况下使用圆角矩形作为视图的背景,能给用户带来极佳的视觉体验,Android中圆角矩形可以通过shape标记来实现。

原理

Android中的所有资源图像都放在res/drawable目录下,然后以R.drawable.xxx形式引用。图形定义也类似,需要在drawable目录下创建自定义xml文件,根元素为shape,shape元素内定义solid、stroke、corners、padding等子元素并为其设置属性值。定义完成之后就可以像使用图像资源一样来使用它了了。shape图形被Android解析后类型为GradientDrawable对象。

示例

1  圆角矩形、灰色边框图形定义

文件:res/drawable/shape_rounded_rectangle_grayborder.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Android中图形图像资源定义,既然要当做一个图像来定义,那么它应该放在drawable目录下,并且以其文件基本名作为其引用 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 图形填充颜色 -->
    <solid android:color="#ffffffff" />
    <!-- 边界线宽度及颜色 -->
    <stroke
        android:width="1dp"
        android:color="#ffbbbbbb" />
    <!-- 圆角大小,以圆的半径表示 -->
    <corners android:radius="8dp" />
    <!-- 图形内部边距 -->
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />

</shape>

2 圆角矩形,浅灰色背景,灰色边框

文件:res/drawable/shape_rounded_rectangle.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Android中图形图像资源定义,既然要当做一个图像来定义,那么它应该放在drawable目录下,并且以其文件基本名作为其引用 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 图形填充颜色 -->
    <solid android:color="#ffeeeeee" />
    <!-- 边界线宽度及颜色 -->
    <stroke
        android:width="1dp"
        android:color="#ffbbbbbb" />
    <!-- 圆角大小,以圆的半径表示 -->
    <corners android:radius="8dp" />
    <!-- 图形内部边距 -->
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
</shape>

3 矩形,灰色填充

文件:res/drawable/shape_rectangle_light_gray.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 矩形框,浅灰色填充色 -->
    <solid android:color="#ffeeeeee"/>
<stroke android:width="0dp" android:color="#ffeeeeee"/>
<corners android:radius="0dp"/>
</shape>

Activity Layout定义

文件:res/layout/activity_shape_home.xml

<?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:background="@android:color/white"
    android:gravity="center_horizontal"
    android:orientation="vertical" >
    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@drawable/shape_rounded_rectangle"
        android:gravity="center" >
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="圆角矩形背景(浅灰色,灰色边框)" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@drawable/shape_rectangle_light_gray"
        android:gravity="center" >
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="矩形背景(浅灰色)" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@drawable/shape_rounded_rectangle_grayborder"
        android:gravity="center" >
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="圆角矩形背景(浅灰色边框)" />
    </LinearLayout>
</LinearLayout>

效果


0 0
原创粉丝点击