返回顶部
首页 > 资讯 > 移动开发 >Android ViewPager无限循环实现底部小圆点动态滑动
  • 413
分享到

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

循环viewpager圆点动态Android 2022-06-06 08:06:34 413人浏览 薄情痞子
摘要

页面拖动到最后一页 再向下滑动回复到 第一页,第一页向前滑动回到 最后一页 同时,底部红色小圆点随着页面的滑动距离比例随时改变位置 布局: <?xml

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

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


布局:


<?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); 
  } 
   
  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); 
  } 
} 
您可能感兴趣的文章:Android利用ViewPager实现滑动广告板实例源码Android App中ViewPager所带来的滑动冲突问题解决方法Android App中使用ViewPager+Fragment实现滑动切换效果Android中ViewPager带来的滑动卡顿问题解决要点解析Android开发之使用ViewPager实现图片左右滑动切换效果android配合viewpager实现可滑动的标签栏示例分享Android利用ViewPager实现可滑动放大缩小画廊效果android viewpager实现竖屏滑动效果Android自定义ViewPager实现纵向滑动翻页效果android viewpager实现竖直滑动效果


--结束END--

本文标题: Android ViewPager无限循环实现底部小圆点动态滑动

本文链接: https://lsjlt.com/news/25425.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作