类似iPhone的分段控件SegmentBar

效果图：

 

实现起来还是比较简单的，代码中都有注释了。

直接看代码：

/**
 * 分段控件
 * 
 * @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://stackoverflow.com/questions/6003382/how-can-i-work-around-android-issue-9161-where-bottomrightradius-and-bottomleft

http://code.google.com/p/android/issues/detail?id=9161

但是我觉得这样做不是很好。太麻烦了。有兴趣的同学可以自己研究下。我的建议是：

使用photoshop来做图，圆角矩形是很容易制作好的。然后将这个圆角矩形3等分，分为左，中，右3张图片，然后使用sdk tools中的9.png制作工具，让图片可以自由拉伸，用这些制作好的图片替换我在项目中使用的图片，这样就可以很好滴实现想要的效果了！

 

 

如果发现问题欢迎指正。