天天看點

簡單實用第三方XBanner

app build中導入兩個依賴:

implementation ‘com.xhb:xbanner:1.3.1’

implementation ‘com.github.bumptech.glide:glide:4.9.0’

清單檔案權重限:

布局代碼

<com.stx.xhb.xbanner.XBanner

xmlns:app=“http://schemas.android.com/apk/res-auto”

android:id="@+id/banner_1"

android:layout_width=“match_parent”

android:layout_height=“180dp”

app:AutoPlayTime=“3000”

app:pointsContainerBackground="#44aaaaaa"

app:pointNormal="@drawable/ic_launcher_background"

app:pointSelect="@drawable/selector_banner_point"

app:pointsPosition=“RIGHT”

app:tipTextSize=“12sp”

app:isShowNumberIndicator=“true”

app:isShowIndicatorOnlyOne=“true”

app:pageChangeDuration=“800”/>

java代碼:

public class MainActivity extends AppCompatActivity {

private XBanner banner;
           

// List imgesUrl = new ArrayList<>();

// imgesUrl.add(“http://img3.fengniao.com/forum/attachpics/913/114/36502745.jpg”);

// imgesUrl.add(“http://imageprocess.yitos.net/images/public/20160910/99381473502384338.jpg”);

// imgesUrl.add(“http://imageprocess.yitos.net/images/public/20160910/77991473496077677.jpg”);

// imgesUrl.add(“http://imageprocess.yitos.net/images/public/20160906/1291473163104906.jpg”);

private String[] imgesUrl={“https://goss.veer.com/creative/vcg/veer/612/veer-153374751.jpg”,

“https://goss.veer.com/creative/vcg/veer/612/veer-143818162.jpg”,

“https://goss2.veer.com/creative/vcg/veer/612/veer-147160401.jpg”};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

banner = (XBanner) findViewById(R.id.banner_1);

// 為XBanner綁定資料
    banner .setData(Arrays.asList(imgesUrl),null);//第二個參數為提示文字資源集合
    // XBanner适配資料
    banner.setmAdapter(new XBanner.XBannerAdapter() {
        @Override
        public void loadBanner(XBanner banner, Object model, View view, int position) {
            Glide.with(MainActivity.this).load(imgesUrl[position]).into((ImageView) view);
        }


    });
    // 設定XBanner的頁面切換特效,選擇一個即可,總的大概就這麼多效果啦,歡迎使用
    banner.setPageTransformer(Transformer.Default);//橫向移動

    banner.setPageTransformer(Transformer.Alpha); //漸變,效果不明顯

    banner.setPageTransformer(Transformer.Rotate);  //單頁旋轉

    banner.setPageTransformer(Transformer.Cube);    //立體旋轉

    banner.setPageTransformer(Transformer.Flip);  // 反轉效果

    banner.setPageTransformer(Transformer.Accordion); //三角換頁

    banner.setPageTransformer(Transformer.ZoomFade); // 縮小本頁,同時放大另一頁

    banner.setPageTransformer(Transformer.ZoomCenter); //本頁縮小一點,另一頁就放大

    banner.setPageTransformer(Transformer.ZoomStack); // 本頁和下頁同僚縮小和放大

    banner.setPageTransformer(Transformer.Stack);  //本頁和下頁同時左移

    banner.setPageTransformer(Transformer.Depth);  //本頁左移,下頁從後面出來

    banner.setPageTransformer(Transformer.Zoom);  //本頁剛左移,下頁就在後面
    // 設定XBanner頁面切換的時間,即動畫時長
    banner.setPageChangeDuration(3000);
    
   //點選事件
    banner.setOnItemClickListener(new XBanner.OnItemClickListener() {
        @Override
        public void onItemClick(XBanner banner, int position) {
            Toast.makeText(MainActivity.this, "點選了第"+position+"圖檔", Toast.LENGTH_SHORT).show();
        }
    });

}
           

}

關于xbanner的一些屬性

屬性名 屬性說明 屬性值

isAutoPlay 是否支援自動輪播 boolean類型,預設為true

autoPlayTime 圖檔輪播事件間隔 int類型,預設5000ms

pointNormal 訓示器未選中時的狀态 drawable類型,不指定的話使用預設狀态點

pointSelect 訓示器選中時的狀态 drawable類型,不指定的話使用預設狀态點

pointsVisible 是否顯示訓示器 boolean類型,預設為true

pointsPosition 訓示點位置 CENTER、LEFT、RIGHT,預設CENTER

pointsContainerBackground 訓示器條背景 color類型、drawable類型、mipmap類型等

pointContainerPosition 訓示器條位置 TOP、BOTTOM,預設BOTTOM

pointContainerLeftRightPadding 訓示點容器左右内間距 dimension類型,預設10.0dip

pointTopBottomPadding 訓示點上下内間距 dimension類型,預設6.0dip

pointLeftRightPadding 訓示點左右内間距 dimension類型,預設3.0dip

tipTextColor 提示文字的顔色 reference類型

tipTextSize 提示文字的大小 dimension類型,預設10.0dp