README_EN.md

December 31, 2021 · View on GitHub

XBanner

License

1

English | 中文

Functions：

  • Support multiple display on one screen
  • Support dynamic setting data
  • Support loop auto play
  • Support set indicator position left, center, right
  • Support custom indicator
  • Support Page OnClickListener
  • Support setting the playback interval
  • Support tip text
  • Support picture switching animation or customize
  • Support setting picture switching speed
  • Support setting digital indicator
  • Support setting imageplaceholder
  • Support Glide/Fresco
  • Support Custom layout
  • Support AndroidX

Styles

modepicture
normal indicator效果示例
number indicator效果示例
number indicator and title效果示例
normal indicator and title效果示例
title效果示例
multiple page效果示例
multiple page效果示例
overlap效果示例

Demo Apk

demo

Usage

1.Add Gradle

Jitpack

Add it in your root build.gradle at the end of repositories:

allprojects {
     repositories {
	...
	maven { url 'https://jitpack.io' }
     }
}

Step 2. Add the dependency

Version

dependencies {

    //Normal
    implementation 'com.github.xiaohaibin:XBanner:1.8.6'
    
    //androidX
    implementation 'com.github.xiaohaibin:XBanner:androidx_v1.2.3'
}

2.Add network permissions to the manifest file

<uses-permission android:name="android.permission.INTERNET" />

3.Add XBanner in the layout file

    <com.stx.xhb.xbanner.XBanner
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/xbanner"
        android:layout_width="match_parent"
        android:layout_height="高度自定义"
        app:AutoPlayTime="3000"
        app:pointsContainerBackground="#44aaaaaa"
        app:pointNormal="@drawable/shape_noraml"
        app:pointSelect="@drawable/shape_selected"
        app:pointsPosition="RIGHT"
        app:tipTextSize="12sp"
        app:isShowNumberIndicator="true"
        app:isShowIndicatorOnlyOne="true"
        app:pageChangeDuration="800"/>

4.Use in Activity or Fragment

initialization:set banner data

        //get xbanner
        XBanner mXBanner = (XBanner) findViewById(R.id.xbanner);
	
	//setBannerPlaceholderImg 
        mBanner.setBannerPlaceholderImg(R.mipmap.xbanner_logo, ImageView.ScaleType.CENTER_CROP);
        
       //add data（network data、local file、View）,refresh data also use this method
        mXBanner.setBannerData("data");

5.load image

according your project choose imageload framework，this use Glide load image

      //load image
      mXBanner.loadImage(new XBanner.XBannerAdapter() {
            @Override
            public void loadBanner(XBanner banner, Object model, View view, int position) {
            
       Glide.with(MainActivity.this).load(((AdvertiseEntity.OthersBean)
      model).getThumbnail()).placeholder(R.drawable.default_image).error(R.drawable.default_image).into((ImageView) view);
            }
        });

6.setOnItemClickListener

 mXBanner.setOnItemClickListener(new XBanner.OnItemClickListener() {
            @Override
            public void onItemClick(XBanner banner, Object model,View view, int position) {
                Toast.makeText(MainActivity.this, "点击了第"+position+"图片", Toast.LENGTH_SHORT).show();
            }
        });

7.Use Fresco load image

1.custom layout R.layout.image_fresco

 <?xml version="1.0" encoding="utf-8"?>
 <com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  />

2.use setBannerData() method

  mXBanner.setBannerData(R.layout.image_fresco,“banner data”);

3.setBannerData

Before you use setBannerData，you should let banner eneity implement the interface,eg：

    public class CustomViewsInfo implements BaseBannerInfo {

        private String info;

        public CustomViewsInfo(String info) {
            this.info = info;
        }

        //image  url
        @Override
        public String getXBannerUrl() {
            return info;
        }

       //tips
        @Override
        public String getXBannerTitle() {
            return "tips";
        }
    }

8.Custom layout

1.Custom layout，eg：R.layout.customelayout

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tv"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:text="1"
    android:textSize="40dp"
    android:gravity="center"
    android:textColor="@android:color/white"
    android:background="@color/colorYellow"/>

2.Use setBannerData() method

   mXBanner.setBannerData("custom latout",“data”);

3.loadimage，see CustomViewsActivity

mBanner.loadImage(new XBanner.XBannerAdapter() {
               @Override
               public void loadBanner(XBanner banner, Object model, View view, int position) {
                   TextView tvContent = (TextView) view.findViewById(R.id.tv);
                   tvContent.setText(String.valueOf(position + 1));
                   view.setBackgroundColor(Color.parseColor((String) model));
               }
           });

Attributes in xml

Attributesdescriptionformat
isAutoPlayset isAutoPlayboolean，default true
isTipsMarqueeset isTipsMarqueeboolean，default false
AutoPlayTimeset AutoPlayTimeinteger，default 5s
pointNormalset indicator pointNormaldrawable
pointSelectset indicator pointSelectdrawable
pointsVisibilityset indicator isVisibleboolean，default true
pointsPositionset indicator postionLEFT、CENTER、RIGHT，default CENTER
pointsContainerBackgroundset indicator bagrounddrawable
pointContainerPositionset pointContainerPositionTOP、BOTTOM，default BOTTOM
pointContainerLeftRightPaddingset pointContainerLeftRightPaddingdimension，default 10dp
pointTopBottomPaddingset pointTopBottomPaddingdimension，default 6dp
pointLeftRightPaddingset pointLeftRightPaddingdimension，default 3dp
tipTextColor提示文案的文字颜色reference
tipTextSize提示文案的文字大小dimension，default 10dp
isShowNumberIndicator是否显示数字指示器boolean,default false
numberIndicatorBacgroud数字指示器背景reference
isShowIndicatorOnlyOne当只有一张图片的时候是否显示指示点boolean，default false
isShowTips是否展示文字boolean，default false
pageChangeDuration图片切换速度integer，default 1000ms
isHandLoop是否支持手动无限循环切换图片boolean，default false
placeholderDrawable设置整体轮播框架占位图reference
isClipChildrenMode是否开启一屏显示多个模式boolean，default false
clipChildrenLeftMargin一屏显示多个左间距dimension ，default 30dp
clipChildrenRightMargin一屏显示多个右间距dimension ，default 30dp
clipChildrenTopBottomMargin一屏显示多个上下间距dimension ，default 30dp
viewpagerMarginviewpager页面间距dimension ，default 10dp
isClipChildrenModeLessThree少于三张是否支持一屏多显模式boolean，default false
bannerBottomMarginbanner轮播区域底部margin，可设置指示器距离轮播图的间距dimension ，default 0dp
scaleType设置占位图缩放类型scaleType类型
showIndicatorInCenter设一屏多显模式下 指示器是否显示在中间图片位置，默认显示中间boolean
isClickSide一屏多显模式下 是否支持点击侧边切换图片，默认开启boolean

Progard

##XBanner Progard
-keep class com.stx.xhb.xbanner.**{*;}

About

Thanks

bingoogolapple

Thankstanweijiufix 1.1.2 中bug

ThanksLeoand8fix 1.6.1 中bug

Your Star is my biggest motivation，Thanks~~~

License

Copyright (C) 2016 xhb_199409@163.com

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.