1. 程式人生 > >RecyclerView實現廣告輪播圖(一)

RecyclerView實現廣告輪播圖(一)

  平時都是用RecyclerView實現列表,RecyclerView的強大毋庸置疑,今天就用它來實現廣告輪播圖。
  
  效果如下

  首先,在activity_main.xml裡定義佈局
  

<RelativeLayout
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
android:layout_width="match_parent" android:layout_height="144dp"> </android.support.v7.widget.RecyclerView> </RelativeLayout>

  然後定義列表的item佈局—-item_image.xml:

<LinearLayout
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent"
android:orientation="vertical"> <ImageView android:id="@+id/item_image" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop"/> </LinearLayout>

  然後是Adapter,在Adapter初始化時要傳入圖片列表list:

public class
BannerAdapter extends RecyclerView.Adapter<BannerAdapter.ViewHolder> {
private List<Integer> list; private Context context; public BannerAdapter(Context context,List<Integer> list){ this.list=list; this.context=context; } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.item_image,parent,false); return new ViewHolder(view); } @Override public void onBindViewHolder(ViewHolder holder, int position) { Glide.with(context).load(list.get(position%list.size())).into(holder.imageView); } @Override public int getItemCount() { return Integer.MAX_VALUE; } class ViewHolder extends RecyclerView.ViewHolder { private ImageView imageView; public ViewHolder(View itemView) { super(itemView); imageView= (ImageView) itemView.findViewById(R.id.item_image); } } }

  
  上面程式碼裡需要注意的地方有兩處。
  
  第一處是getItemCount() 返回的是Integer.MAX_VALUE。這是因為廣告輪播圖是無限輪播,getItemCount() 返回的是Adapter中的總專案數,這樣才能使RecyclerView能一直滾動。
  
  第二處是onBindViewHolder()中的 position%list.size() ,表示position對圖片列表list取餘,這樣list.get(position%list.size())才能按順序迴圈展示圖片。

  
  MainActivity.java程式碼如下:

public class MainActivity extends AppCompatActivity {
    private List<Integer> list = new ArrayList<>(4);

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //存入圖片
        list.add(R.drawable.b1);
        list.add(R.drawable.b2);
        list.add(R.drawable.b3);
        list.add(R.drawable.b4);


        BannerAdapter adapter = new BannerAdapter(this, list);
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setHasFixedSize(true);
        recyclerView.setAdapter(adapter);
        recyclerView.scrollToPosition(list.size()*10);

    }
}

   需要注意的是LinearLayoutManager 第二個引數表示佈局方向,平時預設是垂直的,也就是我們常見的列表樣式。這裡輪播廣告要用為LinearLayoutManager.HORIZONTAL,水平方向。
   還有一點需要注意,recyclerView.scrollToPosition(list.size()*10)這句使RecyclerView一開始位於 list.size()*10 處,避免了一開始position為0不能前滑的尷尬。
  
  由於廣告是一頁一頁的划過去,所以我們還需要用到一個類,SnapHelper的子類PagerSnapHelper,用起來很簡單,兩句話。直接追加到上面的recyclerView.setAdapter(adapter) 後面。

public class MainActivity extends AppCompatActivity {
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        ...
        recyclerView.setAdapter(adapter);

        PagerSnapHelper snapHelper = new PagerSnapHelper();
        snapHelper.attachToRecyclerView(recyclerView);

    }
}

  然後加入自動輪播,此處使用ScheduledExecutorService 來完成。

        ScheduledExecutorService scheduledExecutorService = Executors.newScheduledThreadPool(1);
        scheduledExecutorService.scheduleAtFixedRate(new Runnable() {
            @Override
            public void run() {
                recyclerView.smoothScrollToPosition(layoutManager.findFirstVisibleItemPosition() + 1);
            }
        }, 2000, 2000, TimeUnit.MILLISECONDS);

這段程式碼表示2秒後每過2秒執行一次run()裡的程式 。layoutManager.findFirstVisibleItemPosition() 表示得到當前RecyclerView第一個能看到的item的位置。由於廣告是每次展示一張,所以得到的就是當前圖片的position。recyclerView.smoothScrollToPosition(int position)表示滑動到某個position。所以上面的程式碼就表示每過2秒滑動到下個position,以此來完成自動輪播。

  還有一點還要改進,程式執行起來後會發現自動輪播切換圖片時速度太快了,這個怎麼解決呢?
  點開LinearLayoutManager的原始碼,查詢smoothScrollToPosition()方法。
  
這裡滑動用到了LinearSmoothScroller,繼續點選去,裡面有一個calculateSpeedPerPixel()方法。

  官方註釋:計算滾動速度。如果返回值是2毫秒,這表示著滾動1000畫素需要2秒。
所以我們繼承LinearLayoutManager,重寫smoothScrollToPosition()方法,並將裡面的修改LinearSmoothScroller的這個方法返回值修改。

  新建SmoothLinearLayoutManager.java 檔案,程式碼如下:
  

public class SmoothLinearLayoutManager extends LinearLayoutManager {

    public SmoothLinearLayoutManager(Context context) {
        super(context);
    }

    public SmoothLinearLayoutManager(Context context, int orientation, boolean reverseLayout) {
        super(context, orientation, reverseLayout);
    }

    @Override
    public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {
        LinearSmoothScroller linearSmoothScroller =
                new LinearSmoothScroller(recyclerView.getContext()) {
                    protected float calculateSpeedPerPixel(DisplayMetrics displayMetrics) {
                        return 0.2f; //返回0.2
                    }
                };
        linearSmoothScroller.setTargetPosition(position);
        startSmoothScroll(linearSmoothScroller);
    }

}

 
  
  程式寫到這裡,廣告輪播圖已初具雛形了,最後還差個指示器。
  
  顯示指示器上的紅點需要得到當前展示的廣告輪播圖片的position。RecyclerView有個addOnScrollListener()方法,可以監聽當前滑動狀態。所以程式碼如下:
  

        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                if (newState == RecyclerView.SCROLL_STATE_IDLE) {
                    int i = layoutManager.findFirstVisibleItemPosition() % list.size();
                    //得到指示器紅點的位置
                }
            }
        });

onScrollStateChangedd的 newState 引數有三種狀態SCROLL_STATE_IDLE、SCROLL_STATE_DRAGGING和SCROLL_STATE_SETTLING,分佈表示靜止狀態,拖拽狀態和手指離開後的慣性滾動狀態。所以這裡當RecyclerView的狀態為SCROLL_STATE_IDLE時得到當前圖片的position,然後與圖片列表取餘就得到指示器紅點的位置。

  程式寫到這裡就差不多了。剩下的指示器部分是自定義view,比較簡單,就不講解了,程式碼直接給出。
  
   github地址