Banner和XBanner的实现

首先加一个网络权限

<uses-permission android:name="android.permission.INTERNET"/>

1.Banner：

compile 'com.youth.banner:banner:1.4.9'

图片加载的依赖，如Glide

compile 'com.github.bumptech.glide:glide:3.7.0'

首先建一个类去加载图片

public class BannerImage extends ImageLoader {

    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {
        Glide.with(context).load(path).into(imageView);
    }
}

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.youth.banner.Banner
        android:id="@+id/ban"
        android:layout_width="match_parent"
        android:layout_height="200dp">

    </com.youth.banner.Banner>
</LinearLayout>

Activity

        ArrayList arrayList=new ArrayList();
        for (int i = 0; i < list.size(); i++) {
            arrayList.add(list.getPic());//图片加载的地址
        }
        banner.setImageLoader(new BannerImage());
        banner.setImages(arrayList);
        banner.start();

2.XBanner：

导入依赖

compile 'com.xhb:xbanner:1.2.2'  
compile 'com.nineoldandroids:library:2.4.0'

图片加载的依赖，如Glide

compile 'com.github.bumptech.glide:glide:3.7.0'  
compile 'jp.wasabeef:glide-transformations:1.0.6'

XBanner的部分属性如下表

isAutoPlay	是否支持自动轮播	boolean类型，默认为true
autoPlayTime	图片轮播事件间隔	int类型，默认5000ms
pointNormal	指示器未选中时的状态	drawable类型，不指定的话使用默认状态点
pointSelect	指示器选中时的状态	drawable类型，不指定的话使用默认状态点
pointsVisible	是否显示指示器	boolean类型，默认为true
pointsPosition	指示点位置	CENTER、LEFT、RIGHT，默认CENTER
pointsContainerBackground	指示器条背景	color类型、drawable类型、mipmap类型等
pointContainerPosition	指示器条位置	TOP、BOTTOM，默认BOTTOM
pointContainerLeftRightPadding	指示点容器左右内间距	dimension类型，默认10.0dip
pointTopBottomPadding	指示点上下内间距	dimension类型，默认6.0dp
pointLeftRightPadding	指示点左右内间距	dimension类型，默认3.0dp

布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.stx.xhb.xbanner.XBanner
        android:id="@+id/banner"
        android:layout_width="300dp"
        android:layout_height="400dp"
        app:AutoPlayTime="3000"
        android:layout_gravity="center_horizontal"
        app:pointsContainerBackground="#f00"
        app:pointsPosition="RIGHT"
        app:tipTextColor="#000"
        app:tipTextSize="16.0sp" />

    <!-- 翻页动画单选按钮组 -->
    <RadioGroup
        android:id="@+id/transforms"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RadioButton
            android:id="@+id/rb_default"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Default"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_alpha"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Alpha"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_rotate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Rotate"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_cube"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Cube"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_flip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Flip"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_accordion"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Accordion"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_zoomfade"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ZoomFade"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_zoomcenter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ZoomCenter"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_zoomstack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ZoomStack"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_depth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Depth"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_stack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Stack"
            android:textSize="16.0sp" />
    </RadioGroup>
</LinearLayout>

Activity

public class MainActivity extends AppCompatActivity {

    private XBanner mBanner;
    private RadioGroup mTransforms;

    List<String> images=new ArrayList<>();
    List<String> titles=new ArrayList<>();

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

    private void initData() {
        images.add("http://img01.sogoucdn.com/app/a/100520024/f4d580ab0d9f5d514c9471b23bba0561");
        titles.add("美女1号");
        images.add("http://img03.sogoucdn.com/app/a/100520024/611aff966911ebb8f61df057f4822dd9");
        titles.add("美女2号");
        images.add("http://img01.sogoucdn.com/app/a/100520024/2ac6c898d7d768e3aabd72b0fbb62e5a");
        titles.add("美女3号");
        images.add("http://img01.sogoucdn.com/app/a/100520024/bc84efff94797560fd239a883712cf71");
        titles.add("美女4号");
        //为XBanner绑定数据
        mBanner.setData(images,titles);
        //为XBanner适配数据
        mBanner.setmAdapter(new XBanner.XBannerAdapter() {
            @Override
            public void loadBanner(XBanner banner, View view, int position) {
                Glide.with(MainActivity.this).load(images.get(position)).into((ImageView) view);
            }
        });
        // 设置XBanner的页面切换特效  Default默认的
        mBanner.setPageTransformer(Transformer.Default);
        // 设置XBanner页面切换的时间，即动画时长
        mBanner.setPageChangeDuration(1000);
        // RadioGroup中选中某个RadioButton时回调的方法
        mTransforms.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                switch (i) {
                    case R.id.rb_default:
                        mBanner.setPageTransformer(Transformer.Default);
                        break;
                    case R.id.rb_alpha:
                        mBanner.setPageTransformer(Transformer.Alpha);
                        break;
                    case R.id.rb_rotate:
                        mBanner.setPageTransformer(Transformer.Rotate);
                        break;
                    case R.id.rb_cube:
                        mBanner.setPageTransformer(Transformer.Cube);
                        break;
                    case R.id.rb_flip:
                        mBanner.setPageTransformer(Transformer.Flip);
                        break;
                    case R.id.rb_accordion:
                        mBanner.setPageTransformer(Transformer.Accordion);
                        break;
                    case R.id.rb_zoomfade:
                        mBanner.setPageTransformer(Transformer.ZoomFade);
                        break;
                    case R.id.rb_zoomcenter:
                        mBanner.setPageTransformer(Transformer.ZoomCenter);
                        break;
                    case R.id.rb_zoomstack:
                        mBanner.setPageTransformer(Transformer.ZoomStack);
                        break;
                    case R.id.rb_stack:
                        mBanner.setPageTransformer(Transformer.Stack);
                        break;
                    case R.id.rb_depth:
                        mBanner.setPageTransformer(Transformer.Depth);
                        break;
                }
            }
        });
        // XBanner中某一项的点击事件
        mBanner.setOnItemClickListener(new XBanner.OnItemClickListener() {
            @Override
            public void onItemClick(XBanner banner, int position) {
                Toast.makeText(MainActivity.this, "点击了第" + (position + 1) + "张图片", Toast.LENGTH_SHORT).show();
            }
        });
    }

    //当Activity失去焦点时立即停止自动轮播；当Activity获得焦点时才开始自动轮播
    @Override
    protected void onResume() {
        super.onResume();
        mBanner.startAutoPlay();
    }

    @Override
    protected void onStop() {
        super.onStop();
        mBanner.stopAutoPlay();
    }

    private void initView() {
        mBanner = (XBanner) findViewById(R.id.banner);
        mTransforms = (RadioGroup) findViewById(R.id.transforms);
    }
}

Banner和XBanner的实现

猜你喜欢