欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-02-25 19:56:33
页面拖动到最后一页 再向下滑动回复到 第一页,第一页向前滑动回到 最后一页 同时,底部红色小圆点随着页面的滑动距离比例随时改变位置 布局: <...

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

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

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

布局:

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

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