Android通過xml shape畫實線、虛線等常見幾何圖形
阿新 • • 發佈:2019-02-02
先看下效果圖,後面直接上程式碼。整體的實現感覺都不是很難,可能有些屬性不大認識,不過只要翻譯下還是可以理解的,不多說!
如上都是通過shape檔案實現的背景,右邊的是點選變化的漸變背景。xml佈局如下:
下面是各個shape檔案,<?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>
E:\Workspace_studio\Test_android\app\src\main\res\drawable\line_dash.xml
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="1dp" android:color="#f00" 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="10dp" android:color="#0f0" android:dashGap="5sp" android:dashWidth="5dp" /> </shape>
<?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>