天天看點

BtCarousel輪播元件 - 一款易于使用,定制化的輪播元件BtCarousel

BtCarousel

A Carousel Easy To Use

項目位址BtCarousel

個人部落格 BT SPACE

我的 github

示範

BtCarousel輪播元件 - 一款易于使用,定制化的輪播元件BtCarousel

圖檔幀數較低諒解~

背景:

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

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

使用:

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
  • 目錄改動,按類型分類
  • 增加樣式設定方法
  • 增加示範界面