先看下效果图,后面直接上代码。整体的实现感觉都不是很难,可能有些属性不大认识,不过只要翻译下还是可以理解的,不多说!
如上都是通过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>