使用ViewFLow制作循环滑动广告牌

           广告牌是android客户端中常见得一种效果,那么我们今天就用viewflow这个开源控件来制作一个可以循环滑动的广告牌。、

      首先可以从git上下载插件，然后集成到我们的项目中。地址：https://github.com/pakerfeldt/android-viewflow

      然后我们先看一下效果图

     




    额....效果还可以吧。下面是布局和主要代码

   

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<RelativeLayout
android:id="@+id/framelayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<!-- 广告牌 -->
<com.example.bascialframeworlk.android.view.viewflow.ViewFlow
android:id="@+id/ViewFlow"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</com.example.bascialframeworlk.android.view.viewflow.ViewFlow>

<!-- 外层现行布局作为背景浮层,做出半透明效果 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:padding="5dp"
android:background="#40000000">
<!-- 用于放置添加的小球 -->
<LinearLayout
android:id="@+id/redLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="1dip" >
</LinearLayout>
</LinearLayout>
</RelativeLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.8">
</LinearLayout>
<span style="font-family: Arial, Helvetica, sans-serif;"></LinearLayout></span>

     在使用ViewFlow之前,我们要为他设置一个Adapter.最简单的方式直继承BaseAdapter。代码如下

    

package com.example.viewflowdemo;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter{
private Context mContext;
private LayoutInflater mInflater;
private final int[] ids = {R.drawable.i1,R.drawable.i2,R.drawable.i3,R.drawable.i4,R.drawable.i5};//存放图片资源的数组,这里的数据都是静态的.

public ImageAdapter(Context context) {
this.mContext = context;
mInflater = LayoutInflater.from(mContext);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return Integer.MAX_VALUE; // 返回很大的值使得getView中的position不断增大来实现循环
}

@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return ids[position%5];
}

@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {//渲染布局得到每个item,这里就不写view复用了,人懒.....
// TODO Auto-generated method stub
if(convertView==null){
convertView=mInflater.inflate(R.layout.image_item,null);
}
ImageView img=(ImageView)convertView.findViewById(R.id.img_td);
img.setBackgroundResource(ids[position%5]);
return convertView;
}

}

  item的布局,很简单不做介绍.

<?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="match_parent"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:id="@+id/img_td"
/>

</LinearLayout>

    最后主界面代码:

    

package com.example.viewflowdemo;

import java.util.ArrayList;
import java.util.List;

import com.example.bascialframeworlk.android.view.viewflow.ViewFlow;
import com.example.bascialframeworlk.android.view.viewflow.ViewFlow.ViewSwitchListener;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {
ViewFlow viewFlow;
LinearLayout redLayout;//放置小球的布局.
List<TextView> points = null;//用于存放5个小球,以便于在滑动时候改变他们的背景色
LinearLayout.LayoutParams params;//用于设置5个小球的位置大小参数.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewFlow = (ViewFlow)findViewById(R.id.ViewFlow);
redLayout = (LinearLayout)findViewById(R.id.redLayout);
initData();
initAction();
}

private void initData(){
viewFlow.setAdapter(new ImageAdapter(this));
viewFlow.setmSideBuffer(5); //实际图片张数
viewFlow.setTimeSpan(4000);//设置轮播时间间隔
viewFlow.setSelection(5 * 1000); // 设置初始位置,这里让viewflow的item位置放到5000,可以循环滑动.有更好的方法可以留言,欢迎指教.
viewFlow.startAutoFlowTimer(); // 启动自动播放

points = new ArrayList<TextView>();
//初始化小球的大小位置
params = new LinearLayout.LayoutParams(16, 16);
params.leftMargin = 8;
params.rightMargin =8;

for (int i = 0; i < 5; i++) {
TextView tv = new TextView(this);// 初始化TextView,即每个小球的位置参数背景
tv.setLayoutParams(params);
if (i==0) {
tv.setBackgroundResource(R.drawable.circle_red);
} else {
tv.setBackgroundResource(R.drawable.circle_white);
}

tv.setGravity(Gravity.CENTER);//设置居中
points.add(tv);//添加到小球的数组中
redLayout.addView(tv);//添加进浮层中.
}
}

private void initAction(){
viewFlow.setOnViewSwitchListener(new ViewSwitchListener(){//设置监听器,广告牌滑动的时候改变小球背景色.
public void onSwitched(View view, int position) {
for(int i=0;i<5;i++){
if(position%5==i){
points.get(i).setBackgroundResource(R.drawable.circle_red);
}
else{
points.get(i).setBackgroundResource(R.drawable.circle_white);
}
}

}
});
}
}

  补充： 需要补充一点的是,下面的小球作为指示器,在广告牌滑动的过程中是不会出现的。也就是说小球不会在间隙之前出现。如果想要在滑动的过程中，做到小球一直出现滑动的效果可以使用ViewFlow自带的CircleFlowIndicator,这里就不作介绍了。