效果图:
实现起来还是比较简单的,代码中都有注释了。
直接看代码:
/** * 分段控件 * * @author MichaelYe * @since 2012-8-21 * * */ public class SegmentBar extends LinearLayout implements OnClickListener { private String[] stringArray; public SegmentBar(Context context, AttributeSet attrs) { super(context, attrs); } public SegmentBar(Context context) { super(context); } /** * determine the number of segment bar items by the string array. * * 根据传递进来的数组,决定分段的数量 * * * */ public void setValue(Context context, String[] stringArray) { this.stringArray = stringArray; if(stringArray.length <= 1) { throw new RuntimeException("the length of String array must bigger than 1"); } this.stringArray = stringArray; resolveStringArray(context); } /** * resolve the array and generate the items. * * 对数组进行解析,生成具体的每个分段 * * */ private void resolveStringArray(Context context) { int length = this.stringArray.length; for(int i = 0; i < length; i++) { Button button = new Button(context); button.setText(stringArray[i]); button.setGravity(Gravity.CENTER); button.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 1)); button.setTag(i); button.setOnClickListener(this); if(i == 0)//左边的按钮 { button.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.left_button_bg_selector)); //button.setBackgroundResource(R.drawable.left_button_bg_selector); } else if(i != 0 && i < (length-1))//右边的按钮 { button.setBackgroundResource(R.drawable.middle_button_bg_selector); } else//中间的按钮 { button.setBackgroundResource(R.drawable.right_button_bg_selector); } this.addView(button); } } private int lastIndex = 0;//记录上一次点击的索引 @Override public void onClick(View v) { int index = (Integer)v.getTag(); onSegmentBarChangedListener.onBarItemChanged(index); this.getChildAt(lastIndex).setSelected(false); this.getChildAt(index).setSelected(true); lastIndex = index; } /** * set the default bar item of selected * * 设置默认选中的SegmentBar * * */ public void setDefaultBarItem(int index) { if(index > stringArray.length) { throw new RuntimeException("the value of default bar item can not bigger than string array's length"); } lastIndex = index; this.getChildAt(index).setSelected(true); } /** * set the text size of every item * * 设置文字的大小 * * */ public void setTextSize(float sizeValue) { int index = this.getChildCount(); for(int i = 0; i < index; i++) { ((Button)this.getChildAt(i)).setTextSize(sizeValue); } } /** * set the text color of every item * * 设置文字的颜色 * * */ public void setTextColor(int color) { int index = this.getChildCount(); for(int i = 0; i < index; i++) { ((Button)this.getChildAt(i)).setTextColor(color); } } private OnSegmentBarChangedListener onSegmentBarChangedListener; /** * define a interface used for listen the change event of Segment bar * * 定义一个接口,用来实现分段控件Item的监听 * * */ public interface OnSegmentBarChangedListener { public void onBarItemChanged(int segmentItemIndex); } /** * set the segment bar item changed listener,if the bar item changed, * the method onBarItemChanged()will be called. * * 设置分段控件的监听器,当分段改变的时候,onBarItemChanged()会被调用 * * */ public void setOnSegmentBarChangedListener(OnSegmentBarChangedListener onSegmentBarChangedListener) { this.onSegmentBarChangedListener = onSegmentBarChangedListener; } }
布局文件中:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" > <com.michael.component.segmentbar.SegmentBar android:id="@+id/segment_bar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" /> <TextView android:id="@+id/text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="@string/hello_world" android:textSize="30sp" tools:context=".MainActivity" /> </RelativeLayout>
如何在Activity中使用:
/** * This class shows how to use SegmentBar component. * You can set the number of bar items,text size,text color,and specify the default selected bar. * * 这个类展示的是如何使用分段控件。 * 你可以设置分段控件中子按钮的数量,文字的大小和颜色,并制定默认选中的子按钮 * * @author MichaelYe * @since 2012-8-21 * */ public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final TextView textView = (TextView)findViewById(R.id.text_view); SegmentBar segmentBar = (SegmentBar)findViewById(R.id.segment_bar); segmentBar.setValue(MainActivity.this, new String[]{"Item0", "Item1", "Item2", "Item3"}); segmentBar.setTextSize(13); segmentBar.setTextColor(this.getResources().getColor(R.color.deep_gray)); segmentBar.setDefaultBarItem(0); segmentBar.setOnSegmentBarChangedListener(new OnSegmentBarChangedListener() { @Override public void onBarItemChanged(int segmentItemIndex) { textView.setText(segmentItemIndex+""); } }); } }
项目地址:https://github.com/michaelye/DemoSegmentBar
这里需要解释一下:我的分段控件的按钮是使用shapeDrawable来做的,我的手机是4.1系统的,由于在3.0之前shapeDrawable存在一个bug,就是<corners/>中的两个属性
android:bottomLeftRadius
android:bottomRightRadius
是相反的!这个bug在3.0之后被修复了。因此你的手机或模拟器如果系统版本大于3.0,那么应该可以正常显示。那么如何克服这个问题呢?
解决方法可以参考:
http://code.google.com/p/android/issues/detail?id=9161
但是我觉得这样做不是很好。太麻烦了。有兴趣的同学可以自己研究下。我的建议是:
使用photoshop来做图,圆角矩形是很容易制作好的。然后将这个圆角矩形3等分,分为左,中,右3张图片,然后使用sdk tools中的9.png制作工具,让图片可以自由拉伸,用这些制作好的图片替换我在项目中使用的图片,这样就可以很好滴实现想要的效果了!
如果发现问题欢迎指正。