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