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>