Android Kotlin接入neumorphism库新拟态暗黑模式显示异常解决

新拟态效果的核心实现逻辑是：控件基色与所在页面背景完全一致，通过偏移的高光、暗部两层阴影模拟凹凸质感，库默认配置仅适配浅色模式，未做暗黑模式色值适配时会出现阴影违和、质感消失、边缘发灰的问题，按以下步骤修改即可：

• 第一步：配置分主题的色值资源
  分别在浅色、暗黑模式的资源目录下定义适配的新拟态专用色值，保证控件基色和页面背景完全统一：

  1. 在res/values/colors.xml（浅色模式）添加：

  <!-- 色值需和你页面浅色模式的背景色完全一致 -->
  <color name="neumorph_bg">#f0f0f0</color>
  <color name="neumorph_shadow_light">#ffffff</color>
  <color name="neumorph_shadow_dark">#d1d1d1</color>
  

  2. 在res/values-night/colors.xml（暗黑模式）添加：

  <!-- 不要用纯黑做基色，深灰色才能拉开阴影层次 -->
  <color name="neumorph_bg">#212121</color>
  <color name="neumorph_shadow_light">#2c2c2c</color>
  <color name="neumorph_shadow_dark">#161616</color>
  

  注意：如果你的页面背景不是上述默认色，直接把neumorph_bg改成你自己的页面背景色即可，色值差超过1就会出现明显的边框违和感

• 第二步：补全控件的自定义属性
  你当前布局中的NeumorphImageView没有配置任何新拟态专属属性，会直接使用库内置的浅色模式默认参数，替换为以下配置即可：

  <soup.neumorphism.NeumorphImageView
      android:id="@+id/template_image"
      android:layout_width="0dp"
      android:layout_height="120dp"
      android:layout_marginStart="16dp"
      android:layout_marginTop="16dp"
      android:layout_marginEnd="16dp"
      android:scaleType="centerInside"
      app:neumorph_backgroundColor="@color/neumorph_bg"
      app:neumorph_shadowColorLight="@color/neumorph_shadow_light"
      app:neumorph_shadowColorDark="@color/neumorph_shadow_dark"
      app:neumorph_shapeType="flat"
      app:neumorph_shadowElevation="6dp"
      app:neumorph_cornerRadius="16dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      tools:srcCompat="@tools:sample/avatars" />
  

  参数调整说明：

  • 需要凹陷效果时把app:neumorph_shapeType值改为pressed
  • 暗黑模式下阴影高度neumorph_shadowElevation建议设为4-6dp，数值过大会让阴影显得生硬脏污

• 第三步：适配应用内切换主题场景（可选）
  如果你的应用支持不重启Activity切换明暗主题，在主题切换逻辑中加入以下Kotlin代码手动更新控件参数即可：

  binding.templateImage.apply {
      setBackgroundColor(ContextCompat.getColor(context, R.color.neumorph_bg))
      setShadowColorLight(ContextCompat.getColor(context, R.color.neumorph_shadow_light))
      setShadowColorDark(ContextCompat.getColor(context, R.color.neumorph_shadow_dark))
  }
  

• 额外优化建议
  如果控件需要支持点击反馈，给控件添加自带的按压监听，避免按压时凹凸效果不匹配：

  binding.templateImage.setOnTouchListener(NeumorphPressOnTouchListener(binding.templateImage))
  

内容的提问来源于stack exchange，提问作者Sãúrâßh Jáðhàv