├── .gitignore ├── .idea ├── .gitignore ├── .name ├── compiler.xml ├── gradle.xml ├── kotlinc.xml └── misc.xml ├── README.md ├── app ├── .gitignore ├── build.gradle.kts ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── anlia │ │ └── pageturn │ │ └── ExampleInstrumentedTest.kt │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── example │ │ │ └── overlay │ │ │ ├── PageAdapter.kt │ │ │ ├── PageOverlayView.kt │ │ │ └── PagerOverlayActivity.kt │ └── res │ │ ├── drawable │ │ ├── ic_launcher_background.xml │ │ ├── ic_launcher_foreground.xml │ │ ├── img_0.png │ │ ├── img_1.png │ │ ├── img_2.png │ │ └── img_3.png │ │ ├── layout │ │ ├── activity_example.xml │ │ ├── activity_viewpager.xml │ │ └── item_page.xml │ │ ├── mipmap-anydpi-v26 │ │ ├── ic_launcher.xml │ │ └── ic_launcher_round.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── values-night │ │ └── themes.xml │ │ ├── values │ │ ├── colors.xml │ │ ├── strings.xml │ │ └── themes.xml │ │ └── xml │ │ ├── backup_rules.xml │ │ └── data_extraction_rules.xml │ └── test │ └── java │ └── com │ └── anlia │ └── pageturn │ └── ExampleUnitTest.kt ├── build.gradle.kts ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle.kts /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/caches 5 | /.idea/libraries 6 | /.idea/modules.xml 7 | /.idea/workspace.xml 8 | /.idea/navEditor.xml 9 | /.idea/assetWizardSettings.xml 10 | .DS_Store 11 | /build 12 | /captures 13 | .externalNativeBuild 14 | .cxx 15 | local.properties 16 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | -------------------------------------------------------------------------------- /.idea/.name: -------------------------------------------------------------------------------- 1 | page_overlay -------------------------------------------------------------------------------- /.idea/compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 19 | 20 | -------------------------------------------------------------------------------- /.idea/kotlinc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PagerOverlay 2 | ViewPager2另辟蹊径实现图片遮罩切割页面切换效果的Demo项目 3 | 4 | 详情见原文：https://juejin.cn/spost/7249627865426198583 5 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /app/build.gradle.kts: -------------------------------------------------------------------------------- 1 | plugins { 2 | id("com.android.application") 3 | id("org.jetbrains.kotlin.android") 4 | } 5 | 6 | android { 7 | namespace = "com.example.overlay" 8 | compileSdk = 33 9 | 10 | defaultConfig { 11 | applicationId = "com.example.overlay" 12 | minSdk = 24 13 | targetSdk = 33 14 | versionCode = 1 15 | versionName = "1.0" 16 | 17 | testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner" 18 | } 19 | 20 | buildTypes { 21 | release { 22 | isMinifyEnabled = false 23 | proguardFiles( 24 | getDefaultProguardFile("proguard-android-optimize.txt"), 25 | "proguard-rules.pro" 26 | ) 27 | } 28 | } 29 | compileOptions { 30 | sourceCompatibility = JavaVersion.VERSION_1_8 31 | targetCompatibility = JavaVersion.VERSION_1_8 32 | } 33 | kotlinOptions { 34 | jvmTarget = "1.8" 35 | } 36 | buildFeatures { 37 | viewBinding = true 38 | } 39 | } 40 | 41 | dependencies { 42 | 43 | implementation("androidx.core:core-ktx:1.9.0") 44 | implementation("androidx.appcompat:appcompat:1.6.1") 45 | implementation("com.google.android.material:material:1.9.0") 46 | implementation("androidx.constraintlayout:constraintlayout:2.1.4") 47 | implementation("androidx.recyclerview:recyclerview:1.3.1-rc01") 48 | implementation("androidx.viewpager2:viewpager2:1.1.0-beta02") 49 | testImplementation("junit:junit:4.13.2") 50 | androidTestImplementation("androidx.test.ext:junit:1.1.5") 51 | androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1") 52 | } -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /app/src/androidTest/java/com/anlia/pageturn/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.anlia.pageturn 2 | 3 | import androidx.test.platform.app.InstrumentationRegistry 4 | import androidx.test.ext.junit.runners.AndroidJUnit4 5 | 6 | import org.junit.Test 7 | import org.junit.runner.RunWith 8 | 9 | import org.junit.Assert.* 10 | 11 | /** 12 | * Instrumented test, which will execute on an Android device. 13 | * 14 | * See [testing documentation](http://d.android.com/tools/testing). 15 | */ 16 | @RunWith(AndroidJUnit4::class) 17 | class ExampleInstrumentedTest { 18 | @Test 19 | fun useAppContext() { 20 | // Context of the app under test. 21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext 22 | assertEquals("com.anlia.pageturn", appContext.packageName) 23 | } 24 | } -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 15 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/overlay/PageAdapter.kt: -------------------------------------------------------------------------------- 1 | package com.example.overlay 2 | 3 | import android.graphics.drawable.Drawable 4 | import android.view.LayoutInflater 5 | import android.view.ViewGroup 6 | import androidx.recyclerview.widget.RecyclerView 7 | import com.example.overlay.databinding.ItemPageBinding 8 | 9 | class PageAdapter(val items: List) : RecyclerView.Adapter() { 10 | override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PageViewHolder { 11 | return PageViewHolder( 12 | ItemPageBinding.inflate( 13 | LayoutInflater.from(parent.context), 14 | parent, 15 | false 16 | ) 17 | ) 18 | } 19 | 20 | override fun getItemCount(): Int { 21 | return items.size 22 | } 23 | 24 | override fun onBindViewHolder(holder: PageViewHolder, position: Int) { 25 | holder.vb.img.setImageDrawable(items[position].drawable) 26 | holder.vb.id.text = items[position].id 27 | } 28 | } 29 | 30 | class PageViewHolder(val vb: ItemPageBinding) : RecyclerView.ViewHolder(vb.root) 31 | 32 | class PageItem( 33 | val id: String, 34 | val drawable: Drawable? 35 | ) { 36 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/overlay/PageOverlayView.kt: -------------------------------------------------------------------------------- 1 | package com.example.overlay 2 | 3 | import android.content.Context 4 | import android.graphics.Bitmap 5 | import android.graphics.Canvas 6 | import android.view.View 7 | import androidx.core.graphics.withClip 8 | 9 | class PageOverlayView constructor(context: Context) : View(context) { 10 | 11 | var overlay: Bitmap? = null 12 | set(value) { 13 | field?.recycle() 14 | field = value 15 | } 16 | var currentPosition: Int = -1 17 | var currentPositionOffsetPx: Int = 0 18 | set(value) { 19 | field = value 20 | invalidate() 21 | } 22 | 23 | 24 | override fun onDraw(canvas: Canvas?) { 25 | val overlay = overlay ?: return super.onDraw(canvas) 26 | canvas?.withClip(left, top, width - currentPositionOffsetPx, bottom) { 27 | drawBitmap(overlay, 0f, 0f, null) 28 | } 29 | 30 | } 31 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/overlay/PagerOverlayActivity.kt: -------------------------------------------------------------------------------- 1 | package com.example.overlay 2 | 3 | import android.os.Bundle 4 | import android.util.Log 5 | import androidx.appcompat.app.AppCompatActivity 6 | import androidx.appcompat.content.res.AppCompatResources 7 | import androidx.core.view.drawToBitmap 8 | import androidx.core.view.get 9 | import androidx.recyclerview.widget.RecyclerView 10 | import androidx.viewpager2.widget.ViewPager2 11 | import com.example.overlay.databinding.ActivityViewpagerBinding 12 | 13 | class PagerOverlayActivity : AppCompatActivity() { 14 | 15 | private val vb by lazy { 16 | ActivityViewpagerBinding.inflate(layoutInflater) 17 | } 18 | 19 | private val pageOverlayView by lazy { PageOverlayView(this) } 20 | 21 | override fun onCreate(savedInstanceState: Bundle?) { 22 | super.onCreate(savedInstanceState) 23 | setContentView(vb.root) 24 | vb.viewpager.also { viewpager -> 25 | viewpager.adapter = PageAdapter( 26 | listOf( 27 | PageItem("img_0", AppCompatResources.getDrawable(this, R.drawable.img_0)), 28 | PageItem("img_1", AppCompatResources.getDrawable(this, R.drawable.img_1)), 29 | PageItem("img_2", AppCompatResources.getDrawable(this, R.drawable.img_2)), 30 | PageItem("img_3", AppCompatResources.getDrawable(this, R.drawable.img_3)), 31 | ) 32 | ) 33 | viewpager.setPageTransformer { page, position -> 34 | Log.d( 35 | "ViewPagerActivity", 36 | "setPageTransformer pos: $position, currentPos: ${viewpager.currentItem}" 37 | ) 38 | if (position < 0f) { 39 | page.translationX = 0f 40 | page.translationZ = 0f 41 | } else { 42 | page.translationX = page.width * -position 43 | page.translationZ = -position 44 | } 45 | 46 | } 47 | viewpager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() { 48 | override fun onPageSelected(position: Int) { 49 | super.onPageSelected(position) 50 | pageOverlayView.layout( 51 | viewpager.left, 52 | viewpager.top, 53 | viewpager.right, 54 | viewpager.bottom 55 | ) 56 | Log.d("ViewPagerActivity", "onPageSelected: $position") 57 | } 58 | 59 | override fun onPageScrolled( 60 | position: Int, 61 | positionOffset: Float, 62 | positionOffsetPixels: Int 63 | ) { 64 | super.onPageScrolled(position, positionOffset, positionOffsetPixels) 65 | if (position != pageOverlayView.currentPosition) { 66 | pageOverlayView.overlay = 67 | viewpager.recyclerView.findViewHolderForAdapterPosition(position)?.itemView?.drawToBitmap() 68 | } 69 | pageOverlayView.currentPosition = position 70 | pageOverlayView.currentPositionOffsetPx = positionOffsetPixels 71 | Log.d( 72 | "ViewPagerActivity", 73 | "onPageScrolled: $position, positionOffsetPixels: $positionOffsetPixels" 74 | ) 75 | } 76 | }) 77 | viewpager.overlay.add(pageOverlayView) 78 | } 79 | } 80 | 81 | 82 | private val ViewPager2.recyclerView: RecyclerView 83 | get() = this[0] as RecyclerView 84 | 85 | } -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 15 | 18 | 21 | 22 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/img_0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lowae/PagerOverlay/59fa794bc9c9fe004052d1b4655a3b2ec106da06/app/src/main/res/drawable/img_0.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/img_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lowae/PagerOverlay/59fa794bc9c9fe004052d1b4655a3b2ec106da06/app/src/main/res/drawable/img_1.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/img_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lowae/PagerOverlay/59fa794bc9c9fe004052d1b4655a3b2ec106da06/app/src/main/res/drawable/img_2.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/img_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lowae/PagerOverlay/59fa794bc9c9fe004052d1b4655a3b2ec106da06/app/src/main/res/drawable/img_3.png -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_example.xml: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 |