美文网首页我爱编程
android kotlin 垂直滚动(消息轮播)

android kotlin 垂直滚动(消息轮播)

作者: Mocaris | 来源:发表于2018-08-09 18:02 被阅读82次

这是个仿淘宝 首页上下滚动消息的layout
+使用方式

/**
 * Created by mocaris on 2017/12/20.
 * 垂直跑马灯
 */

public class VerticalRollingLayout extends ViewFlipper {

    public static final int TOP_BOTTOM = 0;
    public static final int BOTTOM_TOP = 1;

    //滚动方向  上下  下上
    private int rollingType = 0;
    //是否重复滚动  否,只将所有滚动完毕停止
//    private boolean mRepeat;
    //滚动间隔 默认1000
    private int mRollingInterval;
    //动画时间
    private int mAnimDuration;
    private ListAdapter mListAdapter;

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

    public VerticalRollingLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.VerticalRollingLayout);
        rollingType = typedArray.getInt(R.styleable.VerticalRollingLayout_rolling_type, 0);
//        mRepeat = typedArray.getBoolean(R.styleable.VerticalRollingLayout_repeat, false);
        mRollingInterval = typedArray.getInt(R.styleable.VerticalRollingLayout_rolling_interval, 3500);
        mAnimDuration = typedArray.getInt(R.styleable.VerticalRollingLayout_rolling_duration, 1000);
        typedArray.recycle();
        InitRollingAnim();
    }

    public int getRollingType() {
        return rollingType;
    }

    /**
     * @param rollingType {@link #TOP_BOTTOM} {@link #BOTTOM_TOP}
     */
    public void setRollingType(int rollingType) {
        this.rollingType = rollingType;
    }

    public void setAdapter(ListAdapter listAdapter) {
        this.mListAdapter = listAdapter;
        initChildView();
    }

    public void notifyDataSetChanged() {
        initChildView();
    }

    private void initChildView() {
        if (null == mListAdapter) {
            return;
        }
        this.removeAllViews();
        for (int i = 0; i < mListAdapter.getCount(); i++) {
            View itemView = mListAdapter.getView(i, null, this);
            this.addView(itemView);
        }
    }

    /**
     * 初始化动画
     */
    private void InitRollingAnim() {
        this.clearAnimation();
        TranslateAnimation rollingAnimIn = null;
        TranslateAnimation rollingAnimOut = null;
        switch (rollingType) {
            case BOTTOM_TOP://从下到上
                rollingAnimOut = getRollingAnim(0f, 1f);
                rollingAnimIn = getRollingAnim(-1f, 0f);
                break;
            case TOP_BOTTOM://从上到下
            default:
                rollingAnimIn = getRollingAnim(1f, 0f);
                rollingAnimOut = getRollingAnim(0f, -1f);
                break;
        }
        this.setFlipInterval(mRollingInterval);
        this.setInAnimation(rollingAnimIn);
        this.setOutAnimation(rollingAnimOut);
    }

    /**
     * 动画
     *
     * @param fromY
     * @param toY
     * @return
     */
//    //int fromXType, float fromXValue, int toXType, float toXValue,int fromYType, float fromYValue, int toYType, float toYValue
    private TranslateAnimation getRollingAnim(float fromY, float toY) {
        TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF
                , 0
                , Animation.RELATIVE_TO_SELF
                , 0
                , Animation.RELATIVE_TO_SELF
                , fromY
                , Animation.RELATIVE_TO_SELF
                , toY);
        translateAnimation.setDuration(mAnimDuration);
        return translateAnimation;
    }

}

自定义属性

 <!--垂直滚动-->
    <declare-styleable name="VerticalRollingLayout">
        <!--滚动方向-->
        <attr name="rolling_type" format="enum">
            <enum name="top2bottom" value="0" />
            <enum name="bottom2top" value="1" />
        </attr>
        <!--是否重复 default false-->
        <!--<attr name="repeat" format="boolean" />-->
        <!--滚动时间间隔  毫秒 millisecond  default 1000-->
        <attr name="rolling_interval" format="integer" />
        <!--动画时间-->
        <attr name="rolling_duration" format="integer" />
    </declare-styleable>

使用方法

     <com.zfzx.investor.custom.weight.VerticalRollingLayout
        android:id="@+id/vrl_home"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1" />

。。。

       vrl_home.rollingType = VerticalRollingLayout.BOTTOM_TOP
//homeRollingAdapter 是继承ListAdapter 的   和ListAdapter 用法一样
        vrl_home.setAdapter(homeRollingAdapter)
        vrl_home.startFlipping()

相关文章

  • android kotlin 垂直滚动(消息轮播)

    这是个仿淘宝 首页上下滚动消息的layout+使用方式 自定义属性 使用方法 。。。

  • Slider - 轮播图

    简介: 用react开发的轮播图组件,支持淡入淡出、水平滚动、垂直滚动的无缝轮播效果。可自定义轮播内容。 API ...

  • 轮播图

    1. 使用的第三方"SDCycleScrollView" 2. 文字轮播-垂直滚动示例 3. 图片轮播-水平滚动 ...

  • 图片轮播器中踩到的坑

    # bug :图片轮播器手动拖拽时垂直方向上存在偏移量(轮播器为水平方向滚动) 前提: contentSize的滚...

  • 文字垂直滚动轮播

    Element.scrollHeight 这个只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容...

  • iOS轮播图封装 ECAutoScrollBanner

    ECAutoScrollBanner 轮播图封装。可以实现自动定时翻页、手动翻页;垂直和水平滚动等。支持纯文本、本...

  • css滚动

    布局:水平滚动,垂直滚动 垂直滚动: 水平滚动: css样式:

  • css滚动

    布局:水平滚动,垂直滚动 垂直滚动: 水平滚动: css样式:

  • 自定义View实战-仿京东首页轮播文字(又名垂直跑马灯)

    自定义View实战-仿京东首页轮播文字(又名垂直跑马灯) 京东客户端的轮播文字效果: 本次要实现的只是后面滚动的文...

  • CSS 隐藏滚动条 但可以滚动

    垂直滚动,用鼠标滚轮滚动 横向滚动 其他垂直滚动方法

网友评论

    本文标题:android kotlin 垂直滚动(消息轮播)

    本文链接:https://www.haomeiwen.com/subject/eapcbftx.html