Android 布局多种屏幕尺寸和密度

Question

我有以下布局。我在 ldpi、mdpi、hdpi 和 xhdpi 适当的文件夹中有图像。我不明白为什么布局不能缩放到适当的大小。我添加了 ScrollView，因此至少您可以滚动查看整个布局，但这不是预期的效果。我希望所有内容在不滚动的情况下以各种大小和密度可见。我已经阅读了有关支持多种尺寸和密度的 Android 文档，但我不明白从哪里开始。我正在使用“adb shell am display-density”和“adb shell am display-size”命令在我的 Nexus 10 上模拟不同的设备。提前致谢。

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<RelativeLayout 
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg" >

<View
  android:id="@+id/viewSpacer0"
  android:layout_width="1dp"
  android:layout_height="7dip"
  android:layout_centerHorizontal="true" />

<LinearLayout
  android:id="@+id/linearLayoutLine1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerHorizontal="true"
  android:orientation="horizontal"
  android:layout_below="@+id/viewSpacer0" >

<ImageView
  android:id="@+id/imageLogo"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:scaleType="fitCenter"
  android:src="@drawable/logo_large" />

<View
  android:id="@+id/viewSpacer1"
  android:layout_width="20dp"
  android:layout_height="1dip" />

<ImageView
  android:id="@+id/imageView50Best"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:adjustViewBounds="true"
  android:src="@drawable/fifty_best_logo" />

</LinearLayout>

<View
  android:id="@+id/viewSpacer2"
  android:layout_width="1dp"
  android:layout_height="10dip"
  android:layout_below="@+id/linearLayoutLine1"
  android:layout_centerHorizontal="true" />

<TableLayout
  android:id="@+id/tableLayoutHeader"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@+id/viewSpacer2"
  android:layout_centerHorizontal="true"
  android:background="@color/transparent" >

<TableRow
  android:id="@+id/tableRowPhoneNumberLabels"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:gravity="center" >

<TextView
  android:id="@+id/textViewHospital"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Hospital"
  android:textSize="20sp"
  android:textColor="@color/white" />

<View
  android:id="@+id/viewSpacerBetweenLabels"
  android:layout_width="15dp"
  android:layout_height="1dip"
  android:layout_below="@+id/tableLayoutHeader"
  android:layout_centerHorizontal="true" />

<TextView
  android:id="@+id/textViewEmergencyRoom"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Emergency Room"
  android:textSize="20sp"
  android:textColor="@color/white" />

</TableRow>

<TableRow
  android:id="@+id/tableRowPhoneNumbers"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:gravity="center" >

<TextView
  android:id="@+id/textViewHospitalSwitchboard"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="(xxx) xxx-xxxx"
  android:textSize="20sp"
  android:textColor="@color/white" />

<View
  android:id="@+id/viewSpacerBetweenPhoneNumbers"
  android:layout_width="15dp"
  android:layout_height="1dip"
  android:layout_below="@+id/tableLayoutHeader"
  android:layout_centerHorizontal="true" />

<TextView
  android:id="@+id/textViewEmergencyPhone"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="(xxx) xxx-xxxx"
  android:textSize="20sp"
  android:textColor="@color/white" />

</TableRow>

</TableLayout>

<View
  android:id="@+id/viewSpacer3"
  android:layout_width="1dp"
  android:layout_height="15dip"
  android:layout_below="@+id/tableLayoutHeader"
  android:layout_centerHorizontal="true" />

<TableLayout
  android:id="@+id/tableLayoutMenu"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@+id/viewSpacer3"
  android:layout_centerHorizontal="true"
  android:background="@color/transparent" >

<TableRow
  android:id="@+id/tableRow1"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content" 
  android:gravity="center" >

<ImageButton
  android:id="@+id/imageDrSearch"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:src="@drawable/icon_dr_search" />

<ImageButton
  android:id="@+id/imageLocations"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:src="@drawable/icon_locations" />

</TableRow>

<TableRow
  android:id="@+id/tableRow2"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:gravity="center" >

<ImageButton
  android:id="@+id/imageSendCard"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:src="@drawable/icon_send_card" />

<ImageButton
  android:id="@+id/imageServices"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:src="@drawable/icon_services" />

</TableRow>

<TableRow
  android:id="@+id/tableRow3"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:gravity="center" >

<ImageButton
  android:id="@+id/ImageHealthEncyclopedia"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:src="@drawable/icon_health_encyclopedia" />

<ImageButton
  android:id="@+id/imageClassesEvents"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:src="@drawable/icon_events_classes" />

</TableRow>

<TableRow
  android:id="@+id/tableRow4"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:gravity="center" >

<ImageButton
  android:id="@+id/imageCareers"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:src="@drawable/icon_careers" />

<ImageButton
  android:id="@+id/imageNewsroom"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:src="@drawable/icon_newsroom" />

</TableRow>

</TableLayout>

<View
  android:id="@+id/viewSpacer4"
  android:layout_width="1dp"
  android:layout_height="5dip"
  android:layout_below="@+id/tableLayoutMenu"
  android:layout_centerHorizontal="true" />

<LinearLayout
  android:id="@+id/linearLayoutLine3"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerHorizontal="true"
  android:layout_below="@+id/viewSpacer4"
  android:background="@color/lightgrey" >

<ImageButton
  android:id="@+id/imageViewWebsite"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_medium"
  android:src="@drawable/www_small" />

<ImageButton
  android:id="@+id/imageViewFacebook"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_medium"
  android:src="@drawable/facebook_small" />

<ImageButton
  android:id="@+id/imageViewTwitter"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_medium"
  android:src="@drawable/twitter_small" />

</LinearLayout>

</RelativeLayout>

</ScrollView>

根据 Glee 的建议更新：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg" >

<View
  android:id="@+id/viewSpacer0"
  android:layout_width="1dp"
  android:layout_height="7dip"
  android:layout_centerHorizontal="true" />

<LinearLayout
  android:id="@+id/linearLayoutLine1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerHorizontal="true"
  android:orientation="horizontal"
  android:layout_below="@+id/viewSpacer0" >

<ImageView
  android:id="@+id/imageLogo"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_weight="2"
  android:scaleType="center"
  android:src="@drawable/logo_large" />

<View
  android:id="@+id/viewSpacer1"
  android:layout_weight="1"
  android:layout_width="20dp"
  android:layout_height="1dip" />

<ImageView
  android:id="@+id/imageView50Best"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_weight="2"
  android:adjustViewBounds="true"
  android:src="@drawable/fifty_best_logo" />

</LinearLayout>

<TableLayout
  android:id="@+id/tableLayoutHeader"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@+id/linearLayoutLine1"
  android:layout_centerHorizontal="true"
  android:background="@color/transparent" >

<TableRow
  android:id="@+id/tableRowPhoneNumberLabels"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:gravity="center" >

<TextView
  android:id="@+id/textViewHospital"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Hospital"
  android:layout_weight="2"
  android:textSize="20sp"
  android:textColor="@color/white" />

<View
  android:id="@+id/viewSpacerBetweenLabels"
  android:layout_width="15dp"
  android:layout_height="1dip"
  android:layout_weight="1"
  android:layout_below="@+id/tableLayoutHeader" />

<TextView
  android:id="@+id/textViewEmergencyRoom"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Emergency Room"
  android:layout_weight="2"
  android:textSize="20sp"
  android:textColor="@color/white" />

</TableRow>

<TableRow
  android:id="@+id/tableRowPhoneNumbers"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:gravity="center" >

<TextView
  android:id="@+id/textViewHospitalSwitchboard"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="(xxx) xxx-xxxx"
  android:textSize="20sp"
  android:layout_weight="2"
  android:textColor="@color/white" />

<View
  android:id="@+id/viewSpacerBetweenPhoneNumbers"
  android:layout_width="15dp"
  android:layout_height="1dip"
  android:layout_below="@+id/tableLayoutHeader"
  android:layout_weight="1"
  android:layout_centerHorizontal="true" />

<TextView
  android:id="@+id/textViewEmergencyPhone"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="(xxx) xxx-xxxx"
  android:textSize="20sp"
  android:layout_weight="2"
  android:textColor="@color/white" />

</TableRow>

</TableLayout>

<View
  android:id="@+id/viewSpacer3"
  android:layout_width="1dp"
  android:layout_height="15dip"
  android:layout_below="@+id/tableLayoutHeader"
  android:layout_centerHorizontal="true" />

<TableLayout
  android:id="@+id/tableLayoutMenu"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@+id/viewSpacer3"
  android:layout_centerHorizontal="true"
  android:background="@color/transparent" >

<TableRow
  android:id="@+id/tableRow1"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content" 
  android:gravity="center" >

<ImageButton
  android:id="@+id/imageDrSearch"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:scaleType="center"
  android:layout_weight="1"
  android:src="@drawable/icon_dr_search" />

<ImageButton
  android:id="@+id/imageLocations"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:scaleType="center"
  android:layout_weight="1"
  android:src="@drawable/icon_locations" />

</TableRow>

<TableRow
  android:id="@+id/tableRow2"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:gravity="center" >

<ImageButton
  android:id="@+id/imageSendCard"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:scaleType="center"
  android:layout_weight="1"
  android:src="@drawable/icon_send_card" />

<ImageButton
  android:id="@+id/imageServices"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:scaleType="center"
  android:layout_weight="1"
  android:src="@drawable/icon_services" />

</TableRow>

<TableRow
  android:id="@+id/tableRow3"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:gravity="center" >

<ImageButton
  android:id="@+id/ImageHealthEncyclopedia"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:scaleType="center"
  android:layout_weight="1"
  android:src="@drawable/icon_health_encyclopedia" />

<ImageButton
  android:id="@+id/imageClassesEvents"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:scaleType="center"
  android:layout_weight="1"
  android:src="@drawable/icon_events_classes" />

</TableRow>

<TableRow
  android:id="@+id/tableRow4"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:gravity="center" >

<ImageButton
  android:id="@+id/imageCareers"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:scaleType="center"
  android:layout_weight="1"
  android:src="@drawable/icon_careers" />

<ImageButton
  android:id="@+id/imageNewsroom"
  android:background="@color/transparent"
  android:padding="@dimen/padding_xsmall"
  android:scaleType="center"
  android:layout_weight="1"
  android:src="@drawable/icon_newsroom" />

</TableRow>

</TableLayout>

<View
  android:id="@+id/viewSpacer4"
  android:layout_width="1dp"
  android:layout_height="5dip"
  android:layout_below="@+id/tableLayoutMenu"
  android:layout_centerHorizontal="true" />

<LinearLayout
  android:id="@+id/linearLayoutLine3"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerHorizontal="true"
  android:layout_below="@+id/viewSpacer4"
  android:background="@color/lightgrey" >

<ImageButton
  android:id="@+id/imageViewWebsite"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_medium"
  android:layout_weight="5"
  android:src="@drawable/www_small" />

<ImageButton
  android:id="@+id/imageViewFacebook"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_medium"
  android:layout_weight="5"
  android:src="@drawable/facebook_small" />

<ImageButton
  android:id="@+id/imageViewTwitter"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/transparent"
  android:padding="@dimen/padding_medium"
  android:layout_weight="5"
  android:src="@drawable/twitter_small" />

</LinearLayout>

Answer 1

*dpi 文件夹中的不同资源只考虑屏幕密度，而不考虑屏幕大小。您的图像资源仍然具有一定的固有尺寸：它们可能太大或太小，以至于您希望它们适应的空间取决于屏幕尺寸。有根据屏幕大小（小、正常、大、超大）提供资源的选项，但这些文件夹仅将屏幕划分为存储桶。每个存储桶仍然有不同的屏幕尺寸，它们只是靠得更近了。因此，不可能为每个屏幕提供完全正确的资源大小。相反，您需要告诉您的布局以适当地缩放事物。例如，现在，使用android:layout_height="wrap_content",，您正在告诉您的顶级RelativeLayout，您希望它尽可能长，即使它延伸到屏幕外。相反，您应该删除滚动视图并使用android:layout_height="match_parent" 将其固定到屏幕大小。在 LinearLayouts 内部，使用 android:layout_weight 定义哪些对象占用空白空间。在 ImageViews 上，使用android:scaleType 来定义图像的缩放方式。