Android片段针对不同屏幕尺寸进行了优化

Question

I am trying to optimize a view I have in an app for different screen sizes. The code I have is:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.xxx.xxx.MainActivity$PlaceholderFragment">

<TextView
    android:id="@+id/section_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/section_label"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/section_label"
    android:orientation="vertical">

    <TextView
        android:id="@+id/title1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="wrap_content"
    android:layout_height="210dp"
    android:layout_alignLeft="@+id/linearLayout1"
    android:layout_alignRight="@+id/linearLayout1"
    android:layout_below="@+id/linearLayout1"
    android:orientation="vertical">

    <com.parse.ParseImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/linearLayout2"
    android:layout_alignRight="@+id/linearLayout2"
    android:layout_below="@+id/linearLayout2"
    android:orientation="vertical">

    <TextView
        android:id="@+id/title2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/linearLayout3"
    android:layout_alignRight="@+id/linearLayout3"
    android:layout_below="@+id/linearLayout3"
    android:orientation="vertical">

    <ScrollView
        android:id="@+id/textAreaScroller"
        android:layout_width="fill_parent"
        android:layout_height="105dp"
        android:layout_x="0px"
        android:layout_y="25px"
        android:scrollbars="vertical">

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/fbedittext"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/fbedittext"
            android:layout_marginTop="22dp"
            android:lines="7" />
    </ScrollView>
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/linearLayout4"
    android:layout_alignRight="@+id/linearLayout4"
    android:layout_below="@+id/linearLayout4">

    <Button
        android:id="@+id/OK_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OK" />

</LinearLayout>

I have tested the code on an HTC Glacier and a Motorola Moto X, and if I get the view to look OK on one, it looks horrible on the other. I have tried to follow the directions here: http://developer.android.com/guide/practices/screens_support.html and I have created small, normal, and large layouts, and the Glacier nor the Motorola take the correct screen size. I would expect the Glacier to take the normal screen size (which it does), but the Motorola also takes the normal screen size (which I didn't expect). Does anyone have any idea as to how to make this look decent on all screen sizes? Ideally, I'd love to just have one XML file, and have the image view and description objects shrink and expand dynamically to fill up available space, and have the titles and button remain in their current location.

Thanks!

Answer 1

I think you need to use the dimentions folder in res-->values. try with

values
values-hdpi
values-xhdpi
values-large-hdpi

and also 
drawable/
drawable-large/
drawable-xlarge/

drawable-hdpi/
drawable-large-hdpi/
drawable-xlarge-hdpi/

drawable-xhdpi/
drawable-large-xhdpi/
drawable-xlarge-xhdpi/

with 

<supports-screens android:smallScreens="true" 
          android:normalScreens="true" 
          android:largeScreens="true"
          android:xlargeScreens="true"
          android:anyDensity="true" />

try with above folders in ur project.

Answer 2

I have made your layout quite flat, removed hierarchy. It is better if you use flat layouts. And this one should look as it is in any screen size, without having different layouts for different screen sizes.

Changed your imageView with default to check the layout, you may change it to your own.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.xxx.xxx.MainActivity$PlaceholderFragment" >

    <TextView
        android:id="@+id/section_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="label" />

    <TextView
        android:id="@+id/title1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="210dp"
        android:layout_below="@+id/title1"
        android:src="@drawable/abc_ab_bottom_transparent_dark_holo" />

    <TextView
        android:id="@+id/title2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageview"
        android:layout_centerHorizontal="true"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <ScrollView
        android:id="@+id/textAreaScroller"
        android:layout_width="fill_parent"
        android:layout_height="105dp"
        android:layout_below="@id/title2"
        android:layout_x="0px"
        android:layout_y="25px"
        android:scrollbars="vertical" >

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/fbedittext"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/fbedittext"
            android:layout_marginTop="22dp"
            android:lines="7" />
    </ScrollView>

    <Button
        android:id="@+id/OK_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textAreaScroller"
        android:text="OK" />

</RelativeLayout>