首先加一个网络权限
<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);
}
}