Android通過xml shape畫實線、虛線等常見幾何圖形

先看下效果圖,後面直接上代碼。整體的實現感覺都不是很難,可能有些屬性不大認識,不過只要翻譯下還是可以理解的,不多說!


如上都是通過shape文件實現的背景,右邊的是點擊變化的漸變背景。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:orientation="vertical"
    android:padding="14dp">
    <!--如果是虛線 在4.0上機器要設置android:layerType="software"-->
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/line_dash"
        android:layerType="software"
        android:tag="虛線" />
    <!--如果是虛線 在4.0上機器要設置android:layerType="software"-->
    <View
        android:layout_width="match_parent"
        android:layout_height="11dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/line_dash2"
        android:layerType="software"
        android:tag="虛線" />

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:tag="實線"
        android:layout_marginTop="10dp"
        android:background="@drawable/line_solid" />

    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:tag="正方"
        android:layout_marginTop="10dp"
        android:background="@drawable/rect_dash" />

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

        <View
            android:layout_width="100dp"
            android:tag="圓形"
            android:layout_height="100dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/oval_dash" />

        <View
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:tag="圓環"
            android:layout_marginTop="10dp"
            android:background="@drawable/line_ring" />

        <View
            android:layout_width="100dp"
            android:tag="徑向漸變"
            android:layout_height="100dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/rect_radial" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/rect_gradient" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/rect_inset"
        android:clickable="true"
        android:tag="按下變換"
        android:focusable="true" />
</LinearLayout>
下面是各個shape文件,

E:\Workspace_studio\Test_android\app\src\main\res\drawable\line_dash.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!--android:width虛線的高度-->
    <!--android:width的值必須要小於用它做背景的View的height-->
    <stroke
        android:width="1dp"
        android:color="#f00"
        android:dashGap="5sp"
        android:dashWidth="5dp" />
</shape>
E:\Workspace_studio\Test_android\app\src\main\res\drawable\line_dash2.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!--android:width虛線的高度-->
    <!--android:width的值必須要小於用它做背景的View的height-->
    <stroke
        android:width="10dp"
        android:color="#0f0"
        android:dashGap="5sp"
        android:dashWidth="5dp" />
</shape>
E:\Workspace_studio\Test_android\app\src\main\res\drawable\line_solid.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!--android:width虛線的高度-->
    <!--android:width的值必須要小於用它做背景的View的height-->
    <stroke
        android:width="1dp"
        android:color="#00f"
        android:dashGap="0sp"
        android:dashWidth="5dp" />
</shape>
E:\Workspace_studio\Test_android\app\src\main\res\drawable\rect_dash.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--android:width虛線的高度-->
    <!--android:width的值必須要小於用它做背景的View的height-->
    <stroke
        android:width="2dp"
        android:color="#49da2b"
        android:dashGap="8sp"
        android:dashWidth="8dp" />
    <corners android:radius="10dp"/>
</shape>
E:\Workspace_studio\Test_android\app\src\main\res\drawable\oval_dash.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!--android:width虛線的高度-->
    <!--android:width的值必須要小於用它做背景的View的height-->
    <stroke
        android:width="8dp"
        android:color="#49da2b"
        android:dashGap="8sp"
        android:dashWidth="8dp" />
</shape>
E:\Workspace_studio\Test_android\app\src\main\res\drawable\line_ring.xml

<?xml version="1.0" encoding="utf-8"?><!--android:useLevel該值設爲false,否則會看不到圓環畫面-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="2.8"
    android:shape="ring"
    android:thicknessRatio="8"
    android:useLevel="false">
    <gradient
        android:endColor="#154d91"
        android:startColor="#f3f7f3"
        android:type="sweep" />
</shape>

E:\Workspace_studio\Test_android\app\src\main\res\drawable\rect_radial.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="false">
    <gradient
        android:endColor="#f7041c"
        android:gradientRadius="60dp"
        android:startColor="#f7f6f6"
        android:type="radial" />
</shape>

E:\Workspace_studio\Test_android\app\src\main\res\drawable\rect_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp" />
    <gradient
        android:angle="270"
        android:endColor="#154d91"
        android:startColor="#a2e6a2" />
</shape>

E:\Workspace_studio\Test_android\app\src\main\res\drawable\rect_inset.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="1.0px"
    android:insetRight="1.0px">
    <selector>
        <item android:state_pressed="true">
            <shape android:shape="rectangle">
                <gradient
                    android:angle="270"
                    android:endColor="#03336c"
                    android:startColor="#6ac76a" />
                <corners android:radius="10dp" />
                <stroke
                    android:width="1dp"
                    android:color="#0f0" />
            </shape>
        </item>

        <item>
            <shape android:shape="rectangle">
                <gradient
                    android:angle="270"
                    android:endColor="#154d91"
                    android:startColor="#a2e6a2" />
                <corners android:radius="10dp" />
                <stroke
                    android:width="1dp"
                    android:color="#0f0" />

            </shape>
        </item>
    </selector>
</inset>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章