ViewPage实现一屏多页面显示（进阶版）

Posted 2021-09-03 我想月薪过万

相关文章

Android自定义轮播效果

ViewPager一屏多页面显示两侧无触摸/滑动事件

效果展示

实现思路

最难的写的是 transformPage 这里面的一段逻辑。我总结为如下几点：

第一步：中间 哪张 的 position 属于哪个范围把所有值打印出来观察获得
第二步：根据 观察 结果把区间分好
第三步：相邻区间保证连贯性
注意：这里一次性打印多少个 page 是由页面一次显示多少 imageView 决定的

 代码示例

MainActivity.java

package com.wust.mydialog;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
public class MainActivity extends Activity {

    private ViewPager vp_img;
    private int[] imageIds = new int[]
            {
                    R.drawable.pre1, R.drawable.pre2, R.drawable.pre3, R.drawable.pre4,
                    R.drawable.pre5, R.drawable.pre6, R.drawable.pre7, R.drawable.pre8,
                    R.drawable.pre9, R.drawable.pre10, R.drawable.pre11, R.drawable.pre12,
                    R.drawable.pre13, R.drawable.pre14, R.drawable.pre15, R.drawable.pre16,
                    R.drawable.pre17, R.drawable.pre18, R.drawable.pre19, R.drawable.pre20,
                    R.drawable.pre21
            };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bindView();
        bindData();
    }

    private void bindView() {
        vp_img = findViewById(R.id.vp_img);
    }

    private void bindData() {
        MyAdapter myAdapter = new MyAdapter();
        vp_img.setOffscreenPageLimit(5);
        vp_img.setPageMargin(10);
        vp_img.setPageTransformer(false,new MyTransformer());
        vp_img.setAdapter(myAdapter);
    }

    private class MyAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return imageIds.length;
        }

        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
            return view == object;
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            ImageView iv = new ImageView(getApplication());
            iv.setImageResource(imageIds[position]);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(50,50);
            iv.setLayoutParams(params);
            container.addView(iv);
            return iv;
        }

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView((View) object);
        }
    }

    private class MyTransformer implements ViewPager.PageTransformer {
        @Override
        public void transformPage(@NonNull View page, float position) {
            //第一步：中间 哪张 的 position 属于哪个范围把所有值打印出来观察获得
            //第二步：根据 观察 结果把区间分好
            //第三步：相邻区间保证连贯性
            //注意：这里一次性打印多少个 page 是由页面一次显示多少 imageView 决定的
            if (position>=1&&position<=2){
                page.setScaleY(1.0f + 0.5f*(position-(int)Math.abs(position)));
                page.setScaleX(1.0f + 0.5f*(position-(int)Math.abs(position)));
            }else if (position<=0||position>=3){
                page.setScaleY(0.5f);
                page.setScaleX(0.5f);
            }else if (position>0&&position<1){
                page.setScaleY(0.5f + 0.5f*(position-(int)Math.abs(position)));
                page.setScaleX(0.5f + 0.5f*(position-(int)Math.abs(position)));
            }else if (position>2&&position<3){
                page.setScaleY(0.5f + 1.0f*(1-position+(int)Math.abs(position)));
                page.setScaleX(0.5f + 1.0f*(1-position+(int)Math.abs(position)));
            }
        }
    }
}

 Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:clipChildren="false">


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_img"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:paddingLeft="150dp"
        android:paddingRight="150dp"
        android:clipToPadding="false"/>

</RelativeLayout>