android - 为 Android 中的大量密度设计 Layout-normal

标签 android android-layout

我正在 Android 中开发一个应用程序,但在为多种密度设计布局时遇到了问题。 我读过 android's documentation about supporting screens和很多博客,我仍然对这个主题很困惑。 在我的应用程序中,我根据文档创建了 android 资源目录。我的意思是,我有以下布局文件夹:

  • layout-normal/mylayout.xml
  • layout-small/mylayout.xml
  • layout-large/mylayout.xml
  • layout-xlarge/mylayout.xml

问题是,当我为普通屏幕使用 mylayout.xml 时,此布局并不适合所有密度。例如,该布局由两台普通屏幕设备使用,但其中一台的 xxhdpi 密度为 640dpX360dp(三星 s4),另一台设备的 mdpi 密度为 480dpX320dp(索尼 Xperia ST21a)。当我看到结果时,彼此之间的差异非常惊人,如果我努力适应其中一个,另一个(当然)会改变并且很糟糕。

这是普通屏幕的布局:

<?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">


<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/imageView"
    android:src="@drawable/androidladscape"
    android:visibility="visible"
    android:scaleType="fitXY" />

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageButton"
    android:layout_marginTop="27dp"
    android:src="@drawable/btnclose"
    android:background="@null"
    android:layout_alignParentTop="true"
    android:layout_alignRight="@+id/button"
    android:layout_alignEnd="@+id/button"
    android:visibility="invisible" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:layout_marginBottom="37dp"
    android:background="@drawable/downloadsmall"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginRight="30dp"
    android:layout_marginEnd="30dp"
    android:text="@string/button_download"
    android:textColor="#ffffff"
    android:textSize="29dp"
    android:visibility="invisible" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="@string/title_2"
    android:id="@+id/textView3"
    android:layout_below="@+id/imageButton"
    android:layout_alignLeft="@+id/button"
    android:layout_alignStart="@+id/button"
    android:layout_marginTop="20dp"
    android:textSize="30dp"
    android:textColor="#fafdff"
    android:singleLine="false"
    android:lineSpacingExtra="0.15sp"
    android:fontFamily="oswaldbold.ttf"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:text="@string/description_2"
    android:id="@+id/textView4"
    android:layout_below="@+id/textView3"
    android:layout_alignLeft="@+id/textView3"
    android:layout_alignStart="@+id/textView3"
    android:textColor="#ffffff"
    android:textSize="18sp"
    android:layout_marginTop="10dp"
    android:lineSpacingExtra="2sp"
    android:ellipsize="end"
    android:fontFamily="3"
    android:lines="3"
    android:maxLines="3" />

</RelativeLayout>

结果是:

  • 对于 xxhdpi 中的 640x360dp

enter image description here

  • 在 mdpi 中为 480x320dp

enter image description here

如您所见,我使用的是android推荐的dp和sp,但我真的不明白。如果我在第二段正下方添加一个按钮,问题就会变得更大。在三星 S4 中我可以看到它,但在 Xperia 中直接没有出现。

我该如何处理这种情况?

谢谢。 P.S.:我在这里阅读了很多问题,但找不到可以帮助我的答案。

[更新]

下图显示了我在设计中想要的普通布局:

enter image description here

但是,当我在 Moto G 设备上测试它时(xhdpi 密度为 592dpX360dp 的普通屏幕),我可以看到以下内容:

enter image description here

并且,S4 显示以下内容:

enter image description here

如果我设置一个,另一个就会损坏。

这是更新的布局,我使用的是默认的 android 字体

<?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">


<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/imageView"
    android:src="@drawable/bgtestlandscape"
    android:visibility="visible"
    android:scaleType="fitXY" />

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageButton"
    android:layout_marginTop="27dp"
    android:src="@drawable/testclose"
    android:background="@null"
    android:layout_alignParentTop="true"
    android:layout_alignRight="@+id/button"
    android:layout_alignEnd="@+id/button"
    android:visibility="visible" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:layout_marginBottom="37dp"
    android:background="@drawable/testdownload"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginRight="30dp"
    android:layout_marginEnd="30dp"
    android:text="@string/download"
    android:textColor="#ffffff"
    android:textSize="29dp"
    android:visibility="visible" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="@string/title_2"
    android:id="@+id/textView3"
    android:textSize="25sp"
    android:textColor="#000000"
    android:singleLine="false"
    android:lineSpacingExtra="0.15sp"
    android:fontFamily="oswaldbold.ttf"
    android:layout_marginTop="45dp"
    android:layout_below="@+id/imageButton"
    android:layout_toLeftOf="@+id/imageButton"
    android:layout_toStartOf="@+id/imageButton" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:text="@string/description_2"
    android:id="@+id/textView4"
    android:layout_below="@+id/textView3"
    android:layout_alignLeft="@+id/textView3"
    android:layout_alignStart="@+id/textView3"
    android:textColor="#000000"
    android:textSize="15sp"
    android:layout_marginTop="10dp"
    android:lineSpacingExtra="2sp"
    android:ellipsize="end"
    android:fontFamily="3"
    android:lines="3"
    android:maxLines="3" />

</RelativeLayout>

最佳答案

更新

正如我在您的布局中看到的那样 - 您希望文本与底部按钮左对齐,与顶部(“十字”)按钮右对齐。

你应该在任何地方为文本使用sp 单位。您的 Button 使用 dp 单位,因为您在不同屏幕上的 TextViewButton 宽度之间的比例不同。

移除 TextView 对齐到 ImageButton 的开始,并将两个 TextView 对齐到 Button 的开始和结束:

<?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">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView"
        android:src="@drawable/bgtestlandscape"
        android:visibility="visible"
        android:scaleType="fitXY" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton"
        android:layout_marginTop="27dp"
        android:src="@drawable/testclose"
        android:background="@null"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@+id/button"
        android:layout_alignEnd="@+id/button"
        android:visibility="visible" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:layout_marginBottom="37dp"
        android:background="@drawable/testdownload"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="30dp"
        android:layout_marginEnd="30dp"
        android:text="@string/download"
        android:textColor="#ffffff"
        android:textSize="29sp"
        android:visibility="visible" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/title_2"
        android:id="@+id/textView3"
        android:textSize="25sp"
        android:textColor="#000000"
        android:singleLine="false"
        android:lineSpacingExtra="0.15sp"
        android:fontFamily="oswaldbold.ttf"
        android:layout_marginTop="45dp"
        android:layout_below="@+id/imageButton"
        android:layout_alignLeft="@+id/button"
        android:layout_alignStart="@+id/button"
        android:layout_alignRight="@+id/button"
        android:layout_alignEnd="@+id/button"
     />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="@string/description_2"
        android:id="@+id/textView4"
        android:layout_below="@+id/textView3"
        android:layout_alignLeft="@+id/button"
        android:layout_alignStart="@+id/button"
        android:layout_alignRight="@+id/button"
        android:layout_alignEnd="@+id/button"
        android:textColor="#000000"
        android:textSize="15sp"
        android:layout_marginTop="10dp"
        android:lineSpacingExtra="2sp"
        android:ellipsize="end"
        android:fontFamily="3"
        android:lines="3"
        android:maxLines="3" />

</RelativeLayout>

旧答案

Sony Xperia ST21a 似乎安装了 Android 4.0。用于设置自定义字体的 android:fontFamily 属性从 Android 4.1 开始可用。因此,在 Sony Xperia 上,您的文本会使用默认的 Android 字体呈现。

在 Android 4.0 及更早版本中设置自定义字体:

TextView text = (TextView) findViewById(R.id.textView3);
Typeface font = Typeface.createFromAsset(getAssets(), "oswaldbold.ttf");
text.setTypeface(font);

关于android - 为 Android 中的大量密度设计 Layout-normal,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32823542/

相关文章:

javascript - 有异常(exception)的聚类标记(Google map android API)

android - 翻译数据库中不同语言的字符串

android - 如何在排列的颜色中设置按钮背景?

Android:如何创建 Google Plus 登录动画?

android - 谁能帮我正确设计这个

android - 嵌套回收器 View 高度不包含其内容

android - 是否有任何带有 fragment 的android zxing库的教程

java - XML 与 setImageDrawable/setImageBitmap

android - Admob 大小未填满父级

android - 不支持 320x480 以下分辨率的正确方法是什么