- SliderLayout
- LoopViewPage
- BGABanner
- 自定义view实现轮播
- 仿魅族的banner轮播图
1. SliderLayout
GitHub地址:https://github.com/daimajia/AndroidImageSlider
预览效果如下
687474703a2f2f7777332e73696e61696d672e636e2f6d773639302f36313064633033346a773165677a6f7236366f6a64673230393530666b6e70652e676966.gif
使用方法如下:
- [ 1 ] 添加依赖
gradle中配置
dependencies {
compile "com.android.support:support-v4:+"
compile 'com.squareup.picasso:picasso:2.3.2'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.daimajia.slider:library:1.1.5@aar'
}
- [ 2 ] 在布局文件中使用
<com.daimajia.slider.library.SliderLayout
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="200dp"
/>
- [ 3 ] 在代码中实现
sliderLayout = (SliderLayout) findViewById(R.id.slider);
//添加图片控件
for(int i=0;i<mTitles.length;i++)
{
TextSliderView textSliderView=new TextSliderView(this);
textSliderView.description(mTitles[i]);//设置标题
textSliderView.image(mImages[i]);//设置图片的网络地址
textSliderView.setScaleType(BaseSliderView.ScaleType.CenterCrop);//设置图片的缩放效果;
//添加到布局中显示
sliderLayout.addSlider(textSliderView);
}
//设置指示器的位置
sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
//设置图片的切换效果
sliderLayout.setPresetTransformer(SliderLayout.Transformer.Accordion);
// sliderLayout.setCustomAnimation(new DescriptionAnimation()); 添加textView动画特效
//设置切换时长2000 ,时长越小，切换速度越快
sliderLayout.setDuration(2000);
}
- [ 4 ] 性能优化
//性能优化。当页面显示时进行自动播放
@Override
protected void onStart() {
super.onStart();
sliderLayout.startAutoCycle();
}
//性能优化。当页面不显示时暂停自动播放
@Override
protected void onStop() {
super.onStop();
sliderLayout.stopAutoCycle();
}
2. LoopViewPage
github地址:https://github.com/open-android/LoopViewPager
大神博客: http://www.jianshu.com/p/f847325e8a28
Paste_Image.png
3. 自定义view实现轮播
/*
* 广告轮播图的自定义View
*/
public class Advertisements implements OnPageChangeListener, View.OnTouchListener {
private ViewPager vpAdvertise;
private Context context;
private LayoutInflater inflater;
private boolean fitXY;
private int timeDratioin;//多长时间切换一次pager
private boolean isPlay = true;
List<View> views;
// 底部小点图片
private ImageView[] dots;
// 记录当前选中位置
private int currentIndex;
Timer timer;
TimerTask task;
int count = 0;
private Handler runHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
switch (msg.what) {
case 0x01:
int currentPage = (Integer) msg.obj;
setCurrentDot(currentPage);
vpAdvertise.setCurrentItem(currentPage);
break;
}
}
;
};
public Advertisements(Context context, boolean fitXY, LayoutInflater inflater, int timeDratioin, boolean isPlay) {
this.context = context;
this.fitXY = fitXY;
this.inflater = inflater;
this.timeDratioin = timeDratioin;
this.isPlay = isPlay;
}
public View initView(final List<WebServiceItem> advertiseArray) {
View view = inflater.inflate(R.layout.advertisement_board, null);
vpAdvertise = (ViewPager) view.findViewById(R.id.vpAdvertise);
vpAdvertise.setOnPageChangeListener(this);
views = new ArrayList<View>();
LinearLayout ll = (LinearLayout) view.findViewById(R.id.ll);//获取轮播图片的点的parent，用于动态添加要显示的点
for (int i = 0; i < advertiseArray.size(); i++) {
if (fitXY) {
views.add(inflater.inflate(R.layout.advertisement_item_fitxy, null));
} else {
views.add(inflater.inflate(R.layout.advertisement_item_fitcenter, null));
}
ll.addView(inflater.inflate(R.layout.advertisement_board_dot, null));
}
initDots(view, ll);
AdvertisementAdapter adapter = new AdvertisementAdapter(context, views, advertiseArray);
vpAdvertise.setOffscreenPageLimit(3);
vpAdvertise.setAdapter(adapter);
new Thread() {
@Override
public void run() {
while (isPlay) {
try {
sleep(timeDratioin);
int currentPage = count % advertiseArray.size();
count++;
Message msg = Message.obtain();
msg.what = 0x01;
msg.obj = currentPage;
runHandler.sendMessage(msg);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}.start();
return view;
}
private void initDots(View view, LinearLayout ll) {
dots = new ImageView[views.size()];
// 循环取得小点图片
for (int i = 0; i < views.size(); i++) {
dots[i] = (ImageView) ll.getChildAt(i);
dots[i].setEnabled(true);// 都设为灰色
}
currentIndex = 0;
dots[currentIndex].setEnabled(false);// 设置为黄色，即选中状态
}
private void setCurrentDot(int position) {
if (position < 0 || position > views.size() - 1
|| currentIndex == position) {
return;
}
dots[position].setEnabled(false);
dots[currentIndex].setEnabled(true);
currentIndex = position;
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
switch (arg0) {
case 1:// 手势滑动，空闲中
isPlay = false;
break;
case 2:// 界面切换中
isPlay = true;
break;
case 0:// 滑动结束，即切换完毕或者加载完毕
// 当前为最后一张，此时从右向左滑，则切换到第一张
if (vpAdvertise.getCurrentItem() == vpAdvertise.getAdapter().getCount() - 1 && !isPlay) {
vpAdvertise.setCurrentItem(0);
}
// 当前为第一张，此时从左向右滑，则切换到最后一张
else if (vpAdvertise.getCurrentItem() == 0 && !isPlay) {
vpAdvertise.setCurrentItem(vpAdvertise.getAdapter().getCount() - 1);
}
break;
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
count = position;
setCurrentDot(position);
}
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
isPlay = false;
Log.i("isPlay", "false");
break;
case MotionEvent.ACTION_UP:
isPlay = true;
Log.i("isPlay", "true");
break;
default:
break;
}
return true;
}
}
- 使用方法
<LinearLayout
android:id="@+id/llAdvertiseBoard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
view.addView(new Advertisements(getContext(), true, LayoutInflater.from(getContext()), 3000, true).initView(advertiseArray));
5. * 仿魅族的banner轮播图
地址:http://mp.weixin.qq.com/s/RZ_IWvlHcWD1erJrRff_lA
0.gif
6. BGABanner
https://github.com/bingoogolapple/BGABanner-Android
引导界面滑动导航 + 大于等于1页时无限轮播 + 各种切换动画轮播效果 这也是GitHub上优秀的轮播控件 具体用法GitHub上介绍的很清楚 完善也有许多关于它的博客可以了解 这里就不在介绍了
dc235ec4-5f4a-11e6-92b7-144a2a1a1e3f.gif
