viewpager欢迎页面底部点的滑动效果
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.viewpager.widget.ViewPager android:id="@+id/vp_guide" android:layout_width="match_parent" android:layout_height="match_parent"> </androidx.viewpager.widget.ViewPager> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="30dip"> <LinearLayout android:id="@+id/ll_guide_points" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> </LinearLayout> <View android:id="@+id/v_guide_redpoint" android:layout_width="10px" android:layout_height="10px" android:background="@drawable/shap"/> </RelativeLayout> </RelativeLayout>
public class MyAdapter extends PagerAdapter { private List<ImageView> mGuids; public MyAdapter(Context ctx, List<ImageView> guids) { this.mGuids = guids; } @Override public int getCount() { return mGuids.size();// 返回数据的个数 } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1;// 过滤和缓存的作用 } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object);//从viewpager中移除掉 } @Override public Object instantiateItem(ViewGroup container, int position) { // container viewpaper //获取View View child = mGuids.get(position); // 添加View container.addView(child); return child; } }
public class MainActivity extends AppCompatActivity { private ViewPager mVp_Guide; private View mGuideRedPoint; private LinearLayout mLlGuidePoints; private int[] mPics = new int[]{R.drawable.lunch1, R.drawable.lunch2, R.drawable.lunch3, R.drawable.lunch4}; private View v_point; private int disPoints; private int currentItem; private MyAdapter adapter; private List<ImageView> guids; private int width; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // UIUtils.init(getApplicationContext()); WindowManager windowManager = (WindowManager) getApplicationContext().getSystemService(Context.WINDOW_SERVICE); //获取屏幕的宽度 Point size = new Point(); windowManager.getDefaultDisplay().getSize(size); width = size.x; initView(); initData(); initEvent(); } private void initView() { mVp_Guide = (ViewPager) findViewById(R.id.vp_guide); mGuideRedPoint = findViewById(R.id.v_guide_redpoint); mLlGuidePoints = (LinearLayout) findViewById(R.id.ll_guide_points); } private void initData() { // viewpaper adapter适配器 guids = new ArrayList<ImageView>(); //创建viewpager的适配器 for (int i = 0; i < mPics.length; i++) { ImageView iv_temp = new ImageView(getApplicationContext()); iv_temp.setBackgroundResource(mPics[i]); //添加界面的数据 guids.add(iv_temp); //灰色的点在LinearLayout中绘制: //获取点 v_point = new View(getApplicationContext()); v_point.setBackgroundResource(R.drawable.shap2);//灰点背景色 //设置灰色点的显示大小 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10, 10); //设置点与点的距离,第一个点除外 if (i != 0) params.leftMargin = 47; v_point.setLayoutParams(params); mLlGuidePoints.addView(v_point); } // 创建viewpager的适配器 adapter = new MyAdapter(getApplicationContext(), guids); // 设置适配器 mVp_Guide.setAdapter(adapter); } private void initEvent() { //监听界面绘制完成 mGuideRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { //取消注册界面而产生的回调接口 mGuideRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this); //计算点于点之间的距离 disPoints = (mLlGuidePoints.getChildAt(1).getLeft() - mLlGuidePoints.getChildAt(0).getLeft()); } }); //滑动事件监听滑动距离,点更随滑动。 mVp_Guide.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { /* //当前viewpager显示的页码 //如果viewpager滑动到第三页码(最后一页),显示进入的button if (position == guids.size() - 1) { bt_startExp.setVisibility(View.VISIBLE);//设置按钮的显示 } else { //隐藏该按钮 bt_startExp.setVisibility(View.GONE); }*/ currentItem = position; } /** *页面滑动调用,拿到滑动距离设置视图的滑动状态 * @param position 当前页面位置 * @param positionOffset 移动的比例值 * @param positionOffsetPixels 便宜的像素 */ @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { //计算红点的左边距 float leftMargin = disPoints * (position + positionOffset); //设置红点的左边距 RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mGuideRedPoint.getLayoutParams(); //对folat类型进行四舍五入, layoutParams.leftMargin = Math.round(leftMargin); //设置位置 mGuideRedPoint.setLayoutParams(layoutParams); } @Override public void onPageScrollStateChanged(int state) { } }); //给页面设置触摸事件 mVp_Guide.setOnTouchListener(new View.OnTouchListener() { float startX; float endX; @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: startX = event.getX(); break; case MotionEvent.ACTION_UP: endX = event.getX(); //首先要确定的是,是否到了最后一页,然后判断是否向左滑动,并且滑动距离是否符合,我这里的判断距离是屏幕宽度的4分之一(这里可以适当控制) if (currentItem == (guids.size() - 1) && startX - endX >= (width / 4)) { Toast.makeText( MainActivity.this, "跳转", Toast.LENGTH_SHORT ).show(); //进入主页 // Intent intent = new Intent(MainActivity.this, Main2Activity.class); // startActivity(intent); // //这部分代码是切换Activity时的动画,看起来就不会很生硬 // overridePendingTransition(android.R.anim.slide_in_left, android.R.anim.slide_out_right); // finish(); } break; } return false; } }); } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { return true; } }
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <corners android:radius="10dp"/> <solid android:color="#e7e7e7"/> <size android:width="10px" android:height="10px"/> </shape>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <corners android:radius="10dp"/> <solid android:color="#FF393939"/> <size android:width="10px" android:height="10px"/> </shape>