Foreword: There are so many Banner frames, why rewrite? In fact, it is not due to the third party is too heavy, difficult to maintain and other reasons, the most fatal problem is that the third party banner framework is mostly implemented using ViewPager, and using this method is generally accompanied by two problems:

  • 1. If getItemCount() in the adapter is put back a large numberreturn Integer.MAX_VALUE, it’s easy to implement wireless scrolling, but it causes ANR exceptions (as we did in our previous projects), so if you do, or if you’re using a third party framework, you need to be careful
  • 2. If getItemCount() returns a multiple of its true size, the code determines the loop. This does solve the wireless loop and does not cause ANR, but it does cause a new display problem. When you slide to the last one or the first one needs to display the next one, you will simply switch to the next page and feel the page switch is very stiff

Before replacing the banner implementation: company project using ViewPager implementation of unlimited rolling advertising banner ANR exception statistics: So far there are a dozen or so pages, 15 on each page, and one may contain hundreds of ANRs, which is a scary number (assuming 15 pages, 15 on each page, 100 times, then 1515100= 22,500 times), but in fact there may be more, the first one in the chart below has 836 ARNs

Causes of ANR: Viewpager.setcurrentitem () is used to measure the offset of the roll. Wireless scrolling is achieved by returning an infinite number from the getItemCount() method in the middle of the adapter, so measuring the offset is time-consuming. This results in ANR exceptions.

Solution: Use RecyclerView to realize infinite scrolling Banner, completely solve the ANR anomaly caused by calling viewpager.setcurrentitem (), and make the page switch smooth

First to a wave of renderings (ugly demo, irrelevant, pay attention to the effect)

Attribute is introduced

<! -- Advertisement bar --> <declare-styleable name="BannerView"> <! -- time --> <attr name="interval"/ > <! <attr name="orientation" format="enum">
            <enum name="horizontal" value="0" />
            <enum name="vertical" value="1"/> </attr> <! -- Autoplay --> <attr name="autoPlaying" format="boolean"/ > <! -- spacing between items --> <attr name="itemSpace" format="integer"/ > <! --> <attr name= --> <attr name="centerScale" format="float"/ > <! -- How fast the banner moves while swiping --> <attr name="moveSpeed" format="float"/ > <! -- Display view--> <attr name="empty_layout" format="reference" />

    </declare-styleable>
Copy the code

Access and use the framework

Add the dependent

// Add the Jitpack repository allProjects {repositories {... maven { url'https://jitpack.io'}}}Copy the code
Dependencies {// Add dependencies to module gradle'com. Making. 93 laer: BannerView_master: v1.0.1'
	}

Copy the code

Let’s resynchronize

Use steps: 3+2

Step 1: Layout

<com.example.laitianbing.bannerview_master.banner_view.BannerView
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/bannerBackground"
        app:autoPlaying="true"
        app:empty_layout="@layout/empty_view"
        app:interval="3000" />
Copy the code

MBanner = findViewById(r.id.anner); Step 3: Bind the adapter and put in the initialization data source

mAdapter = new BannerAdapter<Item>(this, itemLayout, items) { @Override public void convert(ViewHolder holder, Final Item Item) {// Write its own processing logic holder.setimage (r.i.iv_image, item.imgres); holder.setText(R.id.tv_name, item.url); holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { WebActivity.start(BannerActivity.this, item.url); }}); }}; mBanner.setAdapter(mAdapter);Copy the code

Step 4: Add indicator (this step is not done if the indicator is not displayed)

MCircleIndicator = new RectIndicator(this, RectIndicator.SHAPE_CIRCLE); / / set the indicator long and wide. MCircleIndicator setIndicatorSize (10, 10); / / set the indicator spacing between mCircleIndicator. SetItemMargin (20); / / set the indicator shown in the middle of the bottom of the banner mCircleIndicator setRules (RelativeLayout. ALIGN_PARENT_BOTTOM, RelativeLayout. CENTER_HORIZONTAL); / / set the indicator shows 10 dp mCircleIndicator from the bottom of the banner. The setMargins (0, 0, 0, 10); // addIndicator mbanner.addindicator (mCircleIndicator);Copy the code

Madapter.setdatas (datahelper.getitems ());

Use advanced hints:

  • 1. The indicator is divided into graphic indicator and text indicator before delivery. If you want to customize the graphic indicator, you can inherit it directlyBaseIndicatorCan be
  • 2. When adding an indicator, you can set the position of the indicator just as you set the position of the sub-view within a RelativeLayout. In other words, you can specify where the indicator should be displayed within the banner
  • 3. You can customize indicators, butMust inherit the View and implement the Indicator interfaceIn other words, any View, as long as the Indicator interface is implemented, it can become an IndicatorTextIndicatorimplementation
  • 4. If the project wants to realize the vertical scrolling like Taobao and JINGdong headlines, it can be easily completed by using this framework

Project link: BannerView_master

Finally, thank you for reading, and please give me a thumbs up if it’s helpful