-
前言
最近的一个项目需要用到这种效果, 所以今天我们来实现这个ViewPager+小圆点+无限循环,这种效果可以用来作首页的广告啊, 各种显示图片的地方都就可以.
-
ViewPager.OnPageChangeListener
我们知道ViewPager有一个方法是经常用到的, 就是 onPageChangeListener(…) ,这个方法是用来监听Viewpager滑动的, 所以我们要加小圆点就需要自己实现这个方法.
代码如下:
public class DetailsPhotoPagerListener implements ViewPager.OnPageChangeListener {
private Context mContext;
private LinearLayout mLinearLayout; //底部圆点布局
private int mSize; //圆点数量
private List<ImageView> mDotView; //圆点容器
public DetailsPhotoPagerListener(Context context, LinearLayout linearLayout, int size) {
mContext = context;
mLinearLayout = linearLayout;
mSize = size;
initData();
}
private void initData() {
mDotView=new ArrayList<>();
for (int i = 0; i < mSize; i++) {
ImageView imageView = new ImageView(mContext);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
params.leftMargin = 10; //设置圆点相距距离
params.rightMargin = 10;
if (i == 0) { //初始化为红点
imageView.setBackgroundResource(R.drawable.bg_details_photo_viewindicator_red);
} else {
imageView.setBackgroundResource(R.drawable.bg_details_photo_viewindicator_grey);
}
mLinearLayout.addView(imageView,params);
mDotView.add(imageView);
}
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
for (int i = 0; i < mSize; i++) {
if ((position % mSize) == i) { //如果是当前的位置就设置为红点
mDotView.get(i).setBackgroundResource(R.drawable.bg_details_photo_viewindicator_red);
} else {
mDotView.get(i).setBackgroundResource(R.drawable.bg_details_photo_viewindicator_grey);
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}道理很简单, 这里的小圆点我是在Drawable里新建一个shape类型画的, 也很简单,还是贴一下吧
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval" android:useLevel="false">
<solid android:color="@color/color_primary"/>
<size android:width="8dp" android:height="8dp"/>
</shape>
</item>
</selector> -
无限循环滑动
就是ViewPagerAdapter里面设置一下%, 跟哈希表一样, 循环一下,很简单, 代码如下.
public class DetailsPhotoPageAdapter extends PagerAdapter {
private List<String> mPhoto;
private Context mContext;
private int mSize;
public DetailsPhotoPageAdapter(Context context, List<String> photo) {
mPhoto = photo;
mContext = context;
mSize = mPhoto.size();
}
@Override
public int getCount() {
return Integer.MAX_VALUE; //实现无限滑动
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
position = position % mSize; //永远不越界
View view = LayoutInflater.from(mContext).inflate(R.layout.viewpager_details_top, null);
ImageView imageView = (ImageView) view.findViewById(R.id.iv_details_top);
Glide.with(mContext).load(mPhoto.get(position)).into(imageView);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}最后别忘了在初始化的时候, 设置加入以下代码, 让人以为是无限循环, 不加的话第一张不能向左滑动
int startPage = Integer.MAX_VALUE / 2;
mVpDetailsTop.setCurrentItem(startPage);最后再贴一下布局代码吧
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="@+id/vp_details_top"
android:layout_width="match_parent"
android:layout_height="180dp"
>
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/ll_details_top_dot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:layout_marginBottom="5dp">
</LinearLayout>
</FrameLayout> -
最终效果
-
小圆点动态滑动
看了上面的介绍, 这是最简单的实现小圆点, 但是我们想要酷一点的效果就可以接着看下面.
-
首先要改的是布局, 布局增加一个View 然 放在后把他们同一个布局里面, 代码如下:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="@+id/vp_details_top"
android:layout_width="match_parent"
android:layout_height="180dp"
>
</android.support.v4.view.ViewPager>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="5dp">
<LinearLayout
android:id="@+id/ll_details_top_dot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
<View
android:id="@+id/view_details_top_dot_red"
android:layout_width="8dp"
android:layout_height="8dp"
android:background="@drawable/bg_details_photo_viewindicator_red"
/>
</RelativeLayout>
</FrameLayout> -
然后是OnPageChangeListener
public class DetailsPhotoPagerListener implements ViewPager.OnPageChangeListener {
private Context mContext;
private LinearLayout mLinearLayout; //底部圆点布局
private int mSize; //圆点数量
private List<ImageView> mDotView; //圆点容器
private float mDistance;
private View mView;
RelativeLayout.LayoutParams mViewParams;
public DetailsPhotoPagerListener(Context context, LinearLayout linearLayout, View view, int size) {
mContext = context;
mLinearLayout = linearLayout;
mSize = size;
mView = view;
initData();
}
private void initData() {
mDotView = new ArrayList<>();
for (int i = 0; i < mSize; i++) {
ImageView imageView = new ImageView(mContext);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
imageView.setBackgroundResource(R.drawable.bg_details_photo_viewindicator_grey);
if (i != 0) {
params.leftMargin = 10; //设置圆点相距距离
}
mLinearLayout.addView(imageView, params);
mDotView.add(imageView);
}
//以下为修改的主要代码
mViewParams = (RelativeLayout.LayoutParams) mView.getLayoutParams();
mView.post(new Runnable() { //获得两个点之间的距离
@Override
public void run() {
mDistance = mLinearLayout.getChildAt(1).getLeft() - mLinearLayout.getChildAt(0).getLeft();
}
});
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
position = position % mSize;
float leftMargin = 0;
if (position != mSize - 1) { //如果是在最后一页, 往右滑就不增加滑动距离
leftMargin = mDistance * (position + positionOffset);
} else {
leftMargin = mDistance * position;
}
if(mViewParams!=null){
mViewParams.leftMargin = Math.round(leftMargin);
mView.setLayoutParams(mViewParams);
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
}主要修改的地方还是在滑动监听的地方, 上面的注释也解释得挺清楚的.
-
最终效果
-