UpMarqueeTextView-模仿淘宝客户端向上滚动的广告条

原创 2015年07月09日 18:47:25

UpMarqueeTextView一个简单的向上滚动的类似跑马灯效果,项目中用到的时候是接受到推送过来的消息向上滚动一次,没有做动态的gif效果,所以都是一些纯文字的简单记录。
UpMarqueeTextView通过实现TextView使用Animator动画来实现,所以需要满足3.0以下的版本需要使用nineold-androids来实现效果,其实原理什么很简单看看代码就能了解。

这里写图片描述

public class UpMarqueeTextView extends TextView implements Animator.AnimatorListener {

    private static final String TAG = "UpMarqueeTextView";

    private static final int ANIMATION_DURATION = 200;
    private float height;
    private AnimatorSet mAnimatorStartSet;
    private AnimatorSet mAnimatorEndSet;
    private String mText;

    public UpMarqueeTextView(Context context) {
        super(context);
    }

    public UpMarqueeTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.w(TAG, "--- onDraw ---");
        height = getHeight();// 确保view的高度
    }

    /**--- 初始化向上脱离屏幕的动画效果 ---*/
    private void initStartAnimation() {
        ObjectAnimator translate = ObjectAnimator.ofFloat(this, "translationY", 0, -height);
        ObjectAnimator alpha = ObjectAnimator.ofFloat(this, "alpha", 1f, 0f);
        mAnimatorStartSet = new AnimatorSet();
        mAnimatorStartSet.play(translate).with(alpha);
        mAnimatorStartSet.setDuration(ANIMATION_DURATION);
        mAnimatorStartSet.addListener(this);
    }

    /**--- 初始化从屏幕下面向上的动画效果 ---*/
    private void initEndAnimation() {
        ObjectAnimator translate = ObjectAnimator.ofFloat(this, "translationY", height, 0);
        ObjectAnimator alpha = ObjectAnimator.ofFloat(this, "alpha", 0f, 1f);
        mAnimatorEndSet = new AnimatorSet();
        mAnimatorEndSet.play(translate).with(alpha);
        mAnimatorEndSet.setDuration(ANIMATION_DURATION);
    }

    /**--- 设置内容 ---**/
    public void setText(String text) {
        if (TextUtils.isEmpty(text)) {
            Log.e(TAG, "--- 请确保text不为空 ---");
            return;
        }
        mText = text;
        if (null == mAnimatorStartSet) {
            initStartAnimation();
        }
        mAnimatorStartSet.start();
    }


    @Override
    public void onAnimationStart(Animator animator) {

    }

    @Override
    public void onAnimationEnd(Animator animator) {
        super.setText(mText);
        if (null == mAnimatorEndSet) {
            initEndAnimation();
        }
        mAnimatorEndSet.start();
    }

    @Override
    public void onAnimationCancel(Animator animator) {

    }

    @Override
    public void onAnimationRepeat(Animator animator) {

    }
}

功能确实很简单,设置下动画代码即可实现了。苍蝇虽小也是肉,项目体验下载地址:
https://github.com/Neacy/UpMarqueerTextView/tree/master

仿淘宝首页的淘宝头条View垂直滚动

之前本来是打算做TextView垂直向上滚动的,后来发现一位大神做得很好,https://github.com/sfsheng0322/MarqueeView 孙福生大神,然后自己要用到多个View向...

仿淘宝首页的淘宝头条View垂直滚动

之前本来是打算做TextView垂直向上滚动的,后来发现一位大神做得很好,https://github.com/sfsheng0322/MarqueeView 孙福生大神,然后自己要用到多个View向...
  • zchlww
  • zchlww
  • 2016年11月16日 09:19
  • 547

仿淘宝首页的淘宝头条View垂直滚动

之前本来是打算做TextView垂直向上滚动的,后来发现一位大神做得很好,https://github.com/sfsheng0322/MarqueeView 孙福生大神,然后自己要用到多个View向...

Android中ViewFlipper的使用详解

说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果,不管是微博,还是QQ等。 实现左右滑动的方式很多,有ViewPager(不过这个和需要android-support-v...

自动向上滚动的广告条

  • 2016年05月12日 11:05
  • 2.07MB
  • 下载

高仿京东APP首页“京东快报”自动向上滚动的广告条

转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/51005062 本文出自:【顾林海的博客】 前言上次在京东A...

Android中仿淘宝头条,自定义控件,向上滚动

1效果图 2项目结构 3代码 自定义滑动控件UpDownTextView package android.zhh.com.myfangtaobao2; import android.a...

垂直广告条,垂直轮播效果,仿照淘宝的纵向滚动实现

开发中,产品让仿照淘宝的做纵向滚动的效果,刚开始想到的是自定义一个垂直的Viewpager来实现,看了一些相关的资料,果不其然可以实现,但是很麻烦。我就在想,肯定有简单的办法,终于让我找到了,简直是完...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UpMarqueeTextView-模仿淘宝客户端向上滚动的广告条
举报原因:
原因补充:

(最多只允许输入30个字)