ViewPager无限循环+底部小圆点动态滑动

本文介绍如何在Android应用中实现ViewPager无限循环滚动,并结合底部小圆点导航,当用户滑动页面时,小圆点位置会动态变化。提供代码下载链接,详细解释了布局设置和代码实现细节。

代码下载:http://download.csdn.net/detail/chen_lian_/9465689 

页面拖动到最后一页 再向下滑动回复到 第一页,第一页向前滑动回到 最后一页

同时,底部红色小圆点随着页面的滑动距离比例随时改变位置


布局:

<?xml version="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实际上是灰色小圆点的容器,在代码中根据数据的长度动态确定数目




代码:

package com.lian.viewpagertest;

import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private TextView mTextView;
    private LinearLayout mLinearLayout;
    private View mView;
    private List<ImageView> mDataList;
    private int diatance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initView();
        initData();
        initEvent();
    }

    /**
     * 初始化数据
     */

    private void initData() {
        int[] sorce = new int[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e};

        mDataList = new ArrayList<ImageView>();

        for (int i = 0;i < sorce.length;i ++){
            ImageView img = new ImageView(getApplicationContext());
            img.setImageResource(sorce[i]);
            mDataList.add(img);

            //添加底部灰点
            View v = new View(getApplicationContext());
            v.setBackgroundResource(R.drawable.gray_circle);
            //指定其大小
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20,20);
            if (i != 0)
                params.leftMargin = 20;
            v.setLayoutParams(params);
            mLinearLayout.addView(v);
        }

        mViewPager.setAdapter(new MyAdapter());

        //设置每次加载时第一页在MAX_VALUE / 2 - Extra 页,造成用户无限轮播的错觉
        int startPage = Integer.MAX_VALUE / 2;
        int extra = startPage % mDataList.size();
        startPage = startPage - extra;
        mViewPager.setCurrentItem(startPage);
    }

    /**
     * ViewPager的容器
     */

    public class MyAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            //告诉容器我们的数据长度为Integer.MAX_VALUE,这样就可以一直滚动
            return Integer.MAX_VALUE;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            //若position超过mDataList.size(),会发生越界异常,所以这里每次超过size又从0开始计算位置
            position = position % mDataList.size();

            ImageView img = mDataList.get(position);
            container.addView(img);

            return img;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {

            position = position % mDataList.size();

            container.removeView((View)object);

           // super.destroyItem(container, position, object);
        }
    }

    private void initEvent() {


        /**
         * 当底部红色小圆点加载完成时测出两个小灰点的距离,便于计算后面小红点动态移动的距离
         */
        mView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
               diatance =  mLinearLayout.getChildAt(1).getLeft() - mLinearLayout.getChildAt(0).getLeft();
                Log.d("两点间距",diatance + "测出来了");
            }
        });

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                //测出页面滚动时小红点移动的距离,并通过setLayoutParams(params)不断更新其位置
                position = position % mDataList.size();
                float leftMargin = diatance * (position + positionOffset);
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mView.getLayoutParams();
                params.leftMargin = Math.round(leftMargin);
                mView.setLayoutParams(params);
                Log.d("红点在这",leftMargin + "");
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void 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);
    }
}


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值