Android_仿京东广告滚动textview

不到百行代码实现JD广告滚动textview

---

GIF预览中所有的自定义view全部在同一项目中,有兴趣的可以去github下载

---

这次主要看我们如何实现这个滚动的textview,

这次的实现思路比较low,不算是真正意义的自定义view,他其实是组合控件,

• 自定义了一Layout里面自己create了一个textview是包裹内容的
• 透出了自定义属性,其实就是透传给textview用的,
• 动画就是根据自定义属性中的方位来判断,生成不同的属性动画,

通过以上三部即可完成一个上下滚动的textview

有一个需要注意的地方就是textview滚动返回的计算,下面看下代码

1. 定义layout作为父布局

public class AndTextViewLayout extends LinearLayout {
    //自定义属性略
   ......
    private TextView andTextView;

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

    public AndTextViewLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AndTextViewLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.AndTextViewLayout, defStyleAttr, R.style.def_and_text_layout);
        int indexCount = typedArray.getIndexCount();
        for (int i = 0; i < indexCount; i++) {
            int attr = typedArray.getIndex(i);
            switch (attr) {
            //自定义属性获取略
            }
        }
        typedArray.recycle();
        initAndTextView();

    }

1. 生成要滚动的textview

  private void initAndTextView() {
  //根据自定义属性完成一个待命的textview并填充其内容
        andTextView = new TextView(getContext());
        LinearLayout.LayoutParams layoutParams = new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        andTextView.setTextSize(TypedValue.COMPLEX_UNIT_SP, andTextSize);
        andTextView.setTextColor(andTextColor);
        andTextView.setText(andTextDesc);
        andTextView.setBackgroundColor(andTextBbackgroundColor);
        layoutParams.gravity = Gravity.CENTER_VERTICAL;
        andTextView.setLayoutParams(layoutParams);
        addView(andTextView);
    }

1. 生成属性动画

    //生成属性动画,注意动画在X轴和Y轴的起始位置,横向移动的范围是负parent控件的宽度到parent宽度加上textview的宽度
    //Y轴的范围是负parent的高度到parent的高度加上textview的高度
    private ObjectAnimator creatCurrentAnimation() {
        ObjectAnimator objectAnimator = null;
        if (andTextAnimRight) {
            objectAnimator = ObjectAnimator.ofFloat(andTextView, "translationX", -getWidth(), getWidth() + andTextView.getWidth());
        } else if (andTextAnimLeft) {
            objectAnimator = ObjectAnimator.ofFloat(andTextView, "translationX", getWidth() + andTextView.getWidth(), -getWidth());
        } else if (andTextAnimUp) {
            objectAnimator = ObjectAnimator.ofFloat(andTextView, "translationY", -getHeight(), getHeight() + andTextView.getHeight());
        } else if (andTextAnimDown) {
            objectAnimator = ObjectAnimator.ofFloat(andTextView, "translationY", getHeight() + andTextView.getHeight(), -getHeight());
        }
        return objectAnimator;
    }

1. 执行动画即可

    public void startAndTextAnim() {
        ObjectAnimator objectAnimator = creatCurrentAnimation();
        objectAnimator.setDuration(aniDuration);
        objectAnimator.setRepeatCount(ValueAnimator.INFINITE);
        objectAnimator.start();
    }

还有一种思路就是直接自定义TextView,改变textview中给设置的view的文字内容在textview中的 位置,类似于Android中textview原生支持的跑马灯的效果,你可以自定义一个textview实现一个垂直的跑马灯textview,有兴趣的可以写一下,这个比我写的这个难度略大,本渣渣目前没写出来哈哈哈!

源代码下载地址:多多star谢谢https://github.com/GuoFeilong/ATDragViewDemo