Android Studio运行时按钮下滑偏移、ImageView不显示问题排查

问题原因 #

1. 骰子图片无法显示 #

你在ImageView中使用了tools:srcCompat="@drawable/dice_1"，tools命名空间下的所有属性仅在Android Studio预览阶段生效，应用编译运行后会被忽略，因此运行时没有给ImageView设置实际的图片资源，导致图片空白。

2. 按钮整体下滑、布局适配异常 #

• 主Activity运行时使用的主题和Android Studio预览时选择的主题不一致：如果运行时主题带有标题栏/ActionBar，会额外占用顶部空间，导致整个布局被向下挤压，和预览效果不符
• 所有按钮仅设置了顶部方向的约束，底部没有和父布局做关联限制，当屏幕高度较小时，底部按钮会超出屏幕范围无法显示
• 如果开启了沉浸式状态栏/边缘到边缘显示，布局没有设置适配系统栏的属性，内容会伸入状态栏区域，也会导致整体布局位置偏移

修复方案 #

1. 修复图片不显示问题 #

把ImageView中的tools:srcCompat替换为android:srcCompat或者android:src即可，修改后代码如下：

<ImageView
    android:id="@+id/imageView"
    android:layout_width="80dp"
    android:layout_height="100dp"
    android:contentDescription="@string/dice_image"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.513"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.202"
    android:srcCompat="@drawable/dice_1" />

如果需要在代码里动态切换骰子图片，也可以在MainActivity的onCreate方法中手动给ImageView设置图片：

// Kotlin示例
findViewById<ImageView>(R.id.imageView).setImageResource(R.drawable.dice_1)

// Java示例
ImageView diceImage = findViewById(R.id.imageView);
diceImage.setImageResource(R.drawable.dice_1);

2. 修复布局偏移、适配问题 #

第一步：统一预览和运行时的主题

检查AndroidManifest.xml中MainActivity的android:theme属性，和Android Studio预览窗口顶部选择的主题保持一致。如果不需要标题栏，可以使用无ActionBar的主题，例如：

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:theme="@style/Theme.MaterialComponents.DayNight.NoActionBar">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

第二步：添加滚动适配避免小屏内容溢出

给根布局外层嵌套一层ScrollView，让内容在小屏设备上可以滚动，避免底部按钮被截断：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <androidx.constraintlayout.widget.ConstraintLayout 
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:context=".MainActivity">

        <!-- 原有ImageView和Button代码保持不变 -->

    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

第三步：适配系统栏（可选）

如果开启了边缘到边缘显示，给根布局添加android:fitsSystemWindows="true"属性，让布局自动避开状态栏、导航栏区域，避免内容被系统栏遮挡。

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