Customize BannerView slide display similar to Youku homepage,

Customize BannerView slide display similar to Youku homepage,

Nima: Recently, a user-defined view could not stop playing hight. Today I want to encapsulate a banner column similar to the title of Youku homepage. I will add a title Display Based on this, youku's banner is like:

The first is the layout file, which is naturally the main feature of ViewPager, with the underlying dot indicator and title columns:

<?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>

The linear layout in the middle is to dynamically add dot indecator, which is very simple. The following code is used:

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;@Overridepublic 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]);}@Overridepublic void onPageScrolled(int position, float positionOffset,int positionOffsetPixels){}@Overridepublic 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();            }          }        }  }

This BannerView can be set by the caller to dynamically add views. When setView is enabled, the resource file can be passed in.

Okay, today it's not forced. Let's go to the end:

Ah ah ......