前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >自定义View:关于实现竖直水果机滚动图片切换效果

自定义View:关于实现竖直水果机滚动图片切换效果

作者头像
易帜
发布2022-02-09 16:10:02
6280
发布2022-02-09 16:10:02
举报
文章被收录于专栏:易帜的Android 学习之旅

效果如图所示:

代码语言:javascript
复制
/**
 * 自动垂直滚动的ImageView
 */
public class AutoVerticalScrollImageView extends ImageSwitcher implements ViewSwitcher.ViewFactory {

    private Context mContext;

    //mInUp,mOutUp分别构成向下翻页的进出动画
    private Rotate3dAnimation mInUp;
    private Rotate3dAnimation mOutUp;

    public AutoVerticalScrollImageView(Context context) {
        this(context, null);
    }

    public AutoVerticalScrollImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        init();

    }

    private void init() {

        setFactory(this);

        mInUp = createAnim(true, true);
        mOutUp = createAnim(false, true);

        setInAnimation(mInUp);//当View显示时动画资源ID
        setOutAnimation(mOutUp);//当View隐藏是动画资源ID。

    }

    private Rotate3dAnimation createAnim(boolean turnIn, boolean turnUp) {

        Rotate3dAnimation rotation = new Rotate3dAnimation(turnIn, turnUp);
        rotation.setDuration(animTime);//执行动画的时间
        rotation.setFillAfter(false);//是否保持动画完毕之后的状态
        rotation.setInterpolator(new AccelerateInterpolator());//设置加速模式
        return rotation;
    }

    private boolean isRunning = true;
    private int number = 0;
    private List<Integer> list;


    @SuppressLint("HandlerLeak")
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == 199) {
                next();
                number++;
                setImageResource(list.get(number % list.size()));
            }
        }
    };


    public void setList(List<Integer> list) {
        this.list = list;
    }

    public void startAutoScroll() {
        number = 0;
        isRunning = true;
        new Thread(() -> {
            while (isRunning) {
                handler.sendEmptyMessage(199);
                
                SystemClock.sleep(imageStillTime);
            }
        }).start();
    }


    public void stopAutoScroll() {
        isRunning = false;
    }

    private int imageStillTime = 3000;//停留时长间隔
    private int animTime = 300;//执行动画的时间

    /**
     * 设置停留时长间隔
     */
    public void setImageStillTime(int textStillTime) {
        this.imageStillTime = textStillTime;
    }

    /**
     * 设置进入和退出的时间间隔
     */
    public void setAnimTime(int animTime) {
        this.animTime = animTime;
    }

    //这里返回的ImageView,就是我们看到的View,可以设置自己想要的效果
    public View makeView() {
        ImageView imageView = new ImageView(mContext);
        imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        return imageView;

    }

    //定义动作,向上滚动翻页
    public void next() {
        //显示动画
        if (getInAnimation() != mInUp) {
            setInAnimation(mInUp);
        }
        //隐藏动画
        if (getOutAnimation() != mOutUp) {
            setOutAnimation(mOutUp);
        }
    }

    class Rotate3dAnimation extends Animation {
        private float mCenterX;
        private float mCenterY;
        private final boolean mTurnIn;
        private final boolean mTurnUp;
        private Camera mCamera;

        public Rotate3dAnimation(boolean turnIn, boolean turnUp) {
            mTurnIn = turnIn;
            mTurnUp = turnUp;
        }

        @Override
        public void initialize(int width, int height, int parentWidth, int parentHeight) {
            super.initialize(width, height, parentWidth, parentHeight);
            mCamera = new Camera();
            mCenterY = getHeight();
            mCenterX = getWidth();
        }

        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {

            final float centerX = mCenterX;
            final float centerY = mCenterY;
            final Camera camera = mCamera;
            final int derection = mTurnUp ? 1 : -1;

            final Matrix matrix = t.getMatrix();

            camera.save();
            if (mTurnIn) {
                camera.translate(0.0f, derection * mCenterY * (interpolatedTime - 1.0f), 0.0f);
            } else {
                camera.translate(0.0f, derection * mCenterY * (interpolatedTime), 0.0f);
            }
            camera.getMatrix(matrix);
            camera.restore();

            matrix.preTranslate(-centerX, -centerY);
            matrix.postTranslate(centerX, centerY);
        }
    }

}

xml文件如下:

代码语言:javascript
复制
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.abudhabi.sea.myapplication.AutoVerticalScrollImageView
        android:id="@+id/iv_scroll"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开始" />

    <Button

        android:id="@+id/btn_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="停止" />

</RelativeLayout>

Activity如下:

代码语言:javascript
复制
public class MainActivity extends AppCompatActivity{
    int[] images={
            R.drawable.src1,R.drawable.src2,
            R.drawable.src3,R.drawable.src4,
            R.drawable.src5,R.drawable.src6,
    };
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        List<Integer> resultList = new ArrayList<>(images.length);
        for (int s : images) {
            resultList.add(s);
        }

        AutoVerticalScrollImageView imageView= findViewById(R.id.iv_scroll);
        imageView.setList(resultList)//装入数据
                .setAnimTime(300)//设置进出间隔
                .setImageStillTime(300)//设置图片停留时长间隔
                .startAutoScroll();

        Button stop=findViewById(R.id.btn_stop);
        stop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                imageView.stopAutoScroll();
            }
        });
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档