自定义类似优酷首页的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的时候把资源文件传入就可以了。

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



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