如何在Android Studio中基于Firebase实现带跳转的插页式图片弹窗？

Hey there! Let's walk through exactly how to build that custom interstitial image popup in Android Studio—complete with Firebase-powered image/link fetching, screen-adaptive display, a close button, and click-to-jump functionality. Here's a step-by-step breakdown:

First, we'll use Firebase Remote Config to fetch the image and target URLs (this makes it easy to update the ad without pushing an app update). Start by adding the required dependencies to your module-level build.gradle (app/build.gradle):

dependencies {
    // Firebase Remote Config for dynamic URL fetching
    implementation 'com.google.firebase:firebase-config:21.4.1'
    // Glide for smooth image loading (replace with Picasso if you prefer)
    implementation 'com.github.bumptech.glide:glide:4.16.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.16.0'
}

Next, initialize Firebase Remote Config. You can do this in your Application class or the Activity where you'll show the popup:

val remoteConfig = Firebase.remoteConfig
val configSettings = remoteConfigSettings {
    // Adjust fetch interval based on your needs (1 hour here)
    minimumFetchIntervalInSeconds = 3600
}
remoteConfig.setConfigSettingsAsync(configSettings)

// Set default values (fallback if fetch fails)
remoteConfig.setDefaultsAsync(R.xml.remote_config_defaults)

Create a remote_config_defaults.xml file in res/xml/ to define fallback URLs:

<?xml version="1.0" encoding="utf-8"?>
<defaultsMap>
    <entry>
        <key>interstitial_image_url</key>
        <value>https://your-default-image-url.com/placeholder.jpg</value>
    </entry>
    <entry>
        <key>interstitial_link_url</key>
        <value>https://play.google.com/store/apps/details?id=your.app.package</value>
    </entry>
</defaultsMap>

Create a layout file dialog_interstitial_ad.xml for your popup. We'll use a full-screen semi-transparent background, a close button, and an image view that adapts to the screen:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#CC000000"> <!-- Semi-transparent dim background -->

    <!-- Close Button -->
    <ImageView
        android:id="@+id/btn_close"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentEnd="true"
        android:layout_margin="16dp"
        android:src="@drawable/ic_close" <!-- Use your own close icon -->
        android:background="?attr/selectableItemBackgroundBorderless"
        android:contentDescription="Close popup"/>

    <!-- Adaptive Ad Image -->
    <ImageView
        android:id="@+id/img_interstitial"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginHorizontal="16dp"
        android:adjustViewBounds="true" <!-- Preserves image aspect ratio -->
        android:scaleType="fitCenter" <!-- Scales image to fit without stretching -->
        android:clickable="true"
        android:background="?attr/selectableItemBackground"/>

</RelativeLayout>

Now, write the code to fetch Firebase data and display the popup. Add these functions to your Activity:

Fetch Data from Firebase #

private fun fetchInterstitialData() {
    val remoteConfig = Firebase.remoteConfig
    remoteConfig.fetchAndActivate()
        .addOnCompleteListener(this) { task ->
            val imageUrl = remoteConfig.getString("interstitial_image_url")
            val linkUrl = remoteConfig.getString("interstitial_link_url")
            
            // Show popup regardless of fetch success (use defaults if failed)
            showInterstitialPopup(imageUrl, linkUrl)
        }
}

Show the Custom Popup #

private fun showInterstitialPopup(imageUrl: String, linkUrl: String) {
    // Create a full-screen dialog
    val dialog = Dialog(this, android.R.style.Theme_Black_NoTitleBar_Fullscreen)
    dialog.setContentView(R.layout.dialog_interstitial_ad)
    dialog.setCancelable(false) // Prevent closing by tapping outside (optional)

    val closeBtn = dialog.findViewById<ImageView>(R.id.btn_close)
    val interstitialImg = dialog.findViewById<ImageView>(R.id.img_interstitial)

    // Load image with Glide
    Glide.with(this)
        .load(imageUrl)
        .placeholder(R.drawable.placeholder_image) // Optional loading placeholder
        .into(interstitialImg)

    // Handle close button click
    closeBtn.setOnClickListener {
        dialog.dismiss()
    }

    // Handle image click to open target link
    interstitialImg.setOnClickListener {
        try {
            val intent = Intent(Intent.ACTION_VIEW, Uri.parse(linkUrl))
            startActivity(intent)
            dialog.dismiss() // Close popup after opening link
        } catch (e: ActivityNotFoundException) {
            Toast.makeText(this, "No app found to open this link", Toast.LENGTH_SHORT).show()
        }
    }

    dialog.show()
}

• Screen Adaptation: The adjustViewBounds and fitCenter properties ensure the image scales correctly across all device sizes without distortion.
• Network Permissions: Add INTERNET permission to your AndroidManifest.xml to allow image loading and link navigation:

  <uses-permission android:name="android.permission.INTERNET"/>
  

• Prevent Repeat Displays: Use SharedPreferences to limit how often the popup shows (e.g., once per day):

  private fun shouldShowInterstitial(): Boolean {
      val sharedPref = getSharedPreferences("interstitial_prefs", MODE_PRIVATE)
      val lastShown = sharedPref.getLong("last_shown_time", 0)
      val oneDayMillis = 24 * 60 * 60 * 1000L
      return System.currentTimeMillis() - lastShown > oneDayMillis
  }
  
  // Call this when showing the popup to update the timestamp
  sharedPref.edit().putLong("last_shown_time", System.currentTimeMillis()).apply()
  

• Add Animations: Make the popup feel smoother by adding enter/exit animations. Define a style in res/values/styles.xml:

  <style name="PopupAnimation">
      <item name="android:windowEnterAnimation">@anim/fade_in</item>
      <item name="android:windowExitAnimation">@anim/fade_out</item>
  </style>
  

  Then apply it to the dialog:

  dialog.window?.attributes?.windowAnimations = R.style.PopupAnimation
  

Call fetchInterstitialData() at the right time—for example, when the app launches, after a user completes an action, or when a screen loads:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    
    // Show popup if conditions are met
    if (shouldShowInterstitial()) {
        fetchInterstitialData()
    }
}

内容的提问来源于stack exchange，提问作者KiiLa