Drawable的使用之形状绘制

2017-06-13  本文已影响57人  saofeng

利用 StateListDrawable 根据对象的状态,使用多个不同的图像来表示同一个图形,语法是我们常用到的<selector>,加上形状可绘制对象GradientDrawable

call_down_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <gradient android:angle="270" android:endColor="#be2626" android:startColor="#da4444"></gradient>
            <corners android:radius="45dp"></corners>
            <!-- <size
                 android:width="90dp"
                 android:height="90dp"></size>-->
        </shape>
     </item> 

    <item>
        <shape android:shape="oval">
            <gradient android:angle="270" android:endColor="#d42a2a" android:startColor="#f34c4c"></gradient>
            <corners android:radius="45dp"></corners>
            <!-- <size
                 android:width="90dp"
                 android:height="90dp"></size>-->
        </shape>
    </item>
</selector>

call_up_selector.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <gradient android:angle="270" android:endColor="#115e8e" android:startColor="#1886c9"></gradient>
            <corners android:radius="45dp"></corners>
        </shape>
    </item>


    <item>
        <shape android:shape="rectangle">
            <gradient android:angle="270" android:endColor="#13699e" android:startColor="#1b95e0"></gradient>
            <corners android:radius="45dp"></corners>
        </shape>
    </item>
</selector>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:weightSum="1">

    <ImageView
        android:id="@+id/myimage"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:background="@drawable/call_down_selector"
        android:scaleType="center"
        android:src="@drawable/call_down" />

    <ImageView
        android:id="@+id/myimage2"
        android:layout_width="230dp"
        android:layout_height="90dp"
        android:layout_marginLeft="20dp"
        android:background="@drawable/call_up_selector"
        android:scaleType="center"
        android:src="@drawable/call_up" />
</Line

注意 :android:scaleType="center" 可以保证src 资源不会缩放

Paste_Image.png

也可以这样使用
xx_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/pressed__button" />
    <item android:state_pressed="false" android:drawable="@drawable/normal_button" />
</selector>

pressed__button.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充的颜色,渐变色 -->
    <gradient
        android:startColor="#da4444"
        android:endColor="#be2626"
        android:angle="270" />
    <!-- 设置按钮的四个角为弧形 -->
    <!-- android:radius 弧形的半径 -->
    <corners android:radius="0dip" />
    <!-- padding:Button里面的文字与Button边界的间隔 -->
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
</shape>

也就是进一步分离,有利于复用性。使用时可根据需求和个人喜好使用不同的组合形式。

详细可参考 GradientDrawable
xml中使用可参考 Drawable Resources.

上一篇下一篇

猜你喜欢

热点阅读