Android ViewPager无限循环实现底部小圆点动态滑动
2017-04-14 20:37
961 查看
页面拖动到最后一页 再向下滑动回复到 第一页,第一页向前滑动回到 最后一页
同时,底部红色小圆点随着页面的滑动距离比例随时改变位置
布局:
?
<?xmlversion="1.0"encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.lian.viewpagertest.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="内容" android:textSize="25sp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" /> <RelativeLayout android:id="@+id/rl_bottom" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="45dip"> <LinearLayout android:id="@+id/ll_points" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> </LinearLayout> <View android:id="@+id/v_redpoint" android:layout_width="10dip" android:layout_height="10dip" android:background="@drawable/red_circle"/> </RelativeLayout> </RelativeLayout>
其中red_circle是用shape绘制的红色小圆点
最后的LinearLayout实际上是灰色小圆点的容器,在代码中根据数据的长度动态确定数目
代码:
packagecom.lian.viewpagertest;
importandroid.os.Bundle;
importandroid.support.v4.view.PagerAdapter;
importandroid.support.v4.view.ViewPager;
importandroid.support.v7.app.AppCompatActivity;
importandroid.util.Log;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.view.ViewTreeObserver;
importandroid.widget.ImageView;
importandroid.widget.LinearLayout;
importandroid.widget.RelativeLayout;
importandroid.widget.TextView;
importjava.util.ArrayList;
importjava.util.List;
publicclass MainActivity extendsAppCompatActivity {
privateViewPager mViewPager;
privateTextView mTextView;
privateLinearLayout mLinearLayout;
privateView mView;
privateList<ImageView> mDataList;
privateint diatance;
@Override
protectedvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initView();
initData();
initEvent();
}
/**
* 初始化数据
*/
privatevoid initData() {
int[] sorce = newint[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e};
mDataList = newArrayList<ImageView>();
for(inti = 0;i < sorce.length;i ++){
ImageView img = newImageView(getApplicationContext());
img.setImageResource(sorce[i]);
mDataList.add(img);
//添加底部灰点
View v = newView(getApplicationContext());
v.setBackgroundResource(R.drawable.gray_circle);
//指定其大小
LinearLayout.LayoutParams params = newLinearLayout.LayoutParams(20,20);
if(i != 0)
params.leftMargin = 20;
v.setLayoutParams(params);
mLinearLayout.addView(v);
}
mViewPager.setAdapter(newMyAdapter());
//设置每次加载时第一页在MAX_VALUE / 2 - Extra 页,造成用户无限轮播的错觉
intstartPage = Integer.MAX_VALUE / 2;
intextra = startPage % mDataList.size();
startPage = startPage - extra;
mViewPager.setCurrentItem(startPage);
}
/**
* ViewPager的容器
*/
publicclass MyAdapter extendsPagerAdapter{
@Override
publicint getCount() {
//告诉容器我们的数据长度为Integer.MAX_VALUE,这样就可以一直滚动
returnInteger.MAX_VALUE;
}
@Override
publicboolean isViewFromObject(View view, Object object) {
returnview == object;
}
@Override
publicObject instantiateItem(ViewGroup container, intposition) {
//若position超过mDataList.size(),会发生越界异常,所以这里每次超过size又从0开始计算位置
position = position % mDataList.size();
ImageView img = mDataList.get(position);
container.addView(img);
returnimg;
}
@Override
publicvoid destroyItem(ViewGroup container, intposition, Object object) {
position = position % mDataList.size();
container.removeView((View)object);
// super.destroyItem(container, position, object);
}
}
privatevoid initEvent() {
/**
* 当底部红色小圆点加载完成时测出两个小灰点的距离,便于计算后面小红点动态移动的距离
*/
mView.getViewTreeObserver().addOnGlobalLayoutListener(newViewTreeObserver.OnGlobalLayoutListener() {
@Override
publicvoid onGlobalLayout() {
diatance = mLinearLayout.getChildAt(1).getLeft() - mLinearLayout.getChildAt(0).getLeft();
Log.d("两点间距",diatance + "测出来了");
}
});
mViewPager.setOnPageChangeListener(newViewPager.OnPageChangeListener() {
@Override
publicvoid onPageScrolled(intposition, floatpositionOffset, intpositionOffsetPixels) {
//测出页面滚动时小红点移动的距离,并通过setLayoutParams(params)不断更新其位置
position = position % mDataList.size();
floatleftMargin = diatance * (position + positionOffset);
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mView.getLayoutParams();
params.leftMargin = Math.round(leftMargin);
mView.setLayoutParams(params);
Log.d("红点在这",leftMargin + "");
}
@Override
publicvoid onPageSelected(intposition) {
}
@Override
publicvoid onPageScrollStateChanged(intstate) {
}
});
}
privatevoid initView() {
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mTextView = (TextView) findViewById(R.id.tv);
mLinearLayout = (LinearLayout) findViewById(R.id.ll_points);
mView = findViewById(R.id.v_redpoint);
}
}
?
相关文章推荐
- Android ViewPager无限循环实现底部小圆点动态滑动
- Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡
- Android 利用ViewPager实现底部圆点导航左右滑动效果以及Fragment页面切换
- Android ViewPager 实现滑动跟定时循环连播外加底部小红点指示器
- Android使用ViewPager实现无限循环滑动及轮播(附源码)
- Android使用ViewPager实现无限循环滑动及轮播(附源代码)
- Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡
- Android ViewPager实现无限循环滑动
- Android使用ViewPager实现无限循环滑动及轮播(附源码)
- Android ViewPager 实现无限循环滑动
- Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡
- Android开发模板------ViewPager(三):实现无限循环、可嵌套RecyclerView、可控制滑动速度
- Android viewpager中动态添加view并实现伪无限循环的方法
- Android ViewPager导航小圆点实现无限循环效果
- Android 使用ViewPager实现左右循环滑动图片
- Android Fragment+ViewPager实现循环滑动
- Android 利用ViewPager实现图片可以左右循环滑动效果附代码下载
- Android使用ViewPager实现左右循环滑动及轮播效果
- Android使用ViewPager实现左右循环滑动及轮播效果
- ViewPager实现无限循环切换和手势滑动效果