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

首页 > 安卓源码 > 2016-08-12 15:25

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

        

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

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/rl_main_advertisement"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="150dip" >  
  6.   
  7.     <android.support.v4.view.ViewPager  
  8.         android:id="@+id/vp_banner"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="150dip" />  
  11.   
  12.     <RelativeLayout  
  13.         android:layout_width="match_parent"  
  14.         android:layout_height="25dip"  
  15.         android:layout_alignParentBottom="true"  
  16.         android:background="@color/bkg_dot_area_of_banner" >  
  17.   
  18.         <LinearLayout  
  19.             android:id="@+id/ll_banner_dot_area"  
  20.             android:layout_width="wrap_content"  
  21.             android:layout_height="wrap_content"  
  22.             android:layout_alignParentRight="true"  
  23.             android:layout_centerVertical="true"  
  24.             android:layout_marginRight="10dip"  
  25.             android:orientation="horizontal" >  
  26.   
  27.         </LinearLayout>  
  28.   
  29.         <TextView  
  30.             android:id="@+id/tv_banner_title"  
  31.             android:layout_width="match_parent"  
  32.             android:layout_height="wrap_content"  
  33.             android:layout_centerVertical="true"  
  34.             android:layout_marginLeft="20dip"  
  35.             android:layout_marginRight="10dip"  
  36.             android:layout_toLeftOf="@id/ll_banner_dot_area"  
  37.             android:singleLine="true"  
  38.             android:text="title1"  
  39.             android:textColor="@color/white"  
  40.             android:textSize="15sp" />  
  41.     </RelativeLayout>  
  42.   
  43. </RelativeLayout>  
        中间的线性布局是为了动态添加dot indecator，很简单，下面是代码：

[java] view plaincopy
  1. package com.amuro.banner_view;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5. import java.util.concurrent.Executors;  
  6. import java.util.concurrent.ScheduledExecutorService;  
  7. import java.util.concurrent.TimeUnit;  
  8.   
  9. import com.amuro.bannerviewtest.R;  
  10.   
  11. import android.annotation.SuppressLint;  
  12. import android.content.Context;  
  13. import android.os.Handler;  
  14. import android.os.Message;  
  15. import android.support.v4.view.ViewPager;  
  16. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  17. import android.util.AttributeSet;  
  18. import android.view.LayoutInflater;  
  19. import android.widget.FrameLayout;  
  20. import android.widget.ImageView;  
  21. import android.widget.ImageView.ScaleType;  
  22. import android.widget.LinearLayout;  
  23. import android.widget.TextView;  
  24.   
  25. public class BannerView extends FrameLayout  
  26. {  
  27.     private ViewPager viewPager;  
  28.     private List<ImageView> imageViews;  
  29.     private List<ImageView> imageViewDots;  
  30.     private LinearLayout linearLayoutDotArea;  
  31.     private TextView textViewBanner;  
  32.       
  33.     private ScheduledExecutorService scheduledExecutorService;  
  34.     private int currentItem = 0;  
  35.   
  36.     @SuppressLint("HandlerLeak")   
  37.     private Handler handler = new Handler()  
  38.     {  
  39.         public void handleMessage(Message msg)   
  40.         {  
  41.             viewPager.setCurrentItem(currentItem);  
  42.         }  
  43.     };  
  44.       
  45.     public BannerView(Context context, AttributeSet attrs)  
  46.     {  
  47.         super(context, attrs);  
  48.         LayoutInflater.from(context).inflate(R.layout.banner_view_layout, this);  
  49.         initView();  
  50.     }  
  51.   
  52.     private void initView()  
  53.     {  
  54.         viewPager = (ViewPager)findViewById(R.id.vp_banner);  
  55.         textViewBanner = (TextView)findViewById(R.id.tv_banner_title);  
  56.         linearLayoutDotArea = (LinearLayout)findViewById(R.id.ll_banner_dot_area);  
  57.     }  
  58.       
  59.     public void setView(final int[] imageIds, final String[] titles, int count)  
  60.     {  
  61.         initImageViews(imageIds, count);  
  62.         initImageViewDots(count);  
  63.           
  64.         viewPager.setAdapter(new BannerViewPagerAdapter(imageViews));  
  65.         viewPager.setOnPageChangeListener(new OnPageChangeListener()  
  66.         {  
  67.             private int oldPosition = 0;  
  68.               
  69.             @Override  
  70.             public void onPageSelected(int position)  
  71.             {  
  72.                 imageViewDots.get(position).setImageResource(R.drawable.icon_dot_selected);  
  73.                 imageViewDots.get(oldPosition).setImageResource(R.drawable.icon_dot_unselected);  
  74.                   
  75.                 oldPosition = position;  
  76.                 currentItem = position;  
  77.                   
  78.                 textViewBanner.setText(titles[position]);  
  79.             }  
  80.               
  81.             @Override  
  82.             public void onPageScrolled(int position, float positionOffset,  
  83.                     int positionOffsetPixels)  
  84.             {  
  85.                   
  86.             }  
  87.               
  88.             @Override  
  89.             public void onPageScrollStateChanged(int state)  
  90.             {  
  91.                   
  92.             }  
  93.         });  
  94.     }  
  95.       
  96.     private void initImageViews(int[] imageIds, int count)  
  97.     {  
  98.         imageViews = new ArrayList<ImageView>();  
  99.         for(int i = 0;i < count;i++)  
  100.         {  
  101.             ImageView imageView = new ImageView(getContext());  
  102.             imageView.setImageResource(imageIds[i]);  
  103.             imageView.setScaleType(ScaleType.FIT_XY);  
  104.             imageViews.add(imageView);  
  105.         }  
  106.     }  
  107.       
  108.     private void initImageViewDots(int count)  
  109.     {  
  110.         imageViewDots = new ArrayList<ImageView>();  
  111.           
  112.         for(int i = 0; i < count; i++)  
  113.         {  
  114.             ImageView imageView = new ImageView(getContext());  
  115.             if(i == 0)  
  116.             {  
  117.                 imageView.setImageResource(R.drawable.icon_dot_selected);  
  118.             }  
  119.             else  
  120.             {  
  121.                 android.widget.LinearLayout.LayoutParams params =   
  122.                         new android.widget.LinearLayout.LayoutParams(  
  123.                                 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
  124.                 params.setMargins(DisplayUtils.dip2px(getContext(), 5), 0, 0, 0);  
  125.                   
  126.                 imageView.setImageResource(R.drawable.icon_dot_unselected);  
  127.                 imageView.setLayoutParams(params);  
  128.                   
  129.             }  
  130.             linearLayoutDotArea.addView(imageView);  
  131.             imageViewDots.add(imageView);  
  132.         }  
  133.           
  134.     }  
  135.   
  136.     public void startPlay()  
  137.     {  
  138.         scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();    
  139.         scheduledExecutorService.scheduleAtFixedRate(new ViewPagerAutoScrollTask(), 3, 3, TimeUnit.SECONDS);  
  140.     }  
  141.       
  142.     public void stopPlay()  
  143.     {  
  144.         scheduledExecutorService.shutdown();    
  145.     }  
  146.       
  147.     private class ViewPagerAutoScrollTask implements Runnable   
  148.     {    
  149.             
  150.         public void run()   
  151.         {    
  152.             synchronized (viewPager)   
  153.             {    
  154.                 currentItem = (currentItem + 1) % imageViews.size();    
  155.                 handler.obtainMessage().sendToTarget();  
  156.             }    
  157.         }    
  158.     
  159.     }    
  160. }  
        这个BannerView可由调用者自行设置数量，动态添加view，在setView的时候把资源文件传入就可以了。

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

        

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

推荐阅读