![9414344-f5e0fd2f8d63af43.png](https://i-blog.csdnimg.cn/blog_migrate/420ee8b74e39ac0ab96262b8a6809cc2.webp?x-image-process=image/format,png)
ToggleImageView.png
零、前言
自定义一个简单的小控件来解决切换按钮个小问题,不然写起来挺麻烦
特别是多图的情况,selector不能用,难道一张一张switch?
[1].点击时透明度变化
[2].若干个图片轮回切换
[3].自定义点击时动画
多图 | 两图 |
---|---|
![]() |
![]() |
略缩放 | 自定义 |
---|---|
![]() |
![]() |
一、使用
0.引入依赖
已经发布到github了
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
dependencies {
implementation 'com.github.toly1994328:ToggleImageView:0.02'
}
1.双按钮使用
为了使用简单一点,直接给个初始化双按钮的方法
ctrl.initTwoButton(
R.drawable.icon_start_3, v -> {
//TODO 播放
}, R.drawable.icon_stop_3, v -> {
//TODO 停止
});
2.多按钮的使用
当然两个按钮也适用
player.setResIds(
R.drawable.icon_play_single, R.drawable.icon_play_single_loop,
R.drawable.icon_play_loop, R.drawable.icon_play_random);
player.setOnToggleListener((view, idx) -> {
switch (idx) {
case 0:
//TODO 单曲播放
break;
case 1:
//TODO 单曲循环
break;
case 2:
//TODO 循环播放
break;
case 3:
//TODO 随机播放
break;
}
});
3.添加自定义动画
只要传入一个Animator就行了,至于Animator动画,可以详见: Animator 家族使用指南
ObjectAnimator rotation = ObjectAnimator.ofFloat(ctrl, "rotation", 0f, 180f).setDuration(300);
ObjectAnimator rotationX = ObjectAnimator.ofFloat(ctrl, "rotationX", 0f, 180f).setDuration(300);
ObjectAnimator rotationY = ObjectAnimator.ofFloat(ctrl, "rotationY", 0f, 180f).setDuration(300);
ctrl.setAnimator(rotation,rotationX,rotationY);
二、代码实现
这个很简单,只是通过资源id列表和一个索引来切换图片,并添加一些效果
点击时执行动画,动画结束后执行对应的回调以及OnToggleListener
/**
* 作者:张风捷特烈<br/>
* 时间:2019/3/10/010:8:00<br/>
* 邮箱:1981462002@qq.com<br/>
* 说明:多图标切换器
*/
public class ToggleImageView extends android.support.v7.widget.AppCompatImageView {
private static final String TAG = "ToggleImageView";
private AnimatorSet mSet;//动画集合
private List<Integer> mResIds;//图片资源id
private List<OnClickListener> mListeners;
private int mCurrentIdx;//当前位置
private boolean isWithScale = true;//点击时是否略微缩放
private Animator[] mAnimators;//自定义动画
public ToggleImageView(Context context) {
this(context, null);
}
public ToggleImageView(Context context, AttributeSet attrs) {
super(context, attrs);
mResIds = new ArrayList<>();
mListeners = new ArrayList<>();
mSet = new AnimatorSet();
//设置动画结束监听
mSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
setImageResource(mResIds.get(mCurrentIdx));
if (mListeners.size() > 0) {
mListeners.get(mCurrentIdx).onClick(ToggleImageView.this);
}
if (mOnToggleListener != null) {
mOnToggleListener.toggle(ToggleImageView.this, mCurrentIdx);
}
mCurrentIdx++;
if (mCurrentIdx == mResIds.size()) {
mCurrentIdx = 0;
}
}
});
}
public void setAnimator(Animator... animators) {
mAnimators = animators;
}
public void setResIds(List<Integer> resIds) {
mResIds = resIds;
setImageResource(mResIds.get(mCurrentIdx));
mCurrentIdx = 1;
}
/**
* 初始化双按钮
*
* @param resFrom 第一状态
* @param callBackFrom 第一状态器
* @param resTo 第二状态
* @param callBackTo 第二状态器
*/
public void initTwoButton(int resFrom, OnClickListener callBackFrom, int resTo, OnClickListener callBackTo) {
mResIds.add(resFrom);
mResIds.add(resTo);
mListeners.add(callBackFrom);
mListeners.add(callBackTo);
setImageResource(mResIds.get(mCurrentIdx));
mCurrentIdx = 1;
}
/**
* 是否有缩放效果
* @param withScale 默认true
*/
public void setWithScale(boolean withScale) {
isWithScale = withScale;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
ObjectAnimator alpha = ObjectAnimator.ofFloat(this, "alpha", 1f, .1f, 1f).setDuration(300);
mSet.play(alpha);
if (isWithScale) {
ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", 1f, .8f, 1f).setDuration(300);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", 1f, .8f, 1f).setDuration(300);
mSet.play(scaleX).with(scaleY);
}
mSet.playTogether(mAnimators);
mSet.start();
break;
}
return super.onTouchEvent(event);
}
//监听
public interface OnToggleListener {
void toggle(View view, int currId);
}
private OnToggleListener mOnToggleListener;
public void setOnToggleListener(OnToggleListener onToggleListener) {
mOnToggleListener = onToggleListener;
}
}
比较简单,源码地址:toly1994328/BiggerView