页面拖动到最后一页 再向下滑动回复到 第一页,第一页向前滑动回到 最后一页
同时,底部红色小圆点随着页面的滑动距离比例随时改变位置
布局:
<?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); } }
以上就是本文的全部内容,希望对大家的学习有所帮助。
本文地址:https://www.stayed.cn/item/6906
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我