码迷,mamicode.com
首页 > 移动开发 > 详细

APP中常见上下循环滚动通知的简单实现,点击可进入详情

时间:2015-04-13 16:46:57      阅读:1105      评论:0      收藏:0      [点我收藏+]

标签:上下循环滚动   滚动通知   上下滚动消息   循环上下滚动通知   

  关注finddreams博客,一起分享一起进步!http://blog.csdn.net/finddreams/article/details/45025865

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

   这样的效果图是很多App中常见的布局,上面一个循环滚动的广告条,紧接着下面又是一个不断上下滚动的通知。关于循环滚动的广告条,我在之前的博客已经介绍过了,想了解的可以去看看,Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址
  
  今天我们主要着重来讲一下上下循环滚动通知实现的思路,实现的方式可能有多种,这里介绍一种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布局文件的代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/homepage_notice_ll"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/gray_bg"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="@dimen/margin_12"
            android:paddingLeft="@dimen/vi_margin"
            android:paddingRight="@dimen/margin_8"
            android:paddingTop="@dimen/margin_12"
            android:src="@drawable/notice_icon" />

        <ViewFlipper
            android:id="@+id/homepage_notice_vf"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    </LinearLayout>

</LinearLayout>

  然后就是通过setView根据集和中的位置把TextView放入到ViewFlipper中进行显示。同时给ViewFlipper加上动画效果,最后调用showNext();方法,循环到下一个TextView的显示。
  同时我们给了TextView注册了点击事件,当点击到TextView的时候,根据这个TextView的位置,获得url地址,然后进入WebView的界面。
  
 动画文件.in_bottomtop.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromYDelta="100.0%p"
        android:toYDelta="0.0" />

    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />

</set>

动画文件out_topbottom.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromYDelta="0.0"
        android:toYDelta="100.0%p" />

    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

</set>

解释一下这段代码:

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://github.com/finddreams/ADBannerUI
  
  
 

APP中常见上下循环滚动通知的简单实现,点击可进入详情

标签:上下循环滚动   滚动通知   上下滚动消息   循环上下滚动通知   

原文地址:http://blog.csdn.net/finddreams/article/details/45026263

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!