利用Radiogroup Radiobutton 实现滑动效果菜单

第一次在满世界大侠的地方撰写博客，所以不免紧张，怕自己写出让人消掉大牙的文章。本着学习的态度，最后我还是决定把自己的学习感想记录下来。

首先我要感谢一个哥们，大部分的内容都是他的杰作，我只是稍作修改，我看到的地方时http://www.myexception.cn/mobile/418248.html，大家可以看看原创的代码。

效果图：

这里是“1111”，“2222”，“3333”是三个Radiobutton，当前如果是“1111”，点击“2222”的时候，背景的蓝色背景框会从左移动到“2222”这个地方。这里主要是重写了Radiogroup，代码如下，在此感谢原作者：

public class NewsRadioGroup extends RadioGroup implements

        OnCheckedChangeListener {

    private final Transformation mTransformation = new Transformation();

    private Animation mAnimation;

    private OnCheckedChangeListener mOnCheckedChangeListener;

    private int mLastCheckedId = -1;

    private Drawable mDummy;

    private Drawable mDrawableNormal, mDrawableChecked;

    private boolean mAminDoing = false;

    public NewsRadioGroup(Context context) {

        super(context);

        init();

    }

    public NewsRadioGroup(Context context, AttributeSet attrs) {

        super(context, attrs);

        init();

    }

    private void init() {

        super.setOnCheckedChangeListener(this);

        mLastCheckedId = super.getCheckedRadioButtonId();

        mDummy = getResources().getDrawable(R.drawable.rb_checked);

        mDrawableNormal = getResources().getDrawable(

                android.R.color.transparent);        

    }

    public void onCheckedChanged(RadioGroup group, int checkedId) {

        if (mLastCheckedId != -1) {

            doAmin(checkedId);

        } else {

            mLastCheckedId = checkedId;

        }

        if (mOnCheckedChangeListener != null) {

            mOnCheckedChangeListener.onCheckedChanged(group, checkedId);

        }

    }

    private void doAmin(int checkedId) {

        RadioButton rbCurChecked = (RadioButton) super.findViewById(checkedId), rbLastChecked = (RadioButton) super

                .findViewById(mLastCheckedId);

        if (rbCurChecked == null || rbLastChecked == null) {

            mLastCheckedId = checkedId;

            return;

        }

        int X1 = rbLastChecked.getLeft(), X2 = rbCurChecked.getLeft();

        if (X1 <= 0 && X2 <= 0) {

            mLastCheckedId = checkedId;

            return;

        }

        if (mDrawableChecked == null) {

            mDrawableChecked = rbCurChecked.getBackground();

            mDummy.setBounds(0, 0, rbCurChecked.getWidth(),

                    rbCurChecked.getHeight());

        }

        rbCurChecked.setBackgroundDrawable(mDrawableNormal);

//        rbCurChecked.setBackgroundResource(R.drawable.rb_checked);

        if (mAminDoing && mAnimation != null) {

            mAnimation.reset();

        }

        mAnimation = new TranslateAnimation(X1, X2, rbCurChecked.getTop(),

                rbCurChecked.getTop());

        mAnimation.setDuration(500);

        mAnimation.initialize(0, 0, 0, 0);

        mAminDoing = true;

        mAnimation.startNow();

        invalidate();

    }

    @Override

    public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {

        mOnCheckedChangeListener = listener;

    }

    protected void onDraw(Canvas canvas) {

        if (mAnimation == null || !mAminDoing) {

            return;

        }

        if (!mAnimation.hasEnded()) {

            int sc = canvas.save();

            mAnimation.getTransformation(

                    AnimationUtils.currentAnimationTimeMillis(),

                    mTransformation);

            canvas.concat(mTransformation.getMatrix());

            mDummy.draw(canvas);

            canvas.restoreToCount(sc);

//            ((RadioButton)findViewById(getCheckedRadioButtonId())).setBackgroundResource(R.color.transparent);

            invalidate();

//            setReallyCheck();

        } else {

            mAminDoing = false;

            setReallyCheck();

//            ((RadioButton)findViewById(getCheckedRadioButtonId())).setBackgroundResource(R.drawable.sl_tab);

        }

    }

    private void setReallyCheck() {

        if (mLastCheckedId != -1) {

            super.findViewById(mLastCheckedId).setBackgroundDrawable(

                    mDrawableNormal);

        }

        mLastCheckedId = super.getCheckedRadioButtonId();

        if (mLastCheckedId != -1) {

            super.findViewById(mLastCheckedId).setBackgroundDrawable(

                    mDrawableChecked);

        }

    }

}// end class NesRadioGroup 

这里初始化init()方法中，第一步获得三个变量mLastCheckedId，mDummy，mDrawableNormal，分别是当前选中id和两个Drawable，这里的RB_checked是用9pach做的图片，这里最重要的是三点。第一点，在onCheckedChanged中提前捕捉事件，然后启动动画效果，产生滑动，在动画结束后在运行自己的onCheckedChanged方法，这里文字的颜色就是动画之后处理的。第二点在doAmin中设置动画。第三点使用setReallyCheck()方法。

资源文件：

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

    <item android:drawable="@drawable/topbar_select" android:state_enabled="true" android:state_focused="true" android:state_pressed="false"/>

   <!--   <item android:drawable="@drawable/topbar_select" android:state_enabled="true" android:state_pressed="true"/> -->

    <item android:drawable="@drawable/topbar_select" android:state_checked="true" android:state_enabled="true"/>

    <item android:drawable="@drawable/transparent"/>

</selector>

这里是一个selector，每一个Radiobutton做以它作为背景，看下我注释的那行，如果不注释，会怎么样，大家可以试试。这里的topbar_select，就是前边的rb_checked图片。

以下是layout资源文件：

    <com.app.view.NewsRadioGroup

        android:id="@+id/rg"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:background="@drawable/sl_n"

        android:gravity="center_vertical"

        android:orientation="horizontal"

        android:visibility="visible" >

        <RadioButton

            android:id="@+id/rb1"

            style="@style/sl_style"

            android:checked="true" />

        <RadioButton

            android:id="@+id/rb2"

            style="@style/sl_style" />

        <RadioButton

            android:id="@+id/rb3"

            style="@style/sl_style" />

     </com.app.view.NewsRadioGroup>

大家可以稍微改一改，例如滑动过程中的背景具有一定的透明效果等等。