2014-01-14 56 views
0

我有以下佈局。我在ldpi,mdpi,hdpi和xhdpi適當的文件夾中有圖像。我不明白爲什麼佈局不能縮放到合適的尺寸。我添加了ScrollView,所以至少可以滾動查看整個佈局,但這不是預期的效果。我希望所有內容在不滾動的情況下以各種尺寸和密度顯示。我已閱讀了支持多種尺寸和密度的Android文檔,但我不明白該從哪裏下載。我正在使用「adb shell am display-density」和「adb shell am display-size」命令來模擬Nexus 10上的不同設備。Android佈局多屏幕尺寸和密度

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

後高興的建議更新時間:

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

+0

也許你的資源/ drawable-xxx的img沒有正確縮放:/,我也發現這是我的一個項目中的一個問題,今天我正在測試這個photoshop插件(http://www.cutandslice。我/)來幫助我解決資源大小問題 – GhostDerfel

+0

您可能還想檢查是否在運行時返回了正確的屏幕大小和DPI值,以防您的adb命令被忽略。 – TheIT

+0

@TheIT - 感謝您的評論。我該怎麼做呢?我運行adb命令後屏幕大小發生了變化。 –

回答

1

不同的資源,在* DPI文件夾只佔屏幕密度,而不是屏幕尺寸。您的圖片資源仍然會有一些固有尺寸:根據屏幕尺寸的不同,它們可能太大或太小,無法滿足您希望它們適合的空間。有一些選項可以根據屏幕大小(小,普通,大,xlarge)提供資源,但這些文件夾僅將屏幕分爲多個存儲桶。每個存儲桶仍然有不同的屏幕尺寸,它們將會更接近。因此,不可能爲每個屏幕提供恰當的資源大小。相反,你需要告訴你的佈局適當地擴展事物。例如,現在,通過android:layout_height="wrap_content",,您告訴您的最高級別的RelativeLayout,即使它在屏幕外延伸,您也希望它達到所需的時間。相反,您應該刪除滾動視圖並使用android:layout_height="match_parent"將其固定到屏幕大小。在LinearLayouts的內部,使用android:layout_weight來定義哪些對象佔用了空白空間。在ImageViews上,使用android:scaleType來定義圖像的縮放比例。

+0

非常感謝您的建議。我一直在玩佈局。查看上面的帖子瞭解我的更改。它有所改善,但我還很遙遠。還有其他建議嗎? –

+0

它有什麼問題?您可能希望將相對佈局更改爲線性佈局,併爲其所有子項使用權重。對於一些小屏幕,你也可能只是有太多的東西。 – GLee

+0

小屏幕和普通屏幕(在http://developer.android.com/guide/practices/screens_support.html中定義爲「表3」)的底部和側面被截斷。底部在一些大屏幕尺寸上被切斷。如何讓佈局在所有尺寸上完全可見? –