这里有新鲜出炉的精品教程,程序狗速度看过来!
Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。尚未有统一中文名称,中国大陆地区较多人使用“安卓”或“安致”。
这篇文章主要为大家详细介绍了Android ViewPager导航小圆点实现无限循环效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
之前用View Pager做了一个图片切换的推荐栏(就类似与淘宝、头条客户端顶端的推荐信息栏),利用View Pager很快就能实现,但是一次无意间使用淘宝APP的时候,突然发现它的效果和我做的还不一样,淘宝APP的推荐栏可以左右无限循环切换,而ViewPager自身其实并没有支持这个功能。
其实实现这个无限循环不难,只需要在数据源的首尾各添加一张多余的图片,在onPagerChangeListener()中监听position<1和position>(总数据条目-1)就可以了。另外一点需要注意的是,这里的数据源+2,而导航小圆点却比数据源少2,这样在无限循环的时候,小圆点的切换就不好办了。本人最开始也是写逻辑在onPageSelected()里面判断条件,总感觉挺麻烦的,有没有更好的实现方式呢。答案是肯定的。只需将小圆点也首尾各家一个,并设置为invisible不就好了?
我的代码实现如下:
xml布局:
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- <android.support.v4.view.ViewPager
- android:id="@+id/vp_homepage"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- ></android.support.v4.view.ViewPager>
- <LinearLayout
- android:id="@+id/ll_dots_homepage_top"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_alignParentBottom="true"
- android:layout_marginBottom="8dp"
- android:gravity="center"
- android:orientation="horizontal">
- <ImageView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:clickable="true"
- android:padding="5dp"
- android:visibility="invisible"
- android:src="@drawable/dots"/>
- <ImageView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:clickable="true"
- android:padding="5dp"
- android:src="@drawable/dots"/>
- <ImageView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:clickable="true"
- android:padding="5dp"
- android:src="@drawable/dots"/>
- <ImageView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:clickable="true"
- android:padding="5dp"
- android:src="@drawable/dots"/>
- <ImageView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:clickable="true"
- android:padding="5dp"
- android:src="@drawable/dots"/>
- <ImageView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:clickable="true"
- android:padding="5dp"
- android:visibility="invisible"
- android:src="@drawable/dots"/>
- </LinearLayout>
- </RelativeLayout>
界面实现:
- public class HomePageFragment extends BaseFragment {
- private View view;
- private ViewPager mViewPager; //顶部信息推荐栏
- private MyViewPagerAdapter mViewPagerAdapter;
- private LinearLayout ll_dots_homepage_top; //顶部信息推荐栏导航点
- private int GUIDE_NUMBER = 4; //顶部信息推荐栏的数量
- private ImageView[] dotImages; //顶部信息推荐栏引导小圆点
- private int dotCurrentIndex; //顶部信息推荐栏小圆点偏移量
- private MyOnPageChangeListener mOnPageChangeListener;
- private List < View > mListDataViewPage;
- private Context context;
- @Override public void onAttach(Context context) {
- super.onAttach(context);
- this.context = context;
- }
- @Nullable@Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
- view = inflater.inflate(R.layout.frament_homepage, container, false);
- initData();
- initView();
- return view;
- }
- /**
- * 初始化一些基础数据
- */
- private void initData() {
- if (mListDataViewPage != null) {
- mListDataViewPage.clear();
- mListDataViewPage = null;
- } else {
- mListDataViewPage = new ArrayList < >();
- // 为了实现无限循环,首位两张图片都是重复的
- int[] resource = new int[] {
- R.drawable.test_viewpager_homepage_4,
- R.drawable.test_viewpager_homepage_1,
- R.drawable.test_viewpager_homepage_2,
- R.drawable.test_viewpager_homepage_3,
- R.drawable.test_viewpager_homepage_4,
- R.drawable.test_viewpager_homepage_1,
- };
- for (int i = 0; i < 6; i++) {
- WeakReference < Bitmap > bitmao = new WeakReference < Bitmap > (BitmapFactory.decodeResource(getResources(), resource[i]));
- ImageView imageView = new ImageView(context);
- imageView.setImageBitmap(bitmao.get());
- imageView.setScaleType(ImageView.ScaleType.FIT_XY);
- mListDataViewPage.add(imageView);
- }
- }
- }
- /**
- * 初始化底部推信息推荐栏引导小圆点View
- */
- private void initDots() {
- dotImages = new ImageView[mListDataViewPage.size()];
- for (int i = 0; i < mListDataViewPage.size(); i++) {
- dotImages[i] = (ImageView) ll_dots_homepage_top.getChildAt(i);
- dotImages[i].setEnabled(false);
- } * * //将第一个小圆点设置为高亮,这里的第一个偏移量是1,不是0
- dotImages[1].setEnabled(true);
- dotCurrentIndex = 1; * *
- }
- /**
- * initView
- */
- private void initView() {
- findLayout();
- findView();
- }
- /**
- * findLayout
- */
- private void findLayout() {
- ll_dots_homepage_top = (LinearLayout) view.findViewById(R.id.ll_dots_homepage_top);
- initDots();
- }
- /**
- * 初始化控件
- */
- private void findView() {
- mViewPager = (ViewPager) view.findViewById(R.id.vp_homepage);
- mViewPagerAdapter = new MyViewPagerAdapter(mListDataViewPage);
- mOnPageChangeListener = new MyOnPageChangeListener();
- mViewPager.setAdapter(mViewPagerAdapter);
- mViewPager.setOnPageChangeListener(mOnPageChangeListener); * *mViewPager.setCurrentItem(1, false); //默认选中第二张图片**
- }
- private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
- @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
- }
- @Override public void onPageSelected(int position) {
- if (position < 0 || position > mListDataViewPage.size() || position == dotCurrentIndex) {
- return;
- }
- if (mListDataViewPage.size() > 1) { //多于1,才会循环跳转
- if (position < 1) { //首位之前,跳转到末尾(N)
- position = 4;
- mViewPager.setCurrentItem(position, false);
- } else if (position > 4) { //末位之后,跳转到首位(1)
- position = 1;
- mViewPager.setCurrentItem(position, false); //false:不显示跳转过程的动画
- } else {
- dotImages[dotCurrentIndex].setEnabled(false);
- dotImages[position].setEnabled(true);
- dotCurrentIndex = position;
- }
- }
- }
- @Override public void onPageScrollStateChanged(int state) {
- }
- }
- }
注意代码中加粗的代码。初始的小圆点选中和ViewPager的position选中。
来源: http://www.phperz.com/article/17/0912/345766.html