RadioGroup實現類似ios的分段選擇(UISegmentedControl)控件

 在ios7中有一種扁平風格的控件叫做分段選擇控件UISegmentedControl，控件分為一排，橫放著幾個被簡單線條隔開的按鈕，每次點擊只能選擇其中一個按鈕，他類似于tabbar但是又稍微有點區別，新版的qq手機客戶端就用到了這種控件。

但是在android中并沒有現成的控件可用，不過android中有著功能類似但UI相差很大的RadioGroup控件，可以通過定義RadioGroup的外觀來達到相同的目的。其實android中也沒有TabBar，但是很多app通過修改RadioGroup來實現ios中的UITabBar效果，看來RadioGroup是還真是很實用的控件，雖然原生的真的很丑。

新手對RadioGroup的自定義可能很難下手，git上有了一個現成的封裝好了的庫以及例子，可以下載學習，如果你是用eclipse開發的項目，可能需要改改才能用，因為他提供的是android studio的項目結構。

項目地址：https://github.com/hoang8f/android-segmented-control

使用方法：

1.先將庫文件作為library倒入到eclipse，在你的項目中引用這個lib。

2.然后在需要分段控件的activity 布局文件中加入xml代碼

<info.hoang8f.android.segmented.SegmentedGroup
    android:id="@+id/segmented4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="horizontal">
    <RadioButton
        android:id="@+id/in_month"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="本月"
        style="@style/RadioButton" />
    <RadioButton
        android:id="@+id/in_year"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="今年"
        style="@style/RadioButton" />

</info.hoang8f.android.segmented.SegmentedGroup></pre> 
 

style="@style/RadioButton"可以不用管，因為庫文件中已經定義了這個style。

android:id="@+id/in_year"android:id="@+id/in_month"的id用于代碼中判斷哪個按鈕處于選中狀態。

3.在activity中使用SegmentedGroup并添加選擇事件：

 

SegmentedGroup segmented4 = (SegmentedGroup)findViewById(R.id.segmented4);
segmented4.setTintColor(0xFF1b7ce8);
segmented4.setOnCheckedChangeListener(this);
 
segmented4.setTintColor(0xFF1b7ce8);設置分段選擇按鈕的顏色。


 segmented4.setOnCheckedChangeListener(  this  );將分段選擇的事件監聽設為本activity，接下來實現監聽事件： 

@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
    switch (checkedId) {
        case R.id.in_month:
            mPager.setAdapter(mAdapter);
            mPager.setCurrentItem(MAX_COUNT/2);
            mPager.setOffscreenPageLimit(5);
            return;
        case R.id.in_year:
            mPager.setAdapter(mAdapter1);
            mPager.setCurrentItem(MAX_COUNT/2);
            mPager.setOffscreenPageLimit(5);
            return;
    }
}
 
 

如果你已經知道如何運用了不妨花點時間研究它是如何實現的，其實非常簡單，不過是重新定義了RadioGroup 子元素的背景而已，在android中darwable背景本身就帶有兩種狀態，選中和未選中。如果更改了帶有兩種狀態的Drawable也就完全更改了radiogroup的外觀。

 

private void updateBackground() {
    int count = super.getChildCount();
    LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    params.setMargins(0, 0, -oneDP, 0);
    if (count > 1) {
        super.getChildAt(0).setLayoutParams(params);
        updateBackground(getChildAt(0), R.drawable.radio_checked_left, R.drawable.radio_unchecked_left);
        for (int i = 1; i < count - 1; i++) {
            updateBackground(getChildAt(i), R.drawable.radio_checked_middle, R.drawable.radio_unchecked_middle);
            super.getChildAt(i).setLayoutParams(params);
        }
        updateBackground(getChildAt(count - 1), R.drawable.radio_checked_right, R.drawable.radio_unchecked_right);
    } else if (count == 1) {
        updateBackground(getChildAt(0), R.drawable.radio_checked_default, R.drawable.radio_unchecked_default);
    }
}
private void updateBackground(View view, int checked, int unchecked) {
    //Set text color
    ColorStateList colorStateList = new ColorStateList(new int[][]{
            {android.R.attr.state_pressed},
            {-android.R.attr.state_pressed, -android.R.attr.state_checked},
            {-android.R.attr.state_pressed, android.R.attr.state_checked}},
            new int[]{Color.GRAY, mTintColor, mCheckedTextColor});
    ((Button) view).setTextColor(colorStateList);
    //Redraw with tint color
    Drawable checkedDrawable = resources.getDrawable(checked);
    Drawable uncheckedDrawable = resources.getDrawable(unchecked);
    ((GradientDrawable) checkedDrawable).setColor(mTintColor);
    ((GradientDrawable) uncheckedDrawable).setStroke(oneDP, mTintColor);
    //Create drawable
    StateListDrawable stateListDrawable = new StateListDrawable();
    stateListDrawable.addState(new int[]{-android.R.attr.state_checked}, uncheckedDrawable);
    stateListDrawable.addState(new int[]{android.R.attr.state_checked}, checkedDrawable);
    //Set button background
    view.setBackgroundDrawable(stateListDrawable);
}