使用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);}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn Integer.MAX_VALUE; // 返回很大的值使得getView中的position不断增大来实现循环}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn ids[position%5];}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {//渲染布局得到每个item,这里就不写view复用了,人懒.....// TODO Auto-generated method stubif(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个小球的位置大小参数.@Overrideprotected 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,这里就不作介绍了。