Android启动画面没有徽标失真

时间:2017-07-28 17:21:39

标签: android android-layout android-imageview

是否可以创建一个带有徽标的启动画面,以保持其纵横比,同时可以单独调整背景图像的大小?我目前正在使用几个.png文件用于不同的分辨率,它们在大多数设备上看起来都很棒。然而,有一些手机严重扭曲了我的标识(即三星S8,移动垂直屏幕空间)。

我可以为我的闪屏背景处理一些失真,但是瘦/压扁徽标是不可接受的。有谁知道如何做到这一点?对于新布局,矢量drawable徽标会比.png更好吗?

5 个答案:

答案 0 :(得分:8)

在layout.xml中渲染启动视图而不是主题背景(如此处推荐的其他答案)需要更长时间才能加载。这是因为首先加载应用程序的主题,然后构建活动并最后填充布局。由于启动画面的目的是在应用程序加载时显示某些内容,因此在加载启动画面时延迟约0.5秒会导致明显的延迟。加载启动作为主题windowBackground执行得更好(在点击启动器图标后几乎立即呈现),但有一些限制可以解决。您当前根据屏幕宽度定义多个徽标大小的方法是处理这种情况的正确方法。这是一个示例配置,它处理Android v21之前和之后的差异:

值/的themes.xml:

<style name="SplashThemeCommon" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowBackground">@drawable/splash_logo_theme</item>
</style>

<style name="SplashTheme" parent="SplashThemeCommon">
    <item name="android:windowFullscreen">true</item>
</style>

值-V21 /的themes.xml:

<style name="SplashTheme" parent="SplashThemeCommon">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

抽拉/ splash_logo_theme.xml

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

接下来,您可以添加&#34; splash_logo.png&#34;的副本。用于不同的屏幕配置。你有几个合理的选择。详尽的方法可能包括每种屏幕尺寸的不同徽标:

  • 抽拉-sw320dp-xxxhdpi / splash_logo.png
  • 抽拉-sw400dp-xxxhdpi / splash_logo.png
  • 抽拉-sw480dp-xxxhdpi / splash_logo.png
  • 抽拉-sw600dp-xxxhdpi / splash_logo.png
  • 抽拉-sw720dp-xxxhdpi / splash_logo.png
  • 抽拉-sw820dp-xxxhdpi / splash_logo.png

&#34; swXXXdp&#34;表示XXX是dp中最小的屏幕尺寸(宽度或高度)。 820dp将是一个巨大的平板电脑,320dp将是一个旧的小型设备,今天大多数旗舰设备将属于400dp类别。 450dp宽的设备将使用400dp图像。

为什么我在这里定义xxxhdpi?因为如果你没有指定,Android将假设它是一个mdpi图像,并试图升级/调整更高的dpi设备(今天大多数旗舰手机都是xxhdpi)。这种升级将导致您的图像变得模糊,并且比原始图像更大。通过在此处指定xxxhdpi,Android将仅尝试缩小图像,确保图像永远不会变得模糊;这是一个优化,所以我们也不需要为ldpi,mdpi,hdpi,xhdpi等定义单独的图像。

在APK中有6张图片虽然有点浪费。我们可以进一步优化这种方法,以便在应用程序中包含更少的图像,并确保更小的APK大小。相反,我们只包括以下两个图像:

  • 抽拉-sw600dp-xxxhdpi / splash_logo.png
  • 绘制-xxxhdpi / splash_logo.png

600dp及更大版本(平板电脑)的任何设备都拥有较大的图像副本以利用较大的屏幕空间,而所有其他手机使用位于垃圾箱中的较小副本而没有屏幕宽度限定符。这里的缺点是每个箱子都覆盖了如此大范围的屏幕宽度,4&#34;设备将占用屏幕的大部分而不是6&#34;设备。这是降低APK大小的折衷方案,大多数用户都不会注意到,即使在最小的设备上图像也不会被切断。

那么我们应该包括什么尺寸的png?它们需要是一个特定的大小才能在主题中显示,因为与layout.xml不同,我们无法在XML中指定宽度/高度(可绘制的宽度/高度支持仅在API 23中添加)。这意味着如果你包含一个非最佳的png大小,它将显得太小或两个大;如果太大,它实际上会被切断。获得合适尺寸的好计划是:

  • 使用默认的LinearLayout创建一个layout / test.xml文件,并且没有可见内容
  • 在Android Studio中打开它,然后在布局编辑器的左下角选择“设计”标签
  • 在布局编辑器的顶栏中将主题更改为SplashTheme
  • 将设备更改为&#34; Pixel XL&#34;
  • 在drawable-sw400dp / splash_logo.png
  • 下放置图像
  • 在外部图像编辑器(如Photoshop或Gimp)中打开图像,更改大小,保存,然后检查Android Studio中的布局(您可能需要关闭并重新打开编辑器才能使更改生效)。重复,直到图像在布局中看起来正确的大小
  • 按比例生成其他屏幕宽度的图像;例如,sw320dp图像应为320/400或400dp图像尺寸的67%,而720dp图像应为720/400或400dp图像尺寸的180%。请记住,不要为较大的图像升级400dp图像,因为您会丢失质量。相反,请根据您的高质量原始副本生成所有图像
  • 将生成的图像放在上面指定的不同可绘制目录中
  • 在布局编辑器中选择不同屏幕尺寸的设备(包括平板电脑),并确保所有屏幕尺寸的徽标足够大,但不能切断

您如何知道哪个设备屏幕分辨率属于哪个swXXXdp类别?这需要简单的计算。让我们看看Pixel XL:

  • 屏幕尺寸为1440x2560
  • 因此最小尺寸为1440
  • 屏幕dpi为534
  • 以英寸为单位的屏幕宽度为1440/534 = 2.69&#34;
  • 打开网站:http://angrytools.com/android/pixelcalc/
  • 以英寸(&#34;在&#34;)框中输入2.69
  • 左侧的绿色框之一将显示dp,在本例中为431
  • 如果您拥有所有6个图像类别,Pixel XL将使用drawable-sw400dp / splash_logo.png图像,如果您只有两个图像类别,则使用drawable-xxxhdpi / splash_logo.png图像

答案 1 :(得分:2)

如果你的启动画面只有一个肖像图像,这里的解决方案是纵向全屏,并且居中但未在edit:裁剪   portrait landscape:

splash_screen.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layoutSplash"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/splash_screen_background">

    <ImageView
        android:contentDescription="@string/splash_screen_description"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        style="@style/SplashScreen" />

</LinearLayout>

值/ styles.xml

<style name="SplashScreen">
    <item name="android:src">@drawable/splash</item>
    <item name="android:adjustViewBounds">true</item>
    <item name="android:scaleType">fitCenter</item>
</style>

值端口/ styles.xml

<style name="SplashScreen">
    <item name="android:src">@drawable/splash</item>
    <item name="android:adjustViewBounds">true</item>
    <item name="android:scaleType">centerCrop</item>
</style>

答案 2 :(得分:1)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg"
    android:gravity="center">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/logo"/>

</RelativeLayout>

这将执行此操作

enter image description here
这是一个关系10。

enter image description here

答案 3 :(得分:0)

您是否考虑过维持ImageView的宽高比?以下是一个相关问题,应该指出正确的方向:How to scale an Image in ImageView to keep the aspect ratio

答案 4 :(得分:-2)

根本不需要使用布局,使用LayeredList,并将其设置为背景。这是一个例子;

<?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/splash_image"/> 
    </item> 
</layer-list>