快速集成高大上的Banner

来源:互联网 发布:大学英语网络课程 编辑:程序博客网 时间:2024/06/07 18:44

今天给大家介绍一个高大上的轮播图开源项目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);}

源碼地址

0 0
原创粉丝点击