利用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，每一个Radiobutton做以它作为背景，看下我注释的那行，如果不注释，会怎么样，大家可以试试。这里的topbar_select，就是前边的rb_checked图片。

以下是layout资源文件：

            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" >

                    android:id="@+id/rb1"
            style="@style/sl_style"
            android:checked="true" />

                    android:id="@+id/rb2"
            style="@style/sl_style" />

                    android:id="@+id/rb3"
            style="@style/sl_style" />
    

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