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文件夾中的不同資源僅考慮屏幕密度，而不考慮屏幕尺寸。 您的圖像資源仍然會具有一些固有的大小：它們可能太大或太小，無法滿足您希望的屏幕空間（具體取決於屏幕大小）。 有一些選項可根據屏幕大小（小，標准，大，xlarge）提供資源，但是這些文件夾僅將屏幕划分為存儲桶。 每個存儲桶仍將具有不同的屏幕尺寸，它們之間的距離會更近。 因此，不可能為每個屏幕提供正確的資源大小。 相反，您需要告訴您的布局適當縮放內容。 例如，現在，使用android:layout_height="wrap_content",您告訴頂層的RelativeLayout希望它長到需要的時間，即使它擴展到屏幕外也是如此。 相反，您應該刪除滾動視圖，並使用android:layout_height="match_parent"將其固定到屏幕尺寸。 在LinearLayouts內部，使用android:layout_weight定義哪些對象占用空白空間。 在ImageViews上，使用android:scaleType定義圖像的縮放比例。