android中如何实现button 不同状态显示切换背景图

关于button的不同状态，常规来说，是制作一个不同stat采用不同背景的 drawable xml。

这是我的一个例子。

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

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

    <item android:state_selected="true" android:state_focused="true" android:drawable="@drawable/guidefocusselected" />

    <item android:state_focused="true" android:state_selected="false" android:drawable="@drawable/guidefocused"></item>

    <item android:state_focused="false" android:state_selected="true" android:drawable="@drawable/guideselected"></item>
<item android:drawable="@drawable/anniu"/>

</selector>

制作的时候，你会发现，button其实默认实现的selected状态，基本是focused，pressed等状态。而且button没有属性设置 can_selected。

但是button却有个函数setSelected，设置了以后，就可以控制state-selected状态了。

同时你会发现，state的组合，以及state的顺序，都会影响button背景的切换效果。

具体的代码

public class GuideFragment extends Fragment implements OnClickListener {
private GuideItemSelected mGuideItemSelected;
Button btn_category;
Button btn_sales;
Button btn_shopping;
Button btn_myinfo;
Button btn_home;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// TODO Auto-generated method stub
View view = inflater.inflate(R.layout.frame_left, container, false);
btn_category = (Button) view.findViewById(R.id.btn_category);
btn_sales = (Button) view.findViewById(R.id.btn_sales);
btn_shopping = (Button) view.findViewById(R.id.btn_shopping);
btn_myinfo = (Button) view.findViewById(R.id.btn_myinfo);
btn_home = (Button) view.findViewById(R.id.btn_home);

btn_category.setOnClickListener(this);
btn_sales.setOnClickListener(this);
btn_shopping.setOnClickListener(this);
btn_myinfo.setOnClickListener(this);
btn_home.setOnClickListener(this);

return view;
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onActivityCreated(savedInstanceState);
//初始化绑定时间
mGuideItemSelected = (GuideItemSelected) getActivity();
onClick(btn_home);
}

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
SetSelected(v);
mGuideItemSelected.onItemSelected(v.getId());
}

public void SetSelected(View v) {
switch (v.getId()) {
case R.id.btn_category:
case R.id.btn_sales:
case R.id.btn_shopping:
case R.id.btn_myinfo:
case R.id.btn_home:
// clear state
btn_category.setSelected(false);
btn_sales.setSelected(false);
btn_shopping.setSelected(false);
btn_myinfo.setSelected(false);
btn_home.setSelected(false);
// change state
((Button) v).setSelected(true);
break;
default:
break;
}
}

}

最后，说一下实现中的一个小插曲，设计时，希望button在focused时，背景图会放大，实现一个类似动画的效果。因为button的背景图，都使用的9-patch格式的图片，要实现自动放大，通过代码其实也有点麻烦。

1.一开始想法是，focused的背景图比正常的背景图，大一点，但是中间的内容区域一样大，这样，等切换背景图的时候会自动放大。但真实效果不是这样的，等button的大小初始化确定后，focused的时候，那个大一点背景图，反而自动缩小了，以适应button的大小。还出现了，另一个问题，就是，初始化时，默认获取焦点的那个button，因为使用的是焦点背景图，所以这个button会大一点，即使焦点切换到其他button，他也不会变小了。

所以，最后的实现是：将所以状态图，设计为一样大，只是非焦点模式的图片的外面设计成透明的，这样，所有的图片一样大，只是非焦点模式的图片边透明，视觉效果小，也就达到了，获取焦点后，图片放大的效果了。

不知道算不算小技巧