显示具有自动调整的初始屏幕图像

Posted

技术标签:

【中文标题】显示具有自动调整的初始屏幕图像【英文标题】:Show splash screen image with auto fit 【发布时间】:2012-09-18 10:26:03 【问题描述】:

我正在使用以下样式来显示一个用 MonoDroid 编写的 android 应用程序的启动画面。但是,它似乎会获取图像并将其最大化以适应整个屏幕,同时弄乱纵横比。因此,图像看起来又大又可怕。

有没有办法让它最大化,但保持纵横比仍然看起来不错?

<style name="Theme.Splash" parent="android:Theme">
  <item name="android:windowBackground">@drawable/splashscreenimage</item>
  <item name="android:windowNoTitle">true</item>
</style>

这是在 C# 中创建启动屏幕并进入登录的活动。

  [Activity(MainLauncher = true, Theme = "@style/Theme.Splash", NoHistory = true)]
  public class SplashScreenActivity : Activity
  
    protected override void OnCreate(Bundle bundle)
    
      base.OnCreate(bundle);

      // Start our real activity
      StartActivity(typeof(LoginActivity));
    
  

【问题讨论】:

看看这个post,有点类似的问题。 使用图像视图。这严格来说是窗口的背景。在 MonoDroid 中,加载环境时会有一两秒钟的暂停。我想在暂停期间显示一个启动画面。 【参考方案1】:

Android 中有多种类型的可绘制对象,包括实际位图、九个补丁和 XML 文件。尝试用一个 XML 文件来包装你的图像文件,并为其提供属性,然后将 XML 文件用作可绘制文件而不是源图像。

假设您的 xml 文件名为 scaled_background,而您的原始图像只是 background.png:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center"
android:src="@drawable/background" />

不是将背景设置为引用@drawable/background,而是将其设置为引用XML 文件:在本例中为@drawable/scaled_background。 Drawable documentation中提到了缩放模式的详细信息。

【讨论】:

虽然这通过不拉伸图像而起作用,但在平板电脑上,我的初始图像周围有空白区域。是否可以在该xml文件中的android:src="@drawable/background"下方制作彩色背景? 当然,使用层列表:) &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt; &lt;item android:drawable="@color/white" /&gt; &lt;item&gt; &lt;bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="bottom|center_horizontal" android:scaleGravity="" android:src="@drawable/background_splash" android:tileMode="disabled" /&gt; &lt;/item&gt; &lt;/layer-list&gt; 试着用一个 XML 文件来包装你的图像文件,并赋予它属性你能举个例子吗?如何在 XML 文件中包装矢量可绘制对象?【参考方案2】:

它似乎会获取图像并将其最大化以适合整个屏幕 同时搞乱纵横比。因此,图像看起来很大并且 太可怕了。

有没有办法让它最大化,但保持纵横比所以 还是好看?

图片被放大的原因是因为您使用的图片的像素高于您正在测试应用的设备屏幕的分辨率。为了解决这个问题,最好的方法是创建图片为不同设备屏幕设置适当大小(像素),然后将它们相应地放入drawable文件(drawable-ldpi、drawable-mdpi、drawable-hdpi等)中。 p>

以下是 Google 提供的各种显示器的最小屏幕尺寸列表(均以像素为单位):-


对于 Android 移动设备

LDPI- 426 x 320

MDPI- 470 x 320

HDPI- 640 x 480

XHDPI- 960 x 720


对于 Android 平板设备

LDPI- 200 x 320

MDPI- 320 x 480

HDPI- 480 x 800

XHDPI- 720 x 1280


现在在 res/drawable 中创建一个 XML drawable,它将使用 layer-list 在主题(Theme.Splash)中提供启动活动的 背景。图片在&lt;bitmap&gt; 中加载,并使用gravity 属性居中对齐。

<!-- background_splash.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@color/gray"/>

    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splashscreenimage"/>
    </item>

</layer-list>

现在修改您的 style (Theme.Splash) 并将 background_splash.xml 设置为您的启动活动的 背景在主题中。

<style name="Theme.Splash" parent="android:Theme">
    <item name="android:windowBackground">@drawable/background_splash.xml</item>
    <item name="android:windowNoTitle">true</item>
</style>

这样,图像应该设置在中心并保持纵横比。

注意:要调整图像大小,您可以使用 Adob​​e Photoshop(我发现它更容易使用)。必须进行一些试验才能获得所需的启动画面的正确图像尺寸。

根据喜好,您也可以使用9 Patch 图片,这样图片的边框可以拉伸到适合屏幕大小,而不影响图片的静态区域。


参考链接:

构建启动画面: https://plus.google.com/+AndroidDevelopers/posts/Z1Wwainpjhd

启动画面图像尺寸:​​m> android splash screen sizes for ldpi,mdpi, hdpi, xhdpi displays ? - eg : 1024X768 pixels for ldpi

【讨论】:

使用的 PNG 被拉伸到全屏 对于 API 23+,您应该使用 &lt;item android:gravity="center"&gt; 而不是 &lt;bitmap android:gravity="center" @kaushik 您将如何提及仅适用于平板电脑的图像。 ?

以上是关于显示具有自动调整的初始屏幕图像的主要内容,如果未能解决你的问题,请参考以下文章

有啥办法可以让按钮上的图像自动调整大小以适应屏幕?

如何根据屏幕大小调整按钮的图像和文本大小(自动布局)

如何调整 pub 包“flutter_native_splash”中的图像大小?

无法让 UIImageView 调整大小以适应屏幕

在不使用自动布局的情况下调整 iPhone 5 屏幕尺寸

iPhone - 调整图像和两个标签的大小以适合屏幕