Android 公告新闻消息资讯之垂直滚动效果

最新推荐文章于 2021-05-27 04:05:00 发布
最新推荐文章于 2021-05-27 04:05:00 发布
阅读量489 收藏
点赞数
文章标签： 移动开发 java ui
原文链接：http://www.cnblogs.com/itcqx/p/5345881.html
版权

垂直滚动新闻栏的实现原理：

　　就是一个自定义的LinearLayout，并且textView能够循环垂直滚动，而且条目可以点击，显示区域最多显示2个条目，并且还有交替的属性垂直移动的动画效果，通过线程来控制滚动的实现。

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

自定义属性：

 <style name="AppTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowNoTitle">true</item>
    </style>

    <declare-styleable name="NoticeView">
        <attr name="gap" format="integer" />
        <attr name="animDuration" format="integer" />
    </declare-styleable>

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

自定义控件的获取属性方法都一样：

 

　　　//获取自定义属性
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.NoticeView);
        mAdverHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, jdAdverHeight, getResources().getDisplayMetrics());
        int gap = array.getInteger(R.styleable.NoticeView_gap, mGap);
        //关闭清空TypedArray,防止内存泄露
        int animDuration = array.getInteger(R.styleable.NoticeView_animDuration, mAnimDuration);
        //关闭清空TypedArray
        array.recycle();

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

自定义条目布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@drawable/blue_line_bg4"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:gravity="center_vertical"
    android:layout_marginBottom="10dp"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/tag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:background="@drawable/blue_line_bg"
        android:padding="5dp"
        android:text="最新"
        android:textColor="#ff0000" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:ellipsize="end"
        android:singleLine="true"
        android:text="价格惊呆！电信千兆光纤上市"
        android:textColor="#000000"
        android:textSize="12sp" >
    </TextView>

</LinearLayout>

...........................................................................................................................

//适配器

package com.notice.scroll;

import java.util.List;

import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

public class NoticeAdapter {
    private List<NoticeEntity> mDatas;

    public NoticeAdapter(List<NoticeEntity> datas) {
        this.mDatas = datas;
        if (datas == null || datas.isEmpty()) {
            throw new RuntimeException("nothing to show");
        }
    }

    /**
     * 获取数据的条数
     *
     * @return
     */
    public int getCount() {
        return mDatas == null ? 0 : mDatas.size();
    }

    /**
     * 获取摸个数据
     *
     * @param position
     * @return
     */
    public NoticeEntity getItem(int position) {
        return mDatas.get(position);
    }

    /**
     * 获取条目布局
     *
     * @param parent
     * @return
     */
    public View getView(NoticeView parent) {
        return LayoutInflater.from(parent.getContext()).inflate(R.layout.item, null);
    }

    /**
     * 条目数据适配
     *
     * @param view
     * @param data
     */
    public void setItem(final View view, final NoticeEntity data) {
        TextView tv = (TextView) view.findViewById(R.id.title);
        tv.setText(data.title);
        TextView tag = (TextView) view.findViewById(R.id.tag);
        tag.setText(data.url);
        // 你可以增加点击事件
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 比如打开url
                Toast.makeText(view.getContext(), data.url, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

公告实体

package com.notice.scroll;

public class NoticeEntity {
    public String title;
    public String url;
    public NoticeEntity(String title, String url) {
        super();
        this.title = title;
        this.url = url;
    }
}

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

自定义View

package com.notice.scroll;
public class NoticeView extends LinearLayout {
    //控件高度
    private float mAdverHeight = 0f;
    //间隔时间
    private final int mGap = 4000;
    //动画间隔时间
    private final int mAnimDuration = 1000;
    //显示文字的尺寸
    private final float TEXTSIZE = 20f;
    private NoticeAdapter mAdapter;
    private final float jdAdverHeight = 50;
    //显示的view
    private View mFirstView;
    private View mSecondView;
    //播放的下标
    private int mPosition;
    //线程的标识
    private boolean isStarted;
    //画笔
    private Paint mPaint;
 
    public NoticeView(Context context) {
        this(context, null);
    }
 
    public NoticeView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
 
    public NoticeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }
 
    /**
     * 初始化属性
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        //设置为垂直方向
        setOrientation(VERTICAL);
        //抗锯齿效果
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //获取自定义属性
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.NoticeView);
        mAdverHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, jdAdverHeight, getResources().getDisplayMetrics());
        int gap = array.getInteger(R.styleable.NoticeView_gap, mGap);
        //关闭清空TypedArray,防止内存泄露
        int animDuration = array.getInteger(R.styleable.NoticeView_animDuration, mAnimDuration);
 
        if (mGap <= mAnimDuration) {
            gap = mGap;
            animDuration = mAnimDuration;
        }
        //关闭清空TypedArray
        array.recycle();
    }
 
    /**
     * 设置数据
     */
    public void setAdapter(NoticeAdapter adapter) {
        this.mAdapter = adapter;
        setupAdapter();
    }
 
    /**
     * 开启线程
     */
    public void start() {
 
        if (!isStarted && mAdapter.getCount() > 1) {
            isStarted = true;
            postDelayed(mRunnable, mGap);//间隔mgap刷新一次UI
        }
    }
 
    /**
     * 暂停滚动
     */
    public void stop() {
        //移除handle更新
        removeCallbacks(mRunnable);
        //暂停线程
        isStarted = false;
    }
    /**
     * 设置数据适配
     */
    private void setupAdapter() {
        //移除所有view
        removeAllViews();
        //只有一条数据,不滚东
        if (mAdapter.getCount() == 1) {
            mFirstView = mAdapter.getView(this);
            mAdapter.setItem(mFirstView, mAdapter.getItem(0));
            addView(mFirstView);
        } else {
            //多个数据
            mFirstView = mAdapter.getView(this);
            mSecondView = mAdapter.getView(this);
            mAdapter.setItem(mFirstView, mAdapter.getItem(0));
            mAdapter.setItem(mSecondView, mAdapter.getItem(1));
            //把2个添加到此控件里
            addView(mFirstView);
            addView(mSecondView);
            mPosition = 1;
            isStarted = false;
        }
    }
    /**
     * 测量控件的宽高
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (LayoutParams.WRAP_CONTENT == getLayoutParams().height) {
            getLayoutParams().height = (int) mAdverHeight;
        } else {
            mAdverHeight = getHeight();
        }
 
        if (mFirstView != null) {
            mFirstView.getLayoutParams().height = (int) mAdverHeight;
        }
        if (mSecondView != null) {
            mSecondView.getLayoutParams().height = (int) mAdverHeight;
        }
    }
 
    /**
     * 画布局
     *
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.WHITE);
mPaint.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, TEXTSIZE, getResources().getDisplayMetrics()));
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawText("恭喜你中了5000w大奖", TEXTSIZE, getHeight() * 2 / 3, mPaint);//写文字2/3的高度
    }
    /**
     * 垂直滚蛋
     */
    private void performSwitch() {
        //属性动画控制控件滚动，y轴方向移动
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(mFirstView, "translationY", mFirstView.getTranslationY() - mAdverHeight);
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(mSecondView, "translationY", mSecondView.getTranslationY() - mAdverHeight);
        //动画集
        AnimatorSet set = new AnimatorSet();
        set.playTogether(animator1, animator2);//2个动画一起
        set.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {//动画结束
                mFirstView.setTranslationY(0);
                mSecondView.setTranslationY(0);
                View removedView = getChildAt(0);//获得第一个子布局
                mPosition++;
                //设置显示的布局
                mAdapter.setItem(removedView, mAdapter.getItem(mPosition % mAdapter.getCount()));
                //移除前一个view
                removeView(removedView);
                //添加下一个view
                addView(removedView, 1);
            }
        });
        set.setDuration(mAnimDuration);//持续时间
        set.start();//开启动画
    }
    private AnimRunnable mRunnable = new AnimRunnable();
    private class AnimRunnable implements Runnable {
        @Override
        public void run() {
            performSwitch();
            postDelayed(this, mGap);
        }
    }
 
    /**
     * 销毁View的时候调用
     */
    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        //停止滚动
        stop();
    }
    /**
     * 屏幕 旋转
     *
     * @param newConfig
     */
    @Override
    protected void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
    }
}

......................................................................................................

启动Activity

package com.notice.scroll;

public class ScrollNoticeActivity extends Activity {
    private List<NoticeEntity> mDataList = new ArrayList<NoticeEntity>();
    private TextView mNoticeTextView;
    private NoticeAdapter mNoticeAdapter;
    private NoticeView mNoticeView;
    private Handler mHandler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
            case 1:
                int index = msg.arg1 + 1;
                if (index >= mDataList.size()) {
                    index = 0;
                }
                mNoticeTextView.setText(mDataList.get(index).title);
                mHandler.sendMessageDelayed(mHandler.obtainMessage(1, index, 0), 2000);
                break;

            default:
                break;
            }
        };
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();

    }

    private void initData() {
        mDataList.add(new NoticeEntity("剩余流量查询XXXXXXXX", "最新"));
        mDataList.add(new NoticeEntity("恭喜你中了5000w大奖！", "最火爆"));
        mDataList.add(new NoticeEntity("新入网用户领取福利专区", "HOT"));
        mDataList.add(new NoticeEntity("温馨提示此乃诈骗消息", "new"));
        mNoticeTextView = (TextView) findViewById(R.id.tv_notice);
        mNoticeAdapter = new NoticeAdapter(mDataList);
        mNoticeView = (NoticeView) findViewById(R.id.tv_notices);
        mNoticeView.setAdapter(mNoticeAdapter);
        // 开启线程滚动
        mNoticeView.start();
        getNotices();
    }

    /**
     * 直接通过设置textview达到公告显示的效果
     */
    private void getNotices() {
        if (mDataList.size() > 0) {
            mNoticeTextView.setText(mDataList.get(0).title);
            mHandler.sendMessageDelayed(mHandler.obtainMessage(1, 0, 0), 2000);
        }
    }
}

 

转载于:https://www.cnblogs.com/itcqx/p/5345881.html

datou1209
关注
Android垂直滚动新闻头条
hengzhenglee的博客
04-10 3282
最近做项目要用到淘宝首页头条的那种滚动似的新闻，看了下网上的方法，大概有两种，一种是textview的滚动，另外一种是view的滚动，参考https://github.com/sfsheng0322/MarqueeView，加了自己需求的按照滚动view的思路写了一个，大家可以参考参考； `package com.lzx.autoverticalviewproject.utils;import a
Android 上下滚动类新闻实现
11-09
博客地址：http://blog.csdn.net/wa6392039/article/details/53103746
android垂直公告,【Android之垂直翻页公告】
weixin_35713476的博客
05-27 187
该源码是android studio版本，本文最后提供的是eclipse版本，以供大家学习参考。效果如图： 源码分析：核心类：MarqueeView.java核心思想是根据公告内容的数量动态生成相应数量的TextView对象，将所有的TextView对象加入到MarqueeView对象中，并且为每一个TextView设置监听点击事件，然后翻页轮播。该类继承了ViewFlipper 该类常用的api...
Android-VerticalMarqueeView-垂直跑马灯实现消息公告类滚动效果
08-13
VerticalMarqueeView - 垂直跑马灯,实现消息公告类滚动效果
Android仿淘宝头条垂直滚动，垂直走马灯，公告
06-14
Android仿淘宝头条垂直滚动，垂直走马灯，公告
Android垂直滚动弹幕，垂直滚动新闻，可自定义item布局
10-05
Android垂直滚动弹幕，垂直滚动新闻，可自定义item布局
仿淘宝公告垂直滚动
06-20
在实际项目中，"仿淘宝公告垂直滚动"这一设计可以应用于电商、新闻资讯、社区论坛等多种类型的网站，提供一种有效传递信息的方式。通过学习和掌握相关技术和实现方法，开发者可以为自己的网站增添生动有趣的元素，...
垂直翻页公告
05-16
在IT行业中，"垂直翻页公告"是一种常见的用户界面元素，尤其在电商或者新闻资讯类应用中被广泛应用。这种效果通常被称为"垂直跑马灯"，它的主要功能是展示滚动内容，尤其是当文本内容较长时，能够以垂直翻页的形式...
文本滚动显示.rar
03-19
1. 新闻资讯：滚动显示最新的新闻标题。 2. 社交媒体：微博、推特的动态更新。 3. 股票市场：实时股票价格滚动显示。 4. 电子书阅读：长篇小说或文档的阅读体验。 5. 游戏界面：游戏中的滚动公告或排行榜。 总之，...
AutoScrollTextView
06-10
1. **动态滚动效果**：通过内置的平滑动画机制，AutoScrollTextView 能够确保消息在屏幕上的滚动既流畅又自然。 2. **高度可定制性**： - **文本样式**：支持自定义字体大小、颜色及样式（如加粗、斜体等）。 - ...
简单实现Android滚动公告栏
08-31
主要为大家详细介绍了如何简单实现Android滚动公告栏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
页面中垂直滚动的公告条
10-28
本代码实现首页上的垂直滚动新闻公告条，新闻公告条中的信息自动切换，单击新闻项弹出新闻公告信息。
Android自定义控件之上下轮播通知消息
09-13
仿京东快报效果，自定义控件，每隔3秒轮播一条通知消息~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Android自动滚动的TextView
05-31
Android自动滚动的TextView,源码里面有两个自定义的TextView,一个上下自动滚动，一个左右自动滚动，用起来都非常简单；
android 自定义垂直滚动的多行TextView
01-18
自定义TextView，可实现多行textView的滚动，自定义颜色、大小、滚动速度和行间距
垂直滚动公告栏
攻城狮for Android
10-16 524
import android.content.Context; import android.graphics.Color; import android.os.Handler; import android.os.Message; import android.text.TextUtils; import android.util.AttributeSet; import android.uti
Android之新闻公告垂直翻滚及TextView跑马灯水平滚动
热门推荐
叶已初秋的博客
01-06 2万+
Android之TextView的跑马灯特效
Android：使用ViewFlipper实现上下滚动消息
a526001650a的专栏
08-09 2742
Android：使用ViewFlipper实现上下滚动消息
android 消息垂直滚动轮播控件
newcoderzZ的博客
07-21 6462
android 消息垂直滚动轮播控件 类似淘宝首页的那种消息垂直滚动的控件，实现也很简单，网上也有很多例子，不过网上大多数的例子都是利用android的原生控件ViewFlipper，这个控件我也用了，最后发现很坑爹，有很多问题。 先说使用ViewFliper遇到的问题。首先一个就是ViewFlipper在手机锁屏然后再开屏之后有时候不再自动滚动，看了ViewFlipper的源码就知道，Vie...
Android实现淘宝首页头条垂直滚动效果
在Android开发中，有时我们需要实现一些类似于淘宝首页的动态效果，比如头条新闻的垂直滚动展示。本篇内容将介绍如何在Android中实现这样一个功能，主要涉及Android垂直滚动效果、仿淘宝垂直滚动以及View的垂直滚动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值