博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
APP中常见上下循环滚动通知的简单实现,点击可进入详情
阅读量:4954 次
发布时间:2019-06-12

本文共 3140 字,大约阅读时间需要 10 分钟。

关注finddreams博客,一起分享一起进步!

  对于能上下滚动的消息,我们并不陌生,常常在一些电商类的APP上有看到,比如淘宝之类的。大概的效果是一个不断上下循环滚动的通知,点击这个通知即可进去消息的详情界面。运行效果如下: 

 这里写图片描述 
(PS:别只顾看美女了,通知消息在下面)

   这样的效果图是很多App中常见的布局,上面一个循环滚动的广告条,紧接着下面又是一个不断上下滚动的通知。关于循环滚动的广告条,我在之前的博客已经介绍过了,想了解的可以去看看,。 

   
  今天我们主要着重来讲一下上下循环滚动通知实现的思路,实现的方式可能有多种,这里介绍一种ViewFlipper+动画来实现的方法;主要代码如下: 

private void initRollNotice() {        FrameLayout main_notice = (FrameLayout) findViewById(R.id.main_notice);        notice_parent_ll = (LinearLayout) getLayoutInflater().inflate(                R.layout.layout_notice, null);        notice_ll = ((LinearLayout) this.notice_parent_ll .findViewById(R.id.homepage_notice_ll)); notice_vf = ((ViewFlipper) this.notice_parent_ll .findViewById(R.id.homepage_notice_vf)); main_notice.addView(notice_parent_ll); TimerTask task = new TimerTask() { @Override public void run() { runOnUiThread(new Runnable() { @Override public void run() { moveNext(); Log.d("Task", "下一个"); } }); } }; Timer timer = new Timer(); timer.schedule(task, 0, 4000); } private void moveNext() { setView(this.mCurrPos, this.mCurrPos + 1); this.notice_vf.setInAnimation(this, R.anim.in_bottomtop); this.notice_vf.setOutAnimation(this, R.anim.out_bottomtop); this.notice_vf.showNext(); } private void setView(int curr, int next) { View noticeView = getLayoutInflater().inflate(R.layout.notice_item, null); TextView notice_tv = (TextView) noticeView.findViewById(R.id.notice_tv); if ((curr < next) && (next > (titleList.size() - 1))) { next = 0; } else if ((curr > next) && (next < 0)) { next = titleList.size() - 1; } notice_tv.setText(titleList.get(next)); notice_tv.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { Bundle bundle = new Bundle(); bundle.putString("url", linkUrlArray.get(mCurrPos)); bundle.putString("title", titleList.get(mCurrPos)); Intent intent = new Intent(MainActivity.this, BaseWebActivity.class); intent.putExtras(bundle); startActivity(intent); } }); if (notice_vf.getChildCount() > 1) { notice_vf.removeViewAt(0); } notice_vf.addView(noticeView, notice_vf.getChildCount()); mCurrPos = next; }

 

  从代码中我们可以看到先加载一个布局文件layout_notice.xml,然后在你想要显示的地方addView加进去。这样消息通知View就可以显示到你指定的地方。 

   
  layout_notice.xml布局文件的代码:

 

  然后就是通过setView根据集和中的位置把TextView放入到ViewFlipper中进行显示。同时给ViewFlipper加上动画效果,最后调用showNext();方法,循环到下一个TextView的显示。 

  同时我们给了TextView注册了点击事件,当点击到TextView的时候,根据这个TextView的位置,获得url地址,然后进入WebView的界面。 
   
 动画文件.in_bottomtop.xml:

 

动画文件out_topbottom.xml:

 

解释一下这段代码:

TimerTask task = new TimerTask() {            @Override            public void run() { runOnUiThread(new Runnable() { @Override public void run() { moveNext(); Log.d("Task", "下一个"); } }); } }; Timer timer = new Timer(); timer.schedule(task, 0, 4000);

 

  实现定时的不断上下循环滚动,我们这里使用的是一个TimeTask的类,为了能够动态在子线程中修改UI,我们调用了一个runOnUiThread方法,该方法是运行在UI线程中的,所以可以对UI进行更改,不会报错。 

  这是上下循环滚动消息的简单实现,其实我们还可以通过监听onTouch事件,做到让消息滚动的方向随着手指滑动的方向变化,比如说手指上滑则可以显示上一个消息,这样体验就更加的人性化。 
  这个功能是很有必要的添加上去的,因为时间的关系就先做这么多,如果哪位大神能帮忙实现这个功能,自当感激不尽。 
  代码是加入到之前滚动广告条的代码中了,并会保持更新,这也是使用GitHub来托管代码的好处。 
   

 

转载于:https://www.cnblogs.com/tc310/p/5345157.html

你可能感兴趣的文章
iPhone在日本最牛,在中国输得最慘
查看>>
动态方法决议 和 消息转发
查看>>
WPF自定义搜索框代码分享
查看>>
js 基础拓展
查看>>
SpringBoot访问html访问不了的问题
查看>>
{width=200px;height=300px;overflow:hidden}
查看>>
C#生成随机数
查看>>
CSS基础学习 20.CSS媒体查询
查看>>
2019春季第十一周作业
查看>>
洛谷P4591 [TJOI2018]碱基序列 【KMP + dp】
查看>>
iOS CoreData介绍和使用(以及一些注意事项)
查看>>
OS笔记047代理传值和block传值
查看>>
Android应用程序与SurfaceFlinger服务的连接过程分析
查看>>
coco2dx服务器简单例子
查看>>
Java回顾之多线程
查看>>
sqlite
查看>>
机电行业如何进行信息化建设
查看>>
Windows Azure Platform Introduction (4) Windows Azure架构
查看>>
【转】chrome developer tool 调试技巧
查看>>
mahout运行测试与kmeans算法解析
查看>>