Android wheel cast control
Amway a banner, used in the project development of the banner, to achieve viewPager infinite round broadcast function, built-in round IndicatorView, support a variety of animation switching.
- Supports one screen with three pages
- Support meizu effects
- Support custom Indicators
- Support for custom views
- Data refresh
- Resolve sliding conflicts such as pull-down refresh, such as nested SwipeRefreshLayout
- Resolve the onPageSelected problem
- Good code encapsulation, see code implementation for more optimization.
If you like it, start supporting itGithub.com/zguop/banne…
The realization of the core idea of the banner is through the count+2 rotation of the idea, it is borrowed from the network red library Github start the largest number of banner library, it seems that the library does not support a screen to display three pages of the effect, there is a slide to the last page blank situation.
A brief statement of the core principles
- NeedCount (6) = count(4) + 2. There are 6 images in the actual rotation, which are stored in the banner corresponding to:
We can see that in the actual index=0 is the last image and index=5 is the first image, we just swipe right to index=5 and go to viewager. SetCurrentItem (1, false); When index=0, use viewpager. setCurrentItem(count, false); Switch to the actual picture of the last one, the transition to achieve a circular effect of round seeding.
- NeedCount (8) = count(4) + 4. The actual number of images in rotation is 8, which is stored in the banner corresponding to:
rendering
Click on the downloadbanner.apkexperience
| describe | The picture |
|---|---|
| For basic functions, please download APK for a smoother experience |
 |
| describe | Normal style | On both sides of the zoom | Meizu style |
|---|---|---|---|
| Three pages of one screen at a time |
 |
 |
 |
| rendering | 1 | 2 |
|---|---|---|
| Indicator View simple code |
 |
 |
 |
 |
 |
Using the step
Step 1. Rely on banners
Go to the target address location banner
Step 2.xml
<com.to.aboomy.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="250dp"/>
Copy the codeStep 3. Customize HolderCreator
// Implement HolderCreator interface
public interface HolderCreator {
View createView(Context context,final int index, Object o);
}
// For example
public class ImageHolderCreator implements HolderCreator {
@Override
public View createView(final Context context, final int index, Object o) {
ImageView iv = new ImageView(context);
iv.setScaleType(ImageView.ScaleType.FIT_XY);
Glide.with(iv).load(o).into(iv);
// Implement the click event internally
iv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context, index + "", Toast.LENGTH_LONG).show(); }});returniv; }}Copy the codeStep 4. Use Banner in the page
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
banner = findViewById(R.id.banner);
// Use the built-in Indicator
IndicatorView indicator = new IndicatorView(this)
.setIndicatorColor(Color.DKGRAY)
.setIndicatorSelectorColor(Color.WHITE);
banner.setIndicator(indicator)
.setHolderCreator(new ImageHolderCreator())
.setPages(list);
}
Copy the codeSimple setup of three pages on one screen
// Set the width of the left and right pages exposed and the width between items
.setPageMargin(UIUtil.dip2px(this.20), UIUtil.dip2px(this.10))
// Built-in ScaleInTransformer, set toggle zoom animation
.setPageTransformer(true.new ScaleInTransformer())
Copy the codeAbout the ViewPager switch animation
The following two ViewPager toggle animations are integrated in Sample. Please run Sample to check the animation effect, refer to the required ViewPagerTransform and put it into the project, or customize it as required.
ViewPagerTransforms
MagicViewPager
How to customize Indicator
// Implement Indicator interface
/** * Can implement this interface, custom Indicator can refer to the built-in {@link IndicatorView}
*/
public interface Indicator extends ViewPager.OnPageChangeListener {
/** ** is called when data initialization is complete@paramPagerCount Pager quantity */
void initIndicatorCount(int pagerCount);
/** * returns a View to add to the banner */
View getView(a);
/** * The banner is a RelativeLayout. Set the position of the banner within the RelativeLayout, which can be anywhere */
RelativeLayout.LayoutParams getParams(a);
}
// For example
public class IndicatorView extends View implements Indicator{
@Override
public void initIndicatorCount(int pagerCount) {
this.pagerCount = pagerCount;
setVisibility(pagerCount > 1 ? VISIBLE : GONE);
requestLayout();
}
@Override
public View getView(a) {
return this;
}
/** * Controls the position of Indicator in the Banner, developers implement */
@Override
public RelativeLayout.LayoutParams getParams(a) {
if (params == null) {
params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
params.addRule(RelativeLayout.CENTER_HORIZONTAL);
params.bottomMargin = dip2px(10);
}
return params;
}
/** * Three methods for synchronizing the callback when the banner is switched */
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
selectedPage = position;
offset = positionOffset;
invalidate();
}
@Override
public void onPageSelected(int position) {}@Override
public void onPageScrollStateChanged(int state) {}}Copy the codeMethods provided by the Banner. The Banner does not provide any custom attributes
| The method name | describe |
|---|---|
| setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) | Set viewPager’s custom animation |
| setOuterPageChangeListener(ViewPager.OnPageChangeListener outerPageChangeListener) | Set the slide listener for viewPager |
| setAutoTurningTime(long autoTurningTime) | Set the automatic multicast duration |
| setPagerScrollDuration(int pagerScrollDuration) | Set the viewPager switchover duration |
| setAutoPlay(boolean autoPlay) | Set whether to automatically rotate. If the page is larger than 1, it can rotate |
| setIndicator(Indicator indicator) | Set the indicator |
| setIndicator(Indicator indicator, boolean attachToRoot) | Set the indicator |
| HolderCreator(HolderCreator holderCreator)) | Set up the view creation interface |
| setPages(List<? > items) | Load data, this method when the start of the round – cast method, please call last |
| setPages(List<? > items, int startPosition) | Override method to set the starting position of the rotation |
| isAutoPlay() | Whether to broadcast in infinite rotation |
| getCurrentPager() | Gets the viewPager location |
| startTurning() | Start by |
| stopTurning() | Stop by |
| setPageMargin(int multiWidth, int pageMargin) | Set one screen to multiple pages |
| setPageMargin(int leftWidth, int rightWidth, int pageMargin) | Set one screen more than one page, method overload |
Built-in IndicatorView usage method introduction, does not provide any custom properties
| The method name | describe |
|---|---|
| setIndicatorRadius(float indicatorRadius) | Set the dot radius |
| setIndicatorSpacing(float indicatorSpacing) | Set dot spacing |
| setIndicatorStyle(@IndicatorStyle int indicatorStyle) | Set dot switching animations. There are three built-in switching animations, please refer to Sample |
| setIndicatorColor(@ColorInt int indicatorColor) | Sets the default dot color |
| setIndicatorSelectorColor(@ColorInt int indicatorSelectorColor) | Sets the color of the selected dot |
| setParams(RelativeLayout.LayoutParams params) | Set the position of IndicatorView in the banner. By default, the bottom is in the middle and 10dp away from the bottom. For details, see Sample |