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向...
  • dreamlivemeng
  • dreamlivemeng
  • 2016年07月21日 09:43
  • 5824

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

1效果图 2项目结构 3代码 自定义滑动控件UpDownTextView package android.zhh.com.myfangtaobao2; import android.a...
  • zhaihaohao1
  • zhaihaohao1
  • 2017年03月15日 13:33
  • 1042

Android:TextView的垂直滚动效果和上下滚动效果,原生动画实现

1 效果图 啥也不多说,看效果图, 2 实现原理 A利用平移动画TranslateAnimation完成动画向上向下平移 B得到控件的LayoutParams设置控件的宽高、Margins(设置...
  • u012990509
  • u012990509
  • 2017年01月19日 16:04
  • 4026

MarqueeView源码简单分析笔记

跑马灯效果,大家可以去原作者浏览https://github.com/sfsheng0322/MarqueeView 下面看自定义控件的代码public class MarqueeView exte...
  • catROOM
  • catROOM
  • 2016年06月26日 19:46
  • 2351

Android View MarqueeView 跑马灯效果

摘要: 制作跑马灯多行展示控件 要点: 1、跑马灯效果属性 android:ellipsize="marquee" //跑马灯效果 android:focusable="true" //...
  • Seekf_Dream
  • Seekf_Dream
  • 2016年08月30日 22:28
  • 2237

热门头条的实现—MarqueeView、ViewFlipper

类似于淘宝热门头条的实现——ViewFlipper。布局文件:
  • qq_27634797
  • qq_27634797
  • 2017年06月01日 17:31
  • 472

Android自定义控件----电商项目常用的跑马灯YluoMarqueeView

先看效果图 最近有人问我要一个电商项目的跑马灯的控件.看了一下感觉实现起来不是很难,现在跟大家分享一下.不知道之前有没有人分享过.其实实现原理就是:先定好行高,然后计算出三行的位置. 分别是前一行...
  • x87648510
  • x87648510
  • 2016年08月03日 12:45
  • 967

android: 不需要焦点的TextView跑马灯 MarqueeTextView

之前在网上找了很多关于TextView的跑马灯效果实现的例子,实现起来都存在一些问题,例如一种是完全重画一个跑马灯,还有就是只设置TextView的相关属性使其具有跑马灯的效果,总的来说这两种方法都是...
  • jdsjlzx
  • jdsjlzx
  • 2012年07月18日 18:21
  • 9941

第三方开源库:TextView相关

MarqueeViewDemogithub:https://github.com/gongwen/MarqueeViewLibrary 通过MarqueeFactory来提供各种样式的跑马灯View...
  • ss1168805219
  • ss1168805219
  • 2017年02月13日 16:36
  • 1168

自定义View之垂直翻页公告

俗名:垂直跑马灯 学名:垂直翻页公告 动态效果图: GitHub开源地址 APK下载地址 使用 Gradle: compile 'com.sunfushe...
  • zhangli_
  • zhangli_
  • 2016年06月25日 10:56
  • 1267
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UpMarqueeTextView-模仿淘宝客户端向上滚动的广告条
举报原因:
原因补充:

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