快速集成高大上的Banner

今天给大家介绍一个高大上的轮播图开源项目AndroidImageSlider

原项目github:https://github.com/daimajia/AndroidImageSlider

首先给你来几个效果图

---

---

这个项目架构做的很好，便于我们自己扩展，巧用枚举，我们直接用SliderLayout来快速集成自己的

---

集成步骤

• 导入AndroidImageSlider的library（注意：删除library中gradle-mvn-push.gradle文件和gradle中apply from: ‘./gradle-mvn-push.gradle’配置，不然会出问题）
• 添加gradle依赖

    compile 'com.android.support:appcompat-v7:25.0.0'
    compile project(':library')
    compile 'com.nineoldandroids:library:2.4.0'
    compile 'com.daimajia.androidanimations:library:1.0.3@aar'

• 新建测试项目写布局

 <com.daimajia.slider.library.SliderLayout
        android:id="@+id/slider"
        android:layout_width="match_parent"
        custom:pager_animation="Accordion"
        custom:auto_cycle="true"
        custom:indicator_visibility="visible"
        custom:pager_animation_span="1100"
        android:layout_height="200dp"/>

• java代码中基本初始化

public class MainActivity extends AppCompatActivity implements BaseSliderView.OnSliderClickListener, ViewPagerEx.OnPageChangeListener{
    private SliderLayout mDemoSlider;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mDemoSlider = (SliderLayout)findViewById(R.id.slider);
  //填充数据 开发中一般都是获取网络数据
        initData(mDemoSlider);
 start(mDemoSlider,SliderLayout.Transformer.ZoomRotateOut);

    private void start(SliderLayout slider,SliderLayout.Transformer transformer) {
        slider.setPresetTransformer(transformer);
       slider.setPresetIndicator(SliderLayout.PresetIndicators.Left_Bottom);
     slider.setCustomAnimation(new DescriptionAnimation());
              slider.setDuration(2000);
        slider.addOnPageChangeListener(this);
    }

    private void initData(SliderLayout slider) {
        HashMap<String,Integer> file_maps = new HashMap<String, Integer>();
        file_maps.put("banner1", R.drawable.banner1);
        file_maps.put("banner2",R.drawable.banner2);
        file_maps.put("banner3",R.drawable.banner3);
        file_maps.put("banner4",R.drawable.banner4);
        file_maps.put("banner5",R.drawable.banner5);

        for(String name : file_maps.keySet()){
            TextSliderView textSliderView = new TextSliderView(this);
            // initialize a SliderLayout
            textSliderView
                    .description(name)
                    .image(file_maps.get(name))
                    .setScaleType(BaseSliderView.ScaleType.Fit)
                    .setOnSliderClickListener(this);

            //add your extra information
            textSliderView.bundle(new Bundle());
            textSliderView.getBundle()
                    .putString("extra",name);

            slider.addSlider(textSliderView);
        }
    }


    @Override
    protected void onStop() {
        // To prevent a memory leak on rotation, make sure to call stopAutoCycle() on the slider before activity or fragment is destroyed
        mDemoSlider.stopAutoCycle();
        super.onStop();
    }

    @Override
    protected void onResume() {
        super.onResume();
        mDemoSlider.recoverCycle();
    }

    @Override
    public void onSliderClick(BaseSliderView slider) {
        Toast.makeText(this,slider.getBundle().get("extra") + "",Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

1. setPresetTransformer设置图片轮播的过渡效果
   自定义过渡的效果只需要去继承BaseTransformer类，重写onTransform(View view, float position)方法，然后在SliderLayout.Transformer添加对应的枚举值（下面两个是我自己添加的）

        FlipVertical("FlipVertical"),
        ZoomRotateOut("ZoomRotateOut");

 在setPresetTransformer(Transformer ts)方法中添加如下代码即可使用自定义的过渡效果。

  case XXX:
                t = new XXXTransformer();
                break;

XXX也就是新增加的枚举值。
2. setPresetIndicator 设置指示器（小圆点）的位置及动画
3.通过集成BaseSliderView重写 getView来自定义banner布局
4. setCustomAnimation 设置指示器以及其他提示信息展示的动画，通过实现BaseAnimationInterface接口，实现对应的四个方法将会展现不同的动画效果

public interface BaseAnimationInterface {

    /**
     * When the current item prepare to start leaving the screen.
     * @param current
     */
    public void onPrepareCurrentItemLeaveScreen(View current);

    /**
     * The next item which will be shown in ViewPager/
     * @param next
     */
    public void onPrepareNextItemShowInScreen(View next);

    /**
     * Current item totally disappear from screen.
     * @param view
     */
    public void onCurrentItemDisappear(View view);

    /**
     * Next item totally show in screen.
     * @param view
     */
    public void onNextItemAppear(View view);
}

源碼地址