SliderLayout

LoopViewPage

BGABanner

自定义view实现轮播

仿魅族的banner轮播图

1. SliderLayout

预览效果如下

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 ] 在布局文件中使用

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

{

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

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 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 advertiseArray) {

View view = inflater.inflate(R.layout.advertisement_board, null);

vpAdvertise = (ViewPager) view.findViewById(R.id.vpAdvertise);

vpAdvertise.setOnPageChangeListener(this);

views = new ArrayList();

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;

}

}

使用方法

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轮播图

0.gif

6. BGABanner

https://github.com/bingoogolapple/BGABanner-Android

引导界面滑动导航 + 大于等于1页时无限轮播 + 各种切换动画轮播效果 这也是GitHub上优秀的轮播控件 具体用法GitHub上介绍的很清楚 完善也有许多关于它的博客可以了解 这里就不在介绍了

dc235ec4-5f4a-11e6-92b7-144a2a1a1e3f.gif