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地址