Ingen beskrivning

zhpanvip d95721245b Fix bug 92		5 år sedan
.github	3149ea8e14 Create FUNDING.yml	5 år sedan
app	d95721245b Fix bug 92	5 år sedan
bannerview	d95721245b Fix bug 92	5 år sedan
gradle	25bc0350b3 update gradle version to 5.4.1	5 år sedan
ideahttp	335fa03f4e Merge branch 'dev_2.5.0' into jc_2.5.0	5 år sedan
image	9d04f4fe70 Update REDMINE.md	5 år sedan
.gitignore	a8930017df Optimize drawer.	5 år sedan
LICENSE	63fc39d7a5 Create LICENSE	5 år sedan
README.md	9d04f4fe70 Update REDMINE.md	5 år sedan
README_CN.md	f662500f60 Update README_CN.md	5 år sedan
build.gradle	8808cff7a8 JC 2.5.2	5 år sedan
git	16134c571c 优化demo	5 år sedan
gradle.properties	8fce1800a5 Initial commit	8 år sedan
gradlew	7cd1aff3e4 add Annotation for IndicatorGravity	5 år sedan
gradlew.bat	8fce1800a5 Initial commit	8 år sedan
settings.gradle	9ba615c084 Fix a bug,that Banner can't display when get data from server.	5 år sedan

BannerViewPager

English | 中文

Tencent Video,QQ Music,KuGou,AliPay,Tmall,TaoBao,YouKu,Himalaya,NetEase Music,Bilibili ect. All of above App's Banner can be implements By BannerViewPager.

Preview

### Click here or scan the QR code to download demo apk

1.setPageStyle

Sample Click Here

| MULTI_PAGE |MULTI_PAGE_SCALE | MULTI_PAGE_OVERLAP | |--|--|--| | | | |

2.setIndicatorStyle and setIndicatorSlideMode

BannerViewPager supports three Indicator Styles and three Indicator Slide mode now.

Sample Click Here

3.Custom Indicator

It's also support to custom indicator style,just need extends BaseIndicatorView or implement the IIndicator and override methods, then you can draw Indicators for whatever you want.

Sample Click Here

| Figure Indicator | Drawable Indicator | Indicator below of Banner | |--|--|--| | | | |

4.setPageTransformerStyle

Sample Click Here

| parameters | STACK | ROTATE | DEPTH | ACCORDION | |--|--|--|--|--| | Preview | | | | |

API

Attributes in xml

Usage

1.Gradle dependency

If you have migrated to Androidx，please add it in your root build.gradle at the end of repositories:

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

Then add the dependency in your app build.gradle

implementation 'com.github.zhpanvip:BannerViewPager:latestVersion'

Androidx latestVersion:

If you are still using android support library,you can add the dependency in your app build.gradle：

implementation 'com.zhpan.library:bannerview:latestVersion'

Android support latestVersion:

2.Add BannerViewPager in layout.xml

    <com.zhpan.bannerview.BannerViewPager
            android:id="@+id/banner_view"
            android:layout_width="match_parent"
            android:layout_margin="10dp"
            android:layout_height="160dp" />

3.The item layout of banner:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/banner_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="#66000000"
            android:gravity="center_vertical">

            <TextView
                android:id="@+id/tv_describe"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="15dp"
                android:gravity="center_vertical"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:textColor="#FFFFFF"
                android:textSize="16sp" />
        </LinearLayout>

    </RelativeLayout>

4.Set custom ViewHolder for BannerViewPager, the custom ViewHolder must implements com.zhpan.bannerview.holder.ViewHolder:

    public class NetViewHolder implements ViewHolder<CustomBean> {

        @Override
        public int getLayoutId() {
            return R.layout.item_net;
        }

        @Override
        public void onBind(View itemView, CustomBean data, int position, int size) {
            CornerImageView imageView = itemView.findViewById(R.id.banner_image);
            imageView.setRoundCorner(imageView.getContext().getResources().getDimensionPixelOffset(R.dimen.dp_5));
            ImageLoaderOptions options = new ImageLoaderOptions.Builder()
                    .into(imageView).load(data.getImageRes())
                    .placeHolder(R.drawable.placeholder).build();
            ImageLoaderManager.getInstance().loadImage(options);
        }
    }

5.Use BannerViewPager in Activity or Fragment:

Kotlin：

    private lateinit var mViewPager: BannerViewPager<CustomBean, NetViewHolder>
    
    private fun initViewPager() {
            mBannerViewPager = findViewById(R.id.banner_view)
            mBannerViewPager.setCanLoop(false)
                .setIndicatorSlideMode(IndicatorSlideMode.SMOOTH)
                .setIndicatorMargin(0, 0, 0, getResources().getDimensionPixelOffset(R.dimen.dp_40))
                .setIndicatorGravity(IndicatorGravity.CENTER)
                .setHolderCreator { NetViewHolder() }
                .setOnPageChangeListener(
                    object : OnPageChangeListenerAdapter() {
                        override fun onPageSelected(position: Int) {
                            pageSelect(position)
                        }
                    }
                )
                .create(res.toList())
        }

Java：

    private BannerViewPager<CustomBean, NetViewHolder> mBannerViewPager;
    ...
	private void initViewPager() {
             mBannerViewPager = findViewById(R.id.banner_view);
             mBannerViewPager.showIndicator(true)
                .setInterval(3000)
                .setCanLoop(false)
                .setAutoPlay(true)
                .setRoundCorner(getResources().getDimensionPixelOffset(R.dimen.dp_7))
                .setIndicatorColor(Color.parseColor("#935656"), Color.parseColor("#FF4C39"))
                .setIndicatorGravity(IndicatorGravity.END)
                .setScrollDuration(1000).setHolderCreator(NetViewHolder::new)
                .setOnPageClickListener(position -> {
                    CustomBean bannerData = mBannerViewPager.getList().get(position);
                    Toast.makeText(NetworkBannerActivity.this,
                            "点击了图片" + position + " " + bannerData.getImageDescription(), Toast.LENGTH_SHORT).show();

                }).create(mList);
        }

6.startLoop and stopLoop

If the version you used is later than 2.5.0,you don't need care of startLoop and stopLoop in Activity or Fragment. But the two methods is still public.

Recommend call stopLoop in onPause() and startLoop in onResume() to improve performance：

    @Override
    protected void onPause() {
        if (mBannerViewPager != null)
                mBannerViewPager.stopLoop();
        super.onPause();
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (mBannerViewPager != null)
            mBannerViewPager.startLoop();
    }

7.Custom IndicatorView

The example will implement an custom IndicatorView as the follow gif.

| Custom IndicatorView Style| |--| | |

(1)Custom View and extends BaseIndicatorView

public class FigureIndicatorView extends BaseIndicatorView {

    private int radius = DpUtils.dp2px(20);

    private int backgroundColor = Color.parseColor("#88FF5252");

    private int textColor = Color.WHITE;

    private int textSize=DpUtils.dp2px(13);

    public FigureIndicatorView(Context context) {
        this(context, null);
    }

    public FigureIndicatorView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public FigureIndicatorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(2 * radius, 2 * radius);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(backgroundColor);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, mPaint);
        mPaint.setColor(textColor);
        mPaint.setTextSize(textSize);
        String text = currentPosition + 1 + "/" + pageSize;
        int textWidth = (int) mPaint.measureText(text);
        Paint.FontMetricsInt fontMetricsInt = mPaint.getFontMetricsInt();
        int baseline = (getMeasuredHeight() - fontMetricsInt.bottom + fontMetricsInt.top) / 2 - fontMetricsInt.top;
        canvas.drawText(text, (getWidth() - textWidth) / 2, baseline, mPaint);
    }

    public void setRadius(int radius) {
        this.radius = radius;
    }

    @Override
    public void setBackgroundColor(@ColorInt int backgroundColor) {
        this.backgroundColor = backgroundColor;
    }

    public void setTextSize(int textSize) {
        this.textSize = textSize;
    }

    public void setTextColor(int textColor) {
        this.textColor = textColor;
    }
}

(2)Set custom indicator for BannerViewPager

    FigureIndicatorView indicatorView = new FigureIndicatorView(mContext);
    indicatorView.setRadius(getResources().getDimensionPixelOffset(R.dimen.dp_18));
    indicatorView.setTextSize(getResources().getDimensionPixelOffset(R.dimen.dp_13));
    indicatorView.setBackgroundColor(Color.parseColor("#aa118EEA"));

    mViewPager.setIndicatorGravity(IndicatorGravity.END)
              .setIndicatorView(indicatorView)
              .setHolderCreator(() -> new ImageResourceViewHolder(0))
              .create(mDrawableList);

TODO

[x] Optimization and Refactoring IndicatorView（2.0.1）
[x] Fix a bug which page frozen sometimes when sliding in version 2.1.0 （2.1.0.1）
[x] Set Transform Style Supported（2.1.2）
[x] Migrate to Androidx（2.2.0）
[x] indicator smooth slide Supported（2.2.2）
[x] Dash IndicatorView Supported（2.3.+）
[x] MULTI_PAGE Style Supported（2.4.0）
[x] Optimize code and improve performance in version 2.4.3
[x] Refactor Indicator again (2.5.0)
[x] Fix issue #34 which Indicator smooth slide problem(2.6.1).
[ ] Migrate to ViewPager2 （3.0.0）

Sponsor

开源不易随心赞赏

| Alipay | WeChat | |--|--| | | |

If you have any question you can scan the QR code to join the QQ group to communicate.

More details

《打造一个丝滑般自动轮播无限循环Android库》

《BannerViewPager源码解析》

《剖析BannerViewPager中Indicator的设计思想》

Thanks

banner

Android-ConvenientBanner

ViewPagerTransforms

玩Android

License

Copyright 2019 zhpanvip

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.

README.md

BannerViewPager

English | 中文

Preview

1.setPageStyle

2.setIndicatorStyle and setIndicatorSlideMode

3.Custom Indicator

4.setPageTransformerStyle

API

Attributes in xml

Usage

1.Gradle dependency

2.Add BannerViewPager in layout.xml

3.The item layout of banner:

4.Set custom ViewHolder for BannerViewPager, the custom ViewHolder must implements com.zhpan.bannerview.holder.ViewHolder:

5.Use BannerViewPager in Activity or Fragment:

6.startLoop and stopLoop

7.Custom IndicatorView

TODO

Sponsor

If you have any question you can scan the QR code to join the QQ group to communicate.

More details

Thanks

License