android开发小技巧(2)背景按钮等布局的好朋友shape应用

现在给大家说说android中我布局文件一定会用到的一个小技巧：shape

说到这个东西，本人也是醉了，因为本人是自学的android，开始的时候按钮按下松开这种效果是整俩图片放项目里，用这种

backImgBut.setOnTouchListener(new OnTouchListener() {

@Override

public boolean onTouch(View v, MotionEvent event) {

if (event.getAction() == MotionEvent.ACTION_DOWN) {

// 更改为按下时的背景图片

((ImageButton) v).setImageDrawable(getResources()

.getDrawable(R.drawable.return_down));

} else if (event.getAction() == MotionEvent.ACTION_UP) {

// 改为抬起时的图片

((ImageButton) v).setImageDrawable(getResources()

.getDrawable(R.drawable.return_normal));

}

return false;

}

});

这种本办法弄成动画，然后到公司之后，领导说，你这样不行，太占资源了，用用shape。然后才知道还有这么好用的技术。然后就一发不可收拾，界面基本上都是用上了shape。这个东西相当于美化按钮，布局什么的，挺有用的，我这里大致写一些，大家可以去搜索一下，有很多文章介绍。废话不说了。先上一张图



这个按钮用shape写的，具体是这样的：代码

<Button

android:id="@+id/button1"

android:layout_width="200dp"

android:layout_height="50dp"

android:layout_centerInParent="true"

android:text="开始"

android:background="@drawable/shezhi_btn_selector"

android:textColor="@android:color/white"

android:textSize="20sp"

/>

shezhi_btn_selector这个文件就是大功臣，看看都有啥：代码

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

<selector

xmlns:android="http://schemas.android.com/apk/res/android">

<!-- 按下的效果 -->

<item android:state_pressed="true" >

<shape>

<!-- 渐变 -->

<gradient

android:startColor="#ff3200"

android:endColor="#ff3200"

android:angle="270" />

<!-- 描边

<stroke

android:width="1dp"

android:color="#50C0FB" />

-->

<!-- 圆角 -->

<corners

android:radius="2dp" />

<padding

android:left="0dp"

android:top="0dp"

android:right="0dp"

android:bottom="0dp" />

</shape>

</item>

<!-- 选中的效果 -->

<item android:state_focused="true" >

<shape>

<gradient

android:startColor="#ff3200"

android:endColor="#ff3200"

android:angle="270" />

<!-- 选中的效果

<stroke

android:width="1dp"

android:color="#2a8acb" />

-->

<corners

android:radius="2dp" />

<padding

android:left="0dp"

android:top="0dp"

android:right="0dp"

android:bottom="0dp" />

</shape>

</item>

<!-- 常态的效果 -->

<item>

<shape>

<gradient

android:startColor="#ff3333"

android:endColor="#ff3333"

android:angle="270" />

<!-- 描边

<stroke

android:width="1dp"

android:color="#2a8acb" />

-->

<corners

android:topRightRadius="2dp"

android:bottomLeftRadius="2dp"

android:topLeftRadius="2dp"

android:bottomRightRadius="2dp"

/>

<padding

android:left="0dp"

android:top="0dp"

android:right="0dp"

android:bottom="0dp" />

</shape>

</item>

</selector>

里面的各项我就不解释了，就说说用法。比如

1： 我把 <!-- 圆角 -->

<corners

android:radius="2dp" /> 改为 <corners

android:radius="10dp" /> 看看效果



<corners

android:topRightRadius="10dp"

android:bottomLeftRadius="10dp"

android:topLeftRadius="10dp"

android:bottomRightRadius="10dp"

/> 就等于 <corners

android:radius="2dp" /> 只不过是分开了，上下左右，大家可以分别设置一下试试，每个角都可以不同。

-------------------------------------------------------------------------------------------------------传说中的分割线------------------------------------------------------------------------------------------------

颜色就不说了，在这里修改就行 <gradient

android:startColor="#ff3200"

android:endColor="#ff3200"

android:angle="270" /> 解释一下，如果android:startColor="#ff3200"//红色 android:endColor="#008000" //绿色 就是这种效果：



明白了吧，你可以把按下的startColor endColor两种颜色设置相反，就可以得到这种效果：常态


按下的时候：



比图片方便多了吧。

-------------------------------------------------------------------------------------传说中的分割线---------------------------------------------------------------------------------------------------------------------------

然后布局文件也可以用，看看布局文件：

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

<!-- 对话框顶部的背景条 -->

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape = "rectangle">

<!-- 实心 -->

<solid android:color="#8B4513" />

<!-- 圆角 -->

<corners android:topLeftRadius="10dp"

android:topRightRadius="10dp"

android:bottomRightRadius="10dp"

android:bottomLeftRadius="10dp"/>

<!-- 渐变

<gradient android:startColor="#FFFFFF"

android:endColor="#FFFFFF"

android:angle="270"/>

-->

<!-- 描边 -->

<stroke

android:width="5dp"

android:color="#8FBC8F" />

</shape>

效果：



单一的看不出什么效果来，但是可以嵌套的，比如，背景是一个颜色，列表是一个颜色，这都是可以的。例如下面的效果：



比较精细的地方也都可以使用此布局文件，写的比较乱，大家可以自己总结下，基本上改改代码就搞定了，其实用shape布局方面也不是多难，也是可以做出比较精细的布局的。