使用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,这里就不作介绍了。