关注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.ｘｍｌ，然后在你想要显示的地方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