前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android自定义控件之ToggleImageView

Android自定义控件之ToggleImageView

作者头像
张风捷特烈
发布2019-03-15 15:25:31
5070
发布2019-03-15 15:25:31
举报
文章被收录于专栏:Android知识点总结
零、前言

自定义一个简单的小控件来解决切换按钮个小问题,不然写起来挺麻烦 特别是多图的情况,selector不能用,难道一张一张switch?

代码语言:javascript
复制
[1].点击时透明度变化
[2].若干个图片轮回切换
[3].自定义点击时动画

一、使用
0.引入依赖

已经发布到github了

代码语言:javascript
复制
    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }
    
    dependencies {
        implementation 'com.github.toly1994328:ToggleImageView:0.02'
    }

1.双按钮使用

为了使用简单一点,直接给个初始化双按钮的方法

代码语言:javascript
复制
ctrl.initTwoButton(
        R.drawable.icon_start_3, v -> {
            //TODO 播放
        }, R.drawable.icon_stop_3, v -> {
            //TODO 停止
        });

2.多按钮的使用

当然两个按钮也适用

代码语言:javascript
复制
 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 家族使用指南

代码语言:javascript
复制
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

代码语言:javascript
复制
/**
 * 作者:张风捷特烈<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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.03.10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 零、前言
  • 一、使用
    • 0.引入依赖
      • 1.双按钮使用
        • 2.多按钮的使用
          • 3.添加自定义动画
            • 二、代码实现
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档