ZBanner

ZBanner是一个真正的轮播控件，并非ViewPager的简单改造。ZBanner使用Adapter+Fragment的方式来展示页面，每一页就是一个Fragment,因此你可以随意设计自己的Fragment,例如形状、加载图片的方式等等。同时提供了转换动画、自定义布局等等让你实现各种炫丽效果。

预览效果

例子下载

gradle引入

implementation 'com.zhuang.zbanner:zbanner:1.2.1'

简单使用

R.layout.activity_example.xml

<?xml version="1.0" encoding="utf-8"?>
<com.zhuang.zbannerlibrary.ZBanner xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/zBanner"
  android:layout_width="match_parent"
  android:layout_height="200dp" />

java

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.zhuang.zbannerlibrary.ZBanner;
import com.zhuang.zbannerlibrary.ZBannerAdapter;

public class ExampleActivity extends AppCompatActivity {

  ZBanner zBanner;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_example);
      zBanner = findViewById(R.id.zBanner);
      zBanner.setAdapter(new MyBannerAdapter(getSupportFragmentManager()));
  }

  @Override
  protected void onResume() {
      super.onResume();
      //每个页面展示时间为1000ms  页面切换持续时间为2000ms
      zBanner.star(1000,2000);
  }

  @Override
  protected void onPause() {
      super.onPause();
      //停止自动切换
      zBanner.stop();
  }

  private class MyBannerAdapter extends ZBannerAdapter {

      public MyBannerAdapter(FragmentManager fm) {
          super(fm);
      }

      @Override
      public Fragment getItem(int position) {
          return BannerFragment.newInstance(position);
      }

      @Override
      public int getCount() {
          return 5;
      }
  }

  public static class BannerFragment extends Fragment {

      private static final String POSITION = "position";
      int[] colors = {Color.RED, Color.BLUE, Color.GRAY, Color.GREEN, Color.YELLOW};

      public static BannerFragment newInstance(int position) {
          BannerFragment fragment = new BannerFragment();
          Bundle args = new Bundle();
          args.putInt(POSITION, position);
          fragment.setArguments(args);
          return fragment;
      }

      @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
          TextView textView = new TextView(getContext());
          final int position = getArguments().getInt(POSITION);
          textView.setText(position + "");
          textView.setTextColor(Color.WHITE);
          textView.setGravity(Gravity.CENTER);
          textView.setTextSize(30);
          textView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
          textView.setBackgroundColor(colors[position]);
          return textView;
      }
  }
}

转换动画

zBanner.setPageTransformer(new Flip3DTransformer());

ZBanner提供了多种转换动画效果：AccordionTransformer、AccordionTransformer1、DepthPageTransformer、DrawerTransformer、Flip3DTransformer、FlipHorizontalTransformer、RotateDownTransformer、StackTransformer、ZoomOutTransformer
ZBanner允许用户自定义Transformer，只需实现接口ZBannerPageTransformer，例如AccordionTransformer的实现如下：

public class AccordionTransformer implements ZBanner.ZBannerPageTransformer {

   /**
    * @param page     在切换的页面
    * @param position 正在切换的页面相对于当前显示在正中间的页面的位置
    *                 0表示当前页，1表示右侧一页，-1表示左侧一页。
    *                 注意，这几个都是临界值，position在页面切换过程中会一直改变
    *                 例如左移的话，当前页的position会从0减少到-1，切换完成后就变成左侧一页了。
    */

    @Override
    public void transformPage(View view, float position) {
        final float width = view.getWidth();
        if (position >= 0 && position <= 1) {
            view.setTranslationX(-width * position);
            view.setPivotX(width);
            view.setScaleX(1f - position);
        } else if (position < 0 && position >= -1) {
            view.setTranslationX(0);
            view.setPivotX(0);
            view.setScaleX(1f);
        }
    }
}

用一张图来说明transformPage的position参数

如有不清楚的可以查阅ViewPager的PageTransformer,因为ZBanner提供的PageTransformer接口与ViewPager的方式是一致的。

可以在Xml文件中设置的属性

自定义布局

如果你对ZBanner默认的布局不满意，例如indicator的位置不满意，ZBanner的样式不满意，可以自定义布局。例如下面的效果

该界面把Zbanner与indicator分开，首先需要设置默认的indicator为false，让ZBanner不显示自身的indicator,再把你自己的indicator按你想要的位置来布局到界面中。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <com.zhuang.zbannerlibrary.ZBanner
        android:id="@+id/zBanner"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:indicatorIconSize="8dp"
        app:indicatorMargin="2dp"
        app:showIndicator="false"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:offscreenPageLimit="2" />

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#66000000"
        android:padding="10dp"
        android:textColor="#ffffff"
        app:layout_constraintBottom_toBottomOf="@+id/zBanner" />

    <com.zhuang.zbannerlibrary.Indicator
        android:layout_marginRight="10dp"
        android:id="@+id/indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@+id/title"
        app:layout_constraintRight_toRightOf="@id/title"
        app:layout_constraintTop_toTopOf="@+id/title" />

</android.support.constraint.ConstraintLayout>

然后在java代码中设置

Indicator indicator = findViewById(R.id.indicator);
zBanner.setIndicator(indicator);
final TextView title = findViewById(R.id.title);
zBanner.setOnPageChangeLister(new ZBanner.OnPageChangeLister() {
    @Override
    public void change(int position) {
        title.setText(position + "" );
    }
});

更多详细请看项目中的例子源码

点击事件

从上面的介绍可以看到ZBanner的每个页面其实就是一个Fragment，如需为页面设置点击事件，只需在对应的Fragment中设置点击事件即可

 @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_banner1, container, false);
        rootView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                
            }
        });
        return rootView;
    }

License

Copyright 2018 likeadog

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.