首页 > 系统 > Android > 正文

Android ViewPager无限循环实现底部小圆点动态滑动

2020-01-02 06:59:29
字体:
来源:转载
供稿:网友

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

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


布局:

<?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);   } } 

以上就是本文的全部内容,希望对大家的学习有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表