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

时间:2014-01-14 17:19:17

标签: android layout

我有以下布局。我在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>

1 个答案:

答案 0 :(得分:1)

* dpi文件夹中的不同资源仅考虑屏幕密度,而不是屏幕尺寸。您的图像资源仍然具有一些固有的大小:根据屏幕尺寸的不同,它们可能太大或太小,无法容纳它们。有基于屏幕大小(小,普通,大,xlarge)提供资源的选项,但这些文件夹只将屏幕分成多个桶。每个桶仍然具有不同的屏幕尺寸,它们将更紧密地在一起。因此,不可能为每个屏幕提供恰当的资源大小。相反,您需要告诉您的布局适当地扩展事物。例如,现在,android:layout_height="wrap_content",使用android:layout_height="match_parent"告诉你的顶层RelativeLayout,即使它在屏幕外延伸,你也希望它尽可能长。相反,您应该删除滚动视图并使用android:layout_weight将其固定到屏幕大小。在LinearLayouts内部,使用android:scaleType来定义哪些对象占用空白空间。在ImageViews上,使用{{1}}定义图像的缩放方式。