自定义类似优酷首页的BannerView幻灯片展示

尼玛，最近自定义view玩hight了根本停不下来，今天想封装一个类似优酷首页title的banner栏，我会在这个基础上加一个title的展示，优酷的banner如下图：

首先是布局文件，自然是ViewPager主打，配上底层的dot indicator和title栏：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_main_advertisement"
    android:layout_width="match_parent"
    android:layout_height="150dip" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_banner"
        android:layout_width="match_parent"
        android:layout_height="150dip" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="25dip"
        android:layout_alignParentBottom="true"
        android:background="@color/bkg_dot_area_of_banner" >

        <LinearLayout
            android:id="@+id/ll_banner_dot_area"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dip"
            android:orientation="horizontal" >

        </LinearLayout>

        <TextView
            android:id="@+id/tv_banner_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="10dip"
            android:layout_toLeftOf="@id/ll_banner_dot_area"
            android:singleLine="true"
            android:text="title1"
            android:textColor="@color/white"
            android:textSize="15sp" />
    </RelativeLayout>

</RelativeLayout>

中间的线性布局是为了动态添加dot indecator，很简单，下面是代码：

package com.amuro.banner_view;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

import com.amuro.bannerviewtest.R;

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.TextView;

public class BannerView extends FrameLayout
{
	private ViewPager viewPager;
	private List<ImageView> imageViews;
	private List<ImageView> imageViewDots;
	private LinearLayout linearLayoutDotArea;
	private TextView textViewBanner;

	private ScheduledExecutorService scheduledExecutorService;
	private int currentItem = 0;

	@SuppressLint("HandlerLeak")
	private Handler handler = new Handler()
	{
		public void handleMessage(Message msg)
		{
			viewPager.setCurrentItem(currentItem);
		}
	};

	public BannerView(Context context, AttributeSet attrs)
	{
		super(context, attrs);
		LayoutInflater.from(context).inflate(R.layout.banner_view_layout, this);
		initView();
	}

	private void initView()
	{
		viewPager = (ViewPager)findViewById(R.id.vp_banner);
		textViewBanner = (TextView)findViewById(R.id.tv_banner_title);
		linearLayoutDotArea = (LinearLayout)findViewById(R.id.ll_banner_dot_area);
	}

	public void setView(final int[] imageIds, final String[] titles, int count)
	{
		initImageViews(imageIds, count);
		initImageViewDots(count);

		viewPager.setAdapter(new BannerViewPagerAdapter(imageViews));
		viewPager.setOnPageChangeListener(new OnPageChangeListener()
		{
			private int oldPosition = 0;

			@Override
			public void onPageSelected(int position)
			{
				imageViewDots.get(position).setImageResource(R.drawable.icon_dot_selected);
				imageViewDots.get(oldPosition).setImageResource(R.drawable.icon_dot_unselected);

				oldPosition = position;
				currentItem = position;

				textViewBanner.setText(titles[position]);
			}

			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels)
			{

			}

			@Override
			public void onPageScrollStateChanged(int state)
			{

			}
		});
	}

	private void initImageViews(int[] imageIds, int count)
	{
		imageViews = new ArrayList<ImageView>();
		for(int i = 0;i < count;i++)
		{
			ImageView imageView = new ImageView(getContext());
			imageView.setImageResource(imageIds[i]);
			imageView.setScaleType(ScaleType.FIT_XY);
			imageViews.add(imageView);
		}
	}

	private void initImageViewDots(int count)
	{
		imageViewDots = new ArrayList<ImageView>();

		for(int i = 0; i < count; i++)
		{
			ImageView imageView = new ImageView(getContext());
			if(i == 0)
			{
				imageView.setImageResource(R.drawable.icon_dot_selected);
			}
			else
			{
				android.widget.LinearLayout.LayoutParams params =
						new android.widget.LinearLayout.LayoutParams(
								LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
				params.setMargins(DisplayUtils.dip2px(getContext(), 5), 0, 0, 0);

				imageView.setImageResource(R.drawable.icon_dot_unselected);
				imageView.setLayoutParams(params);

			}
			linearLayoutDotArea.addView(imageView);
			imageViewDots.add(imageView);
		}

	}

	public void startPlay()
	{
		scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        scheduledExecutorService.scheduleAtFixedRate(new ViewPagerAutoScrollTask(), 3, 3, TimeUnit.SECONDS);
	}

	public void stopPlay()
	{
		scheduledExecutorService.shutdown();
	}

	private class ViewPagerAutoScrollTask implements Runnable
	{  

        public void run()
        {
            synchronized (viewPager)
            {
                currentItem = (currentItem + 1) % imageViews.size();
                handler.obtainMessage().sendToTarget();
            }
        }  

    }
}

这个BannerView可由调用者自行设置数量，动态添加view，在setView的时候把资源文件传入就可以了。

好了，今天不装逼了，上一下最终效果图：

啊啊啊啊啊啊啊，炮姐好帅啊……