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

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




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

[html] view
plaincopy

<?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，很简单，下面是代码：

[java] view
plaincopy

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的时候把资源文件传入就可以了。

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




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