您的位置:首页 > 移动开发 > Android开发

android drawable下自定义的xml文件各种形式汇总

2017-08-11 12:42 489 查看
1、我们需要画一个小圆圈shape=”oval”

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">

<solid android:color="@color/colorPrimary" />
<corners android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
/>
</shape>


2、圆角textview

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<solid android:color="#fff7f3" />
<corners
android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp"
android:topLeftRadius="4dp"
android:topRightRadius="4dp" />
</shape>


3、按钮点击效果选择

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

<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="@android:integer/config_shortAnimTime" android:exitFadeDuration="@android:integer/config_mediumAnimTime">
<item android:state_pressed="true">
<shape>
<solid android:color="@color/colorPrimaryDark"/>
</shape>
</item>
<item android:state_focused="true">
<shape>
<solid android:color="@color/colorPrimaryDark"/>
</shape>
</item>
<item>
<shape>
<solid android:color="@color/colorPrimary"/>
</shape>
</item>
</selector>


4、checkbox选中、未选中,自定义的图片

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/cb_selected" android:state_checked="true"/>
<item android:drawable="@mipmap/cb_selected" android:state_selected="true"/>
<item android:drawable="@mipmap/cb_selected" android:state_pressed="true"/>
<item android:drawable="@mipmap/cb_unselected"/>
</selector>


5、指定高度,画横线、竖线

<?xml version="1.0" encoding="utf-8"?>
<shape
android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<size android:height="@dimen/divider_line_height_small"/>
<solid android:color="@color/divider"/>
</shape>

竖线:
<?xml version="1.0" encoding="utf-8"?>
<shape
android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<size android:width="@dimen/divider_line_height_small"/>
<solid android:color="@color/divider"/>
</shape>


6、SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写。在xml文件中的标签是,画出的图形可以像一般的图片资源使用

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="32.0"
android:viewportWidth="32.0">
<path
android:fillColor="#666"
android:pathData="m31.84 13.35c-0.31 0.57 -1 0.76 -1.54 0.43l-1.01 -0.61c-0.42 0.9 -0.98 1.86 -1.73 2.77l0.91 0.95c0.44 0.46 0.44 1.21 0 1.67c-0.44 0.46 -1.16 0.46 -1.6 0l-0.93 -0.97c-0.9 0.76 -2 1.43 -3.3 1.96l0.34 1.33c0.16 0.63 -0.2 1.28 -0.8 1.45c-0.6 0.17 -1.22 -0.21 -1.38 -0.84l-0.32 -1.24c-0.99 0.24 -2.08 0.41 -3.27 0.49v2.04c0 0.66 -0.5 1.2 -1.11 1.2c-0.61 0 -1.11 -0.54 -1.11 -1.2v-2.1c-1.36 -0.14 -2.56 -0.4 -3.64 -0.75l-0.38 1.52c-0.16 0.64 -0.77 1.02 -1.36 0.85c-0.59 -0.17 -0.94 -0.83 -0.78 -1.47l0.43 -1.75c-1.14 -0.59 -2.1 -1.3 -2.89 -2.06l-1.35 1.47c-0.43 0.47 -1.13 0.47 -1.57 0c-0.43 -0.47 -0.43 -1.23 0 -1.7l1.41 -1.52c-0.65 -0.92 -1.13 -1.85 -1.48 -2.72l-1.72 1.08c-0.53 0.33 -1.21 0.13 -1.51 -0.44c-0.31 -0.57 -0.12 -1.31 0.41 -1.64l1.92 -1.2c0.06 -0.04 0.13 -0.07 0.2 -0.1c-0.1 -0.45 -0.16 -0.81 -0.19 -1.07h-0.04c0 -0.07 0.01 -0.13 0.02 -0.2c-0.01 -0.13 -0.02 -0.2 -0.02 -0.2h0.07c0.15 -0.46 0.56 -0.8 1.04 -0.8c0.48 0 0.89 0.34 1.04 0.8h0.07c2.22 9.69 11.82 9.6 11.82 9.6c0 0 9.6 -0 11.82 -9.59h0.06c0.15 -0.47 0.56 -0.81 1.04 -0.81c0.49 0 0.89 0.34 1.04 0.81h0.07c0 0 -0.01 0.07 -0.02 0.2c0.01 0.06 0.02 0.13 0.02 0.19h-0.04c-0.05 0.37 -0.15 0.98 -0.36 1.74l1.32 0.8c0.54 0.33 0.73 1.05 0.41 1.62z"/>
</vector>

是不是很羡慕这些酷酷的图形,当然自己也可以去动手去做。显而易见,上面例子的重点是在PathData里面的那一大窜数字:

android:pathData="M22,16V4c0,-1.1 -0.9,-2 -2,-2H8c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.1 0.9,2 2,2h14v-2H4V6H2z" />
 http://www.cnblogs.com/yuhanghzsd/p/5466846.html[/code] 
7、rating bar自定义图片,空白-半星-全星

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item
android:id="@android:id/background"
android:drawable="@mipmap/ic_empty_star" />

<item
android:id="@android:id/secondaryProgress"
android:drawable="@mipmap/ic_half_star" />

<item
android:id="@android:id/progress"
android:drawable="@mipmap/ic_star" />

</layer-list>


8、xml里面引用其他的xml

1、
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/laevatein_button_background_count_pressed" android:state_pressed="true"/>
<item android:drawable="@drawable/laevatein_button_background_count_disable" android:state_enabled="false"/>
<item android:drawable="@drawable/laevatein_button_background_count_normal"/>
</selector>

引用1:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="6dp"/>
<solid android:color="@color/colorPrimaryDark"/>
</shape>
</item>
</layer-list>

引用2:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="6dp"/>
<solid android:color="#bbbbbb"/>
</shape>
</item>
</layer-list>

引用3:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="6dp"/>
<solid android:color="@color/colorPrimary"/>
</shape>
</item>
</layer-list>


9、button点击效果全面

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_enabled="true" android:state_focused="true" android:state_pressed="false">

<shape>
<solid android:color="#e0b419" />
<corners android:radius="12dp"/>
</shape>

</item>

<item android:state_enabled="true" android:state_pressed="true">

<shape>
<solid android:color="#e0b419" />
<corners android:radius="12dp"/>
</shape>
</item>

<item android:state_checked="true" android:state_enabled="true">
<shape>
<solid android:color="#e0b419" />
<corners android:radius="12dp"/>
</shape>
</item>

<item android:state_enabled="false">
<shape>
<solid android:color="#bbbbbb" />
<corners android:radius="12dp"/>
</shape>
</item>

<item>
<shape>
<solid android:color="#e0b419" />
<corners android:radius="12dp"/>
</shape>
</item>
</selector>


10、颜色渐变,从某个角度开始,默认左边-右边

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<gradient
android:startColor="@color/white"
android:endColor="@color/line_shadow"
android:angle="270"
/>
</shape>

android:angle
Integer,代表渐变颜色的角度, 0 is left to right, 90 is bottom to top. 必须是45的整数倍. http://blog.csdn.net/zjdyhant/article/details/46537647[/code] 
11、画圆 半径5dp

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<solid android:color="@color/red" />
<size
android:width="10dp"
android:height="10dp" />
</shape>


12、声音大小动画

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@mipmap/progress_voice_01"
android:duration="500" />
<item
android:drawable="@mipmap/progress_voice_02"
android:duration="500" />
<item
android:drawable="@mipmap/progress_voice_03"
android:duration="500" />
</animation-list>


13、radio button

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/radio_bt_selected" android:state_checked="true" />
<item android:drawable="@mipmap/radio_bt_selected" android:state_selected="true" />
<item android:drawable="@mipmap/radio_bt_selected" android:state_pressed="true" />
<item android:drawable="@mipmap/radio_bt_unselected" />
</selector>


14、渐变色 左边—右边

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<gradient
android:angle="0"
android:endColor="?attr/colorPrimary"
android:startColor="?attr/colorAccent"/>
</shape>


15、item点击变色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/grey_light" android:state_pressed="true" />
<item android:drawable="@color/grey_light" android:state_selected="true" />
<item android:drawable="@android:color/transparent" />

</selector>


16、progressbar 进度条 和背景

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- 背景  gradient是渐变,corners定义的是圆角 -->
<item android:id="@android:id/background">
<shape>
<solid android:color="#00000000" />
</shape>
</item>

<!-- 进度条 -->
<item android:id="@android:id/progress">
<clip>
<shape>
<gradient
android:angle="0"
android:endColor="?attr/colorPrimary"
android:startColor="?attr/colorAccent"/>
</shape>
</clip>
</item>

</layer-list>
使用:
<ProgressBar
android:id="@+id/progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="4dp"
tools:progress="20"
android:progressDrawable="@drawable/web_progressbar"
/>


17、button选中效果全面

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_enabled="true" android:state_focused="true" android:state_pressed="false">

<shape>
<gradient android:angle="0" android:endColor="?attr/colorPrimary" android:startColor="?attr/colorAccent" />
<corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
</shape>

</item>

<item android:state_enabled="true" android:state_pressed="true">

<shape>
<gradient android:angle="0" android:endColor="@color/colorPrimaryPressed" android:startColor="@color/colorAccentPressed" />
<corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
</shape>
</item>

<item android:state_checked="true" android:state_enabled="true">
<shape>
<gradient android:angle="0" android:endColor="@color/colorPrimaryPressed" android:startColor="@color/colorAccentPressed" />
<corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
</shape>
</item>

<item android:state_enabled="false">
<shape>
<gradient android:angle="0" android:endColor="@color/colorPrimaryDisabled" android:startColor="@color/colorAccentDisabled" />
<corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
</shape>
</item>

<item>
<shape>
<gradient android:angle="0" android:endColor="?attr/colorPrimary" android:startColor="?attr/colorAccent" />
<corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
</shape>
</item>
</selector>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  布局 xml