打造一款属于自己的Android滑动器
在android应用中很多情况都要用到图片或或者广告的轮播效果，包括可以自动切换和手动切换以及指示器，这篇文章将手把手教你自己实现这个效果，网上有较多很完善的框架也实现了效果，但在实际的项目中总会遇到各种各样奇葩的问题，还有一些兼容的问题，我不需要兼容到2.3，所以也不需要用到nineoldandroid，还有些动画效果很多都用不到，和其他的布局有冲突等系列问题，所以，打造一款属于自己的android滑动器还是很有必要的，知其然，知其所以然。
我们首先想到的就是使用ViewPager来实现效果，ViewPager可以做到图片切换，而且只能是手动的，其他的效果我们就要一点一点的加了，如轮播效果，指示器，自动切换，还有动画效果，下面就解决一个个的问题。
轮播效果实现
原生的ViewPager是不支持轮播效果的，滑动到第一页或者滑动到最后一页就不能再滑了，感觉不是那么的舒服，现在做一款app怎么能不支持轮播效果呢，这个问题网上有一种解决方案，无需改原生的ViewPager，只需要重写PagerAdapter就行了，看关键代码
public class LoopPagerAdapter extends PagerAdapter {
private List<View> views;
public LoopPagerAdapter(List<View> views) {
this.views = views;
}
@Override
public int getCount() {
return Integer.MAX_VALUE;//2147483647
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = views.get(position % views.size());
if (container.equals(view.getParent())) {
container.removeView(view);
}
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
}
}其实轮播是假的，但是也可以做到以假乱真的效果，count设置的足够大，一般人滑不了这么多，但不管怎么样，这也算一种解决方案
使用
public class MainActivity extends ActionBarActivity {
private ViewPager pager;
private LoopPagerAdapter loopPagerAdapter;
private List<View> views = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pager = (ViewPager) findViewById(R.id.pager);
views.add(getView(R.mipmap.img1));
views.add(getView(R.mipmap.img2));
views.add(getView(R.mipmap.img3));
loopPagerAdapter = new LoopPagerAdapter(views);
pager.setAdapter(loopPagerAdapter);
//设置当前item到Integer.MAX_VALUE中间的一个值，看起来像无论是往前滑还是往后滑都是ok的
//如果不设置，用户往左边滑动的时候已经划不动了
pager.setCurrentItem(Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2 % views.size());
}
private View getView(int res) {
ImageView imageView = new ImageView(this);
//利用glide加载图片比原始的setImageResource占用内存小很多
Glide.with(this).load(res).into(imageView);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
return imageView;
}
效果图
简单的轮播效果就出来了，效果还不是很明显，下面添加指示器
添加指示器
顾名思义，提示图片的个数以及标识当前图片位置，可以通过代码绘制形状，也可以使用图片，下面开始我就要对滑动器进行封装成一个View，新建一个SliderLayout
public class SliderLayout extends RelativeLayout {
private ViewPager pager;
//指示器容器
private LinearLayout indicatorContainer;
private Drawable unSelectedDrawable;
private Drawable selectedDrawable;
public SliderLayout(Context context) {
super(context);
initView();
}
public SliderLayout(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
public SliderLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
private void initView() {
//初始化pager
pager = new ViewPager(getContext());
//添加viewpager到SliderLayout
addView(pager);
//初始化indicatorContainer
indicatorContainer = new LinearLayout(getContext());
RelativeLayout.LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
//设置指示器的方位，如右下
params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
//设置margin
params.setMargins(dpToPx(10), dpToPx(10), dpToPx(10), dpToPx(10));
//添加指示器容器布局到SliderLayout
addView(indicatorContainer, params);
//绘制未选中状态图形
LayerDrawable unSelectedLayerDrawable;
LayerDrawable selectedLayerDrawable;
GradientDrawable unSelectedGradientDrawable;
unSelectedGradientDrawable = new GradientDrawable();
unSelectedGradientDrawable.setShape(GradientDrawable.OVAL);
unSelectedGradientDrawable.setColor(Color.GRAY);
unSelectedGradientDrawable.setSize(dpToPx(8), dpToPx(8));
unSelectedLayerDrawable = new LayerDrawable(new Drawable[]{unSelectedGradientDrawable});
unSelectedDrawable = unSelectedLayerDrawable;
//绘制选中状态图形
GradientDrawable selectedGradientDrawable;
selectedGradientDrawable = new GradientDrawable();
selectedGradientDrawable.setShape(GradientDrawable.OVAL);
selectedGradientDrawable.setColor(Color.RED);
selectedGradientDrawable.setSize(dpToPx(8), dpToPx(8));
selectedLayerDrawable = new LayerDrawable(new Drawable[]{selectedGradientDrawable});
selectedDrawable = selectedLayerDrawable;
}
//添加本地图片路径
public void setViewRes(List<Integer> viewRes) {
List<View> views = new ArrayList<>();
for (Integer res : viewRes) {
ImageView imageView = new ImageView(getContext());
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
Glide.with(getContext()).load(res).into(imageView);
views.add(imageView);
}
setViews(views);
}
//添加网络图片路径
public void setViewUrls(List<String> urls) {
List<View> views = new ArrayList<>();
for (String url : urls) {
ImageView imageView = new ImageView(getContext());
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
Glide.with(getContext()).load(url).into(imageView);
views.add(imageView);
}
setViews(views);
}
//添加任意View视图
public void setViews(final List<View> views) {
//初始化指示器，并添加到指示器容器布局
for (int i = 0; i < views.size(); i++) {
ImageView indicator = new ImageView(getContext());
indicator.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
indicator.setPadding(dpToPx(3), dpToPx(3), dpToPx(3), dpToPx(3));
indicatorContainer.addView(indicator);
}
LoopPagerAdapter pagerAdapter = new LoopPagerAdapter(views);
pager.setAdapter(pagerAdapter);
//设置当前item到Integer.MAX_VALUE中间的一个值，看起来像无论是往前滑还是往后滑都是ok的
//如果不设置，用户往左边滑动的时候已经划不动了
int currentItem = Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2 % views.size();
pager.setCurrentItem(currentItem);
switchIndicator(currentItem % views.size());
//添加监听器
pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
switchIndicator(position % views.size());
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
/** * 切换指示器状态 * @param currentPosition 当前位置 */
private void switchIndicator(int currentPosition) {
for (int i = 0; i < indicatorContainer.getChildCount(); i++) {
((ImageView) indicatorContainer.getChildAt(i)).setImageDrawable(i == currentPosition ? selectedDrawable : unSelectedDrawable);
}
}
/** * 单位转换将dp转化为px * @param dp dp值 * @return 返回px */
private int dpToPx(int dp) {
DisplayMetrics displayMetrics = getContext().getResources().getDisplayMetrics();
return (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, displayMetrics) + 0.5);
}
}xml中添加
<com.example.dongjunkun.myapplication.SliderLayout
android:id="@+id/sliderLayout"
android:layout_width="match_parent"
android:layout_height="200dp"
/>代码中使用
public class MainActivity extends ActionBarActivity {
private SliderLayout sliderLayout;
private List<Integer> viewRes = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
sliderLayout = (SliderLayout) findViewById(R.id.sliderLayout);
viewRes.add(R.mipmap.img1);
viewRes.add(R.mipmap.img2);
viewRes.add(R.mipmap.img3);
sliderLayout.setViewRes(viewRes);
}
}效果演示
到这里指示器已经ok了，下面实现自动切换
自动切换
用Handler实现计时器
public class SliderLayout extends RelativeLayout implements android.os.Handler.Callback {
public static final int DELAY_MILLIS = 4000;
private ViewPager pager;
//指示器容器
private LinearLayout indicatorContainer;
private Drawable unSelectedDrawable;
private Drawable selectedDrawable;
private int WHAT_AUTO_PLAY = 1000;
private Handler handler;
private boolean isAutoPlay = false;
public SliderLayout(Context context) {
super(context);
initView();
}
public SliderLayout(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
public SliderLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
private void initView() {
handler = new Handler(this);
//初始化pager
pager = new ViewPager(getContext());
//添加viewpager到SliderLayout
addView(pager);
//初始化indicatorContainer
indicatorContainer = new LinearLayout(getContext());
RelativeLayout.LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
//设置指示器的方位，如右下
params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
//设置margin
params.setMargins(dpToPx(10), dpToPx(10), dpToPx(10), dpToPx(10));
//添加指示器容器布局到SliderLayout
addView(indicatorContainer, params);
//绘制未选中状态图形
LayerDrawable unSelectedLayerDrawable;
LayerDrawable selectedLayerDrawable;
GradientDrawable unSelectedGradientDrawable;
unSelectedGradientDrawable = new GradientDrawable();
unSelectedGradientDrawable.setShape(GradientDrawable.OVAL);
unSelectedGradientDrawable.setColor(Color.GRAY);
unSelectedGradientDrawable.setSize(dpToPx(8), dpToPx(8));
unSelectedLayerDrawable = new LayerDrawable(new Drawable[]{unSelectedGradientDrawable});
unSelectedDrawable = unSelectedLayerDrawable;
//绘制选中状态图形
GradientDrawable selectedGradientDrawable;
selectedGradientDrawable = new GradientDrawable();
selectedGradientDrawable.setShape(GradientDrawable.OVAL);
selectedGradientDrawable.setColor(Color.RED);
selectedGradientDrawable.setSize(dpToPx(8), dpToPx(8));
selectedLayerDrawable = new LayerDrawable(new Drawable[]{selectedGradientDrawable});
selectedDrawable = selectedLayerDrawable;
}
//添加本地图片路径
public void setViewRes(List<Integer> viewRes) {
List<View> views = new ArrayList<>();
for (Integer res : viewRes) {
ImageView imageView = new ImageView(getContext());
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
Glide.with(getContext()).load(res).into(imageView);
views.add(imageView);
}
setViews(views);
}
//添加网络图片路径
public void setViewUrls(List<String> urls) {
List<View> views = new ArrayList<>();
for (String url : urls) {
ImageView imageView = new ImageView(getContext());
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
Glide.with(getContext()).load(url).into(imageView);
views.add(imageView);
}
setViews(views);
}
//添加任意View视图
public void setViews(final List<View> views) {
//初始化指示器，并添加到指示器容器布局
for (int i = 0; i < views.size(); i++) {
ImageView indicator = new ImageView(getContext());
indicator.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
indicator.setPadding(dpToPx(3), dpToPx(3), dpToPx(3), dpToPx(3));
indicatorContainer.addView(indicator);
}
LoopPagerAdapter pagerAdapter = new LoopPagerAdapter(views);
pager.setAdapter(pagerAdapter);
//设置当前item到Integer.MAX_VALUE中间的一个值，看起来像无论是往前滑还是往后滑都是ok的
//如果不设置，用户往左边滑动的时候已经划不动了
int currentItem = Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2 % views.size();
pager.setCurrentItem(currentItem);
switchIndicator(currentItem % views.size());
//添加监听器
pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
switchIndicator(position % views.size());
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
startAutoPlay();
}
@Override
public boolean handleMessage(Message msg) {
if (msg.what == WHAT_AUTO_PLAY) {
pager.setCurrentItem(pager.getCurrentItem() + 1, true);
handler.sendEmptyMessageDelayed(WHAT_AUTO_PLAY, DELAY_MILLIS);
}
return false;
}
/** * 开始自动轮播 */
public void startAutoPlay() {
if (!isAutoPlay) {
handler.sendEmptyMessageDelayed(WHAT_AUTO_PLAY, DELAY_MILLIS);
isAutoPlay = true;
}
}
/** * 停止自动轮播 */
public void stopAutoPlay() {
if (isAutoPlay) {
handler.removeMessages(WHAT_AUTO_PLAY);
isAutoPlay = false;
}
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
stopAutoPlay();
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
startAutoPlay();
break;
}
return super.dispatchTouchEvent(ev);
}
/** * 切换指示器状态 * * @param currentPosition 当前位置 */
private void switchIndicator(int currentPosition) {
for (int i = 0; i < indicatorContainer.getChildCount(); i++) {
((ImageView) indicatorContainer.getChildAt(i)).setImageDrawable(i == currentPosition ? selectedDrawable : unSelectedDrawable);
}
}
/** * 单位转换将dp转化为px * * @param dp dp值 * @return 返回px */
private int dpToPx(int dp) {
DisplayMetrics displayMetrics = getContext().getResources().getDisplayMetrics();
return (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, displayMetrics) + 0.5);
}
}
经过修改SliderLayout布局已经添加了自动轮播的效果
最后就是添加各种各样的动画了，网上例子比较多，简单教大家下窍门
//设置动画
pager.setPageTransformer(true, new ViewPager.PageTransformer() {
@Override
public void transformPage(View page, float position) {
if (position < -1.0f) {
// [-Infinity,-1)
// 左边页面处于不可见状态
} else if (position <= 0.0f) {
// [-1,0]
// 左边页面显示
} else if (position <= 1.0f) {
// (0,1]
//左边页面显示
} else {
// (1,+Infinity]
// 右边页面处于不可见状态
}
}
});这个一定要理解，推荐大家看慕课网千变万化的ViewPager教程
简单演示
完整demo已上传到github SliderLayout