RollViewPager庫(kù)源github地址
輪播圖在我們開(kāi)發(fā)中經(jīng)常使用,RollViewPager庫(kù)是我使用比較好用的一個(gè)庫(kù),下面給大家介紹一下使用
主要功能
支持無(wú)限循環(huán)。 觸摸時(shí)會(huì)暫停播放萧落，直到結(jié)束觸摸一個(gè)延遲周期以后繼續(xù)播放珊随。 看起來(lái)就像這樣。指示器可以為點(diǎn)可以為數(shù)字還可以自定義污淋，位置也可以變顶滩。
效果圖
效果圖.gif
在build.gradle(app)里添加以下依賴
//控件綁定
compile 'com.jakewharton:butterknife:8.8.0'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.0'
//輪播圖
compile 'com.jude:rollviewpager:1.4.6'
//狀態(tài)欄
compile 'com.gyf.barlibrary:barlibrary:2.2.7'
//okhttp
compile 'com.squareup.okhttp3:okhttp:3.8.1' //加載網(wǎng)絡(luò)需要添加下面2個(gè)庫(kù)
//glide
compile 'com.github.bumptech.glide:glide:4.0.0'
在build.gradle(Project)里添加以下依賴
buildscript {
repositories {
google()
jcenter()
mavenCentral()//加這個(gè)
}
dependencies {
classpath 'com.android.tools.build:gradle:3.0.0-beta1'
classpath 'com.jakewharton:butterknife-gradle-plugin:8.8.0'//添加這里
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
在需要添加輪播圖的xml添加如下代碼
<com.jude.rollviewpager.RollPagerView
android:layout_width="match_parent"
android:layout_height="180dp"
app:rollviewpager_play_delay="3000"/>
還可在xml中添加更多設(shè)置:
app:rollviewpager_play_delay="3000" 播放間隔時(shí)間，單位ms寸爆。填0則不播放礁鲁。默認(rèn)為0
app:rollviewpager_hint_gravity="center" 指示器位置,提供left,center,right盐欺。默認(rèn)center
app:rollviewpager_hint_color="#7c7c7c" 指示器背景顏色.默認(rèn)黑色
app:rollviewpager_hint_alpha="80" 指示器背景透明度。0全透明仅醇，255不透明冗美。默認(rèn)0.
app:rollviewpager_hint_paddingLeft="16dp" 指示器左邊距
app:rollviewpager_hint_paddingRight="16dp" 指示器右邊距
app:rollviewpager_hint_paddingTop="16dp" 指示器上邊距
app:rollviewpager_hint_paddingBottom="16dp" 指示器下邊距
一般指定一下間隔時(shí)間就好了。
加載本地圖片代碼如下:
public class TestActivity1 extends BaseActivity {
@BindView(R.id.mRollPagerView1)
RollPagerView mRollViewPager1;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test1);
ButterKnife.bind(this);
initBanner();
}
//初始化Banner
private void initBanner() {
mRollViewPager1.setAdapter(new ImageNormalAdapter());//設(shè)置適配器
//指示器4兄弟,也就是那小圓點(diǎn)
/* mRollViewPager1.setHintView(new IconHintView(this,R.drawable.point_focus,R.drawable.point_normal));//自定義指示器
mRollViewPager1.setHintView(new TextHintView(this));//設(shè)置指示器為文字
mRollViewPager1.setHintView(null);//隱藏指示器*/
mRollViewPager1.setHintView(new ColorPointHintView(this, Color.YELLOW, Color.WHITE));//設(shè)置指示器顏色
mRollViewPager1.setPlayDelay(3000); //設(shè)置播放時(shí)間間隔
mRollViewPager1.setAnimationDurtion(500); //設(shè)置透明度
//點(diǎn)擊監(jiān)聽(tīng)
mRollViewPager1.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(int position) {
Toast.makeText(TestActivity1.this, "你點(diǎn)幾了第 " + position + " 圖片", Toast.LENGTH_SHORT).show();
}
});
}
//適配器
private class ImageNormalAdapter extends StaticPagerAdapter {
//本地圖片資源
int[] imgs = new int[]{
R.drawable.img1,
R.drawable.img2,
R.drawable.img3,
R.drawable.img4,
R.drawable.img5,
};
@Override
public View getView(ViewGroup container, int position) {
ImageView view = new ImageView(container.getContext());
view.setScaleType(ImageView.ScaleType.CENTER_CROP);
view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
view.setImageResource(imgs[position]);
return view;
}
@Override
public int getCount() {
return imgs.length;
}
}
//設(shè)置透明狀態(tài)欄
@Override
public void statusBarColor() {
super.statusBarColor();
mImmersionBar.transparentStatusBar().init();
}
}
用okhttp+glide加載網(wǎng)絡(luò)圖片代碼如下:
public class TestActivity2 extends BaseActivity {
@BindView(R.id.mRollPagerView2)
RollPagerView mRollViewPager;
@BindView(R.id.btn_reduce)
Button btnReduce;
@BindView(R.id.btn_add)
Button btnAdd;
private ImageNormalAdapter mAdapter;
private static OkHttpClient client;
int page=0;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test2);
ButterKnife.bind(this);
initBanner();
//請(qǐng)求圖片
getData(page);
}
//上一頁(yè)下一頁(yè)點(diǎn)擊事件
@OnClick({R.id.btn_reduce, R.id.btn_add})
public void onViewClicked(View view) {
switch (view.getId()) {
case R.id.btn_reduce:
if (page!=0){
--page;
}
break;
case R.id.btn_add:
page++;
break;
}
getData(page);
}
private void initBanner() {
mRollViewPager.setAdapter(mAdapter = new ImageNormalAdapter(mRollViewPager));//設(shè)置適配器
//指示器4兄弟,也就是那小圓點(diǎn)
/* mRollViewPager.setHintView(new IconHintView(this,R.drawable.point_focus,R.drawable.point_normal));//自定義指示器
mRollViewPager.setHintView(new TextHintView(this));//設(shè)置指示器為文字
mRollViewPager.setHintView(null);//隱藏指示器*/
mRollViewPager.setHintView(new ColorPointHintView(this, Color.YELLOW, Color.WHITE));//設(shè)置指示器顏色
/*
mRollViewPager.setPlayDelay(3000);//設(shè)置播放時(shí)間間隔
mRollViewPager.setAnimationDurtion(500); //設(shè)置透明度*/
mRollViewPager.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(int position) {
Toast.makeText(TestActivity2.this, "你點(diǎn)幾了第 " + position + " 圖片", Toast.LENGTH_SHORT).show();
}
});
}
/**
* 網(wǎng)絡(luò)請(qǐng)求獲得圖片url
* @param page 頁(yè)碼
*/
public void getData(final int page) {
client = new OkHttpClient();
Request request = new Request.Builder()
.url("http://gank.io/api/data/%E7%A6%8F%E5%88%A9/" + 5 + "/" + page)
.build();
Call call = client.newCall(request);
call.enqueue(new Callback() {
@Override
public void onFailure(Call call, final IOException e) {
Log.i("NetImageActivity", "error:" + e.getMessage());
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(TestActivity2.this, "網(wǎng)絡(luò)請(qǐng)求失敗析二，error:" + e.getMessage(), Toast.LENGTH_SHORT).show();
}
});
}
@Override
public void onResponse(Call call, Response response) throws IOException {
try {
String content = response.body().string();
Log.i("TestActivity2", "raw data:" + content);
JSONObject jsonObject = new JSONObject(content);
JSONArray strArr = jsonObject.getJSONArray("results");
final String[] imgs = new String[strArr.length()];
for (int i = 0; i < strArr.length(); i++) {
JSONObject obj = strArr.getJSONObject(i);
imgs[i] = obj.getString("url");
}
runOnUiThread(new Runnable() {
@Override
public void run() {
mAdapter.setImgs(imgs);//添加圖片
}
});
} catch (JSONException e) {
e.printStackTrace();
}
}
});
}
//適配器
private class ImageNormalAdapter extends LoopPagerAdapter {
String[] imgs = new String[0];
//添加圖片url
public void setImgs(String[] imgs) {
this.imgs = imgs;
notifyDataSetChanged();
}
public ImageNormalAdapter(RollPagerView viewPager) {
super(viewPager);
}
@Override
public View getView(ViewGroup container, int position) {
ImageView view = new ImageView(container.getContext());
view.setScaleType(ImageView.ScaleType.CENTER_CROP);
view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
Glide.with(TestActivity2.this)//Glide解析url獲得圖片
.load(imgs[position])
.into(view);
return view;
}
@Override
public int getRealCount() {
return imgs.length;
}
}
//設(shè)置透明狀態(tài)欄
@Override
public void statusBarColor() {
super.statusBarColor();
mImmersionBar.transparentStatusBar().init();
}
}
以上就是RollViewPager庫(kù)的使用方法,對(duì)于大部分開(kāi)發(fā)者都能滿足需求了,簡(jiǎn)單方便,
如果你還不明白,我已經(jīng)把源碼上傳到github(請(qǐng)點(diǎn)擊這里)
如果你覺(jué)得我寫的可以,請(qǐng)點(diǎn)個(gè)贊
