BtCarousel輪播元件 - 一款易於使用,定製化的輪播元件

bt發表於2018-06-30
元件

BtCarousel

A Carousel Easy To Use

專案地址BtCarousel 個人部落格 BT SPACE 我的 github

演示

演示圖片

圖片幀數較低諒解~

背景:

筆者公司的業務程式碼屬於比較定製化的型別,即針對於某一環境所編寫的程式碼,無法進行程式碼重用,並且如果需求有更改,程式碼改動量也極其巨大

一直都有想法去編寫一些耦合性比較低的元件供日常使用,對以後的工作和學習來說都是事半功倍

使用:

Step1 : 將以下佈局加入layout中,寬高可以自行設定或者使用 CarouselView..scale(float scale)方法進行比例設定.

<com.bt.carousel.carousel.Carousel.view.CarouselView
        android:id="@+id/carousel_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center">
</com.bt.carousel.carousel.Carousel.view.CarouselView>
複製程式碼

Step2 : 自定義Apdapter繼承自CarouselAdapter

public class CarouselAdapter extends CarouselBaseAdapter {

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

    /**
     * @param viewHolder
     * @param position
     * 設定根檢視以及元素,點選事件等
     */
    @Override
    protected void convert(PagerViewHolder viewHolder, final int position) {
        viewHolder.setConvertView(R.layout.item).setImageResource(R.id.home_banner_item_img,
                getData().get(position).toString(),R.drawable.default_bg,R.drawable.default_bg);     
    }
}
複製程式碼

convert方法內繫結檢視及設定內容使用鏈式呼叫方法.

  • setConvertView(@LayoutRes int layoutId) (必需) 設定每個item的根檢視
  • setText(@IdRes int viewId, CharSequence value) 設定對應viewId的填充文字
  • setImageResource(@IdRes int viewId, @DrawableRes int imageResId) 設定對應viewId的背景圖/drawable(本地)
  • setImageResource(@IdRes int viewId,CharSequence imageUrl, @DrawableRes int defaultImageResId,@DrawableRes int errorImageResId) 設定對應viewId載入網路圖片,預設佔點陣圖及錯誤佔點陣圖.如不需要可將引數置0

Step3 : 例項化Apdater,ViewPager,Indicator(可選)並與CarouselView的例項進行繫結.

//獲取例項
mCarouselView = (CarouselView) findViewById(R.id.carousel_view);
//例項化adapter
CarouselAdapter carouselAdapter = new CarouselAdapter(this);
//例項化ViewPager
BtViewPager viewPager = new BtViewPager(this);
//構建viewPager
viewPager.build();
//例項化Indicator ,此處使用圓形canvas繪製
CanvasIndicator canvasIndicator = new CanvasIndicator(this,CanvasIndicator.CIRCLE_STYLE);
//構建Indicator
canvasIndicator.build();
//輪播構建
mCarouselView.viewPager(viewPager).adapter(carouselAdapter).indicator(canvasIndicator).build();
複製程式碼

Finish : 輪播正常顯示啦.或許現在的介面很醜,你可以通過以下方法去定製.

擴充套件

每個元件內部均可自行定製.高度可擴充套件並且不會出現相容問題.

更新日誌

2018-6-29

  • 程式碼重構,元件各自獨立,降低耦合.
  • 元件優化,可自行選擇需要的元件進行載入.
  • 程式碼優化,剔除冗餘程式碼,程式碼高效利用.
  • 修改作者名稱.(原工號)

2018-6-18

  • 修復設定樣式後無法立即生效的BUG
  • 修復canvas繪製有延遲的BUG
  • 目錄改動,按型別分類
  • 增加樣式設定方法
  • 增加演示介面

相關文章