自定义带动画的开关按钮

最新推荐文章于 2024-10-04 11:47:50 发布

zhuyz89

最新推荐文章于 2024-10-04 11:47:50 发布

阅读量999

点赞数

分类专栏：自定义开关按钮带动画的开关按钮 Android开发 Android 文章标签： android layout animation encoding interface include

本文链接：https://blog.csdn.net/zhuyz89/article/details/7498368

版权

Android 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

自定义开关按钮

1 篇文章 0 订阅

订阅专栏

带动画的开关按钮

1 篇文章 0 订阅

订阅专栏

看到小米手机里的通讯录的开关按钮效果很好，所以自己也写了一个

实现的原理是：共五张图片，最底下的一张是开关的图on/off，接着是一个阴影图片（该图片可以不要，主要是为了好看一点），然后就是两张遮罩层的图片（这里两张是为了点击的时候可以换背景颜色，达到想要的效果，也可以是一张图，具体看你想要什么样的效果来定了），最上面的一张就是看到最上面移动的图片了，主要是阴影图片跟最上面的图片要同步移动，移动的位置也要相同，还有就是最底下的开关图片也要跟着移动。

开关按钮的布局文件 sidebutton_content.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     >

或者：sidebutton.xml

<?xml version="1.0" encoding="utf-8"?>
<com.zhu.ui.set.SlideButton
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent" android:background="@drawable/buttonbg"
android:id="@+id/sidebutton">

</com.zhu.ui.set.SlideButton>

自定义开关按钮的类文件 SlideButton.java

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import com.zhu.R;

public class SlideButton extends RelativeLayout implements OnClickListener, AnimationListener {

private ImageView indicate;
// private TextView left, right;
private boolean isChgLsnOn = false;
private volatile boolean b_chgIng = false;
private OnChangedListener ChgLsn;
private volatile boolean enableChgListener = false;
public ImageView botiao,zz,botiao_bg;
private int type = -1;

public boolean isEnableChgListener() {
return enableChgListener;
}

public void setEnableChgListener(boolean enableChgListener) {
this.enableChgListener = enableChgListener;
}

public SlideButton(Context context, AttributeSet attrs) {
super(context, attrs);
this.setOnClickListener(this);
}

@Override
protected void onFinishInflate() {
super.onFinishInflate();
indicate = (ImageView) this.findViewById(R.id.indicate);
botiao = (ImageView) this.findViewById(R.id.botiao);
zz = (ImageView) this.findViewById(R.id.zz);
botiao_bg = (ImageView) this.findViewById(R.id.botiao_bg);

// left = (TextView) this.findViewById(R.id.textView1);
// right = (TextView) this.findViewById(R.id.textView2);

}

    public void SetOnChangedListener(OnChangedListener l,int type){//设置监听器,当状态修改的时候

          ChgLsn = l;
          this.type = type;
          ChgLsn.OnChanged(isChgLsnOn,type);

}


    public void setState(boolean state){
     if(isChgLsnOn != state){
      if(state){
       indicate.setAnimation(getGoRightAnimation());
       botiao.setAnimation(getGoRightAnimation());
       botiao_bg.setAnimation(getGoRightAnimation());
    isChgLsnOn = true;
      }else {
       indicate.setAnimation(getGoLeftAnimation());
       botiao.setAnimation(getGoLeftAnimation());
       botiao_bg.setAnimation(getGoLeftAnimation());
    isChgLsnOn = false;
      }
     }

    }

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// TODO Auto-generated method stub
super.onLayout(changed, l, t, r, b);
ViewGroup.LayoutParams lp = indicate.getLayoutParams();
// lp.width = left.getWidth();
// lp.height = left.getHeight();
lp.width = 148;
lp.height = 30;
indicate.setLayoutParams(lp);

ViewGroup.LayoutParams lps = botiao.getLayoutParams();
lps.width = 80;
lps.height = 31;
botiao.setLayoutParams(lps);

ViewGroup.LayoutParams lps_bg = botiao_bg.getLayoutParams();
lps_bg.width = 80;
lps_bg.height = 31;
botiao_bg.setLayoutParams(lps_bg);

}

@Override
public void onClick(View v) {
enableChgListener = true;
if(!b_chgIng){
   if (isChgLsnOn) {
    indicate.setAnimation(getGoLeftAnimation());
    botiao.setAnimation(getGoLeftAnimation());
    botiao_bg.setAnimation(getGoLeftAnimation());
    isChgLsnOn = false;
   }else {
    indicate.setAnimation(getGoRightAnimation());
    botiao.setAnimation(getGoRightAnimation());
    botiao_bg.setAnimation(getGoRightAnimation());
    isChgLsnOn = true;
   }
   (indicate.getAnimation()).setAnimationListener(this);
   (botiao.getAnimation()).setAnimationListener(this);
   (botiao_bg.getAnimation()).setAnimationListener(this);
   (indicate.getAnimation()).startNow();
   (botiao.getAnimation()).startNow();
   (botiao_bg.getAnimation()).startNow();
}

}

private AnimationSet getGoRightAnimation() {

AnimationSet animationSet_bottom_out = new AnimationSet(true);
// 第一个参数fromAlpha为动画开始时候透明度
// 第二个参数toAlpha为动画结束时候透明度

AlphaAnimation myAnimation_Alpha_bottom_out = new AlphaAnimation(0.0f,
1.0f);
// 说明:
// 0.0表示完全透明
// 1.0表示完全不透明

// 设置时间持续时间为 5000毫秒
TranslateAnimation myTranslateAnimation_bottom_out = new TranslateAnimation(
    Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
    0.5f, Animation.RELATIVE_TO_SELF, 0.0f,
    Animation.RELATIVE_TO_SELF, 0.0f);

// 第一个参数fromXDelta为动画起始时 X坐标上的移动位置
// 第二个参数toXDelta为动画结束时 X坐标上的移动位置
// 第三个参数fromYDelta为动画起始时Y坐标上的移动位置
// 第四个参数toYDelta为动画结束时Y坐标上的移动位置

// animationSet_bottom_out.addAnimation(myAnimation_Alpha_bottom_out);
animationSet_bottom_out.addAnimation(myTranslateAnimation_bottom_out);
animationSet_bottom_out.setFillAfter(true);
animationSet_bottom_out.setDuration(150);
return animationSet_bottom_out;
}

private AnimationSet getGoLeftAnimation() {

AnimationSet animationSet_bottom_in = new AnimationSet(true);
// 第一个参数fromAlpha为动画开始时候透明度
// 第二个参数toAlpha为动画结束时候透明度
AlphaAnimation myAnimation_Alpha_bottom_in = new AlphaAnimation(0.0f,
1.0f);
// 说明:
// 0.0表示完全透明
// 1.0表示完全不透明

// 设置时间持续时间为 5000毫秒
TranslateAnimation myTranslateAnimation_bottom_in = new TranslateAnimation(
    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
    0.0f, Animation.RELATIVE_TO_SELF, 0.0f,
    Animation.RELATIVE_TO_SELF, 0.0f);

// animationSet_bottom_in.addAnimation(myAnimation_Alpha_bottom_in);
animationSet_bottom_in.addAnimation(myTranslateAnimation_bottom_in);
animationSet_bottom_in.setFillAfter(true);
animationSet_bottom_in.setDuration(150);
return animationSet_bottom_in;
}

@Override
public void onAnimationEnd(Animation animation) {

b_chgIng = false;

if(null != ChgLsn && enableChgListener){
ChgLsn.OnChanged(isChgLsnOn,type);
}
}

@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub

}

@Override
public void onAnimationStart(Animation animation) {

b_chgIng = true;
}

}

另外还要写一个监听事件的接口文件 OnChangedListener.java

public interface OnChangedListener {

abstract void OnChanged(boolean CheckState,int type);
}

如果写的是sidebutton.xml布局文件的话就可以直接调用了，这就不说了，下面就说说sidebutton_content.xml的使用吧。

<com.zhu.ui.set.SlideButton android:layout_width="148px"
     android:layout_height="30px" android:background="@drawable/buttonbg"
     android:id="@+id/sidebutton">
              <include layout="@layout/sidebutton_content"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         ></include>
             </com.zhu.ui.set.SlideButton>
         </LinearLayout>

使用的java代码：（要实现OnChangedListener接口）

auto_use_ip_call = (LinearLayout)findViewById(R.id.auto_use_ip_call);

mSlideButton = (SlideButton)findViewById(R.id.sidebutton);

//拨打长途自动使用IP拨号设置
auto_use_ip_call.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    boolean isChecked = Constant.getAutoUseIpCallDisplay(SetAutoIpCallActivity.this);
    mSlideButton.setState(!isChecked);
    auto_use_ip_call.setBackgroundResource(R.drawable.content);
    auto_use_ip_call.setPadding(15, 15, 15, 15);
    mSlideButton.zz.setBackgroundResource(R.drawable.zz);
    OnChanged(!isChecked,0);
   }

});
auto_use_ip_call.setOnTouchListener(new OnTouchListener() {

   @Override
   public boolean onTouch(View v, MotionEvent event) {
    // TODO Auto-generated method stub
    auto_use_ip_call.setBackgroundResource(R.drawable.content_over);
    auto_use_ip_call.setPadding(15, 15, 15, 15);
    mSlideButton.zz.setBackgroundResource(R.drawable.zz_over);
    return false;
   }
});

//拨打长途自动使用IP拨号开关
mSlideButton.SetOnChangedListener(this,0);

//重写OnChangedListener接口的OnChanged方法，开关按钮改变时的处理都可放在这里实现

@Override
public void OnChanged(boolean CheckState,int type) {
// TODO Auto-generated method stub
if(CheckState){
layout_edit.setVisibility(View.VISIBLE);
}else{
layout_edit.setVisibility(View.GONE);
}
Constant.setAutoUseIpCallDisplay(SetAutoIpCallActivity.this,CheckState);
}

如有更好的方法实现的话大家可以交流交流，分享一下

源码下载地址：http://download.csdn.net/detail/zhuyz89/4255358