问题
I have developed a clock widget. Looks fine on many devices. Except Motorola Xoom since it falls under XLARGE category.
This is the clock.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#00000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<AnalogClock android:id="@+id/AnalogClock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:dial="@drawable/widgetclock"
android:hand_hour="@drawable/widgethour"
android:hand_minute="@drawable/widgetminute" />
<!-- Time Row -->
<LinearLayout
android:id="@+id/lltimeheaderrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center|top"
android:layout_marginTop="45dp"
android:visibility="gone">
<!-- TIME -->
<LinearLayout android:id="@+id/llTimeDefault"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/HOUR"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/my_gray"
android:textStyle="bold"
android:textSize="15sp"/>
<TextView
android:id="@+id/MINUTE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/my_gray"
android:textStyle="bold"
android:textSize="15sp" />
</LinearLayout>
<TextView
android:id="@+id/AM_PM"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/my_gray"
android:textStyle="bold"
android:textSize="13sp"
android:padding="1dp" />
</LinearLayout>
</LinearLayout>
<!-- Calendar Graph -->
<LinearLayout
android:id="@+id/llCalGraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center|left"
android:layout_marginLeft="45dp">
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/CalendarImg"
android:src="@drawable/calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="@+id/DateDayG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|top"
android:layout_marginTop="3dp"
android:textSize="11sp"
android:textStyle="bold"
android:textColor="@color/my_gray"
android:shadowColor="@color/my_black"
android:shadowDx="1"
android:shadowDy="1"
android:shadowRadius="2"
></TextView>
<TextView android:id="@+id/DateNoG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:textSize="25sp"
android:textColor="@color/my_gray"
></TextView>
</FrameLayout>
</LinearLayout>
<!-- BATTERY -->
<LinearLayout
android:id="@+id/llBattGraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center|right"
android:layout_marginRight="45dp">
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/BatteryImg"
android:src="@drawable/batt_00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="@+id/BatteryFlashing"
android:src="@drawable/flashing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="13dp"
android:layout_marginLeft="2dp"
android:visibility="gone" />
<TextView
android:id="@+id/BatteryLevel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/my_gray"
android:textSize="18sp"
android:layout_gravity="center" />
</FrameLayout>
</LinearLayout>
<!-- Weather Row -->
<LinearLayout
android:id="@+id/llweatherrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center|bottom"
android:layout_marginBottom="45dp">
<!-- WEATHER IMAGE -->
<LinearLayout
android:id="@+id/llWeatherImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
android:layout_gravity="center">
<ImageView android:id="@+id/ivWeather"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/w3200"
/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
Basically it has 4 elements on the widget. Upper, Bottom. Left and Right Part. I simply use FrameLayout as a base Layout and each element is using LinearLayout with gravity 45dp to each corner.
This is how the widget looks on Xoom I am expecting the elements position should be on the red circle I draw.
- What is the best Layout combination should I use? Can you suggest?
- Let's say I'm sticking to this layout. How do I provide alternative layout for Xoom device? I tried to put clock.xml on layout-xlarge and on drawable-xlarge but nothing...
回答1:
The best and neater way is to create a folder layout-xlarge
and in there include the clock.xml
that will be loaded when the target device has a xlarge layout.
In that way you can make different layouts according to the screen size, density etc. Got from the developer docs http://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts
Another solution is to have all your sizes that are in a certain 45dp
or Xdp
into the values folder in a file named dimen
and then declare them in your xml as: ...="@dimen/largeButton"
and with the same way as mentioned before create a corresponding values-xlarge
and add the appropriate dimen
file in it.
This is very useful mechanisms because you can create different layouts according to the size of the screen and enable it to obtain different density pixels per size. If you haven't heard any of these terms ask me to provide more details.
EDIT: from the docs
res/layout/my_layout.xml // layout for normal screen size ("default")
res/layout-small/my_layout.xml // layout for small screen size
res/layout-large/my_layout.xml // layout for large screen size
res/layout-xlarge/my_layout.xml // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation
Are you sure exactly this kind of directories? With the same filename as the layout like clock.xml
everywhere?
ANOTHER EDIT to comment:
It is much more efficient because the transition in replacing just numbers rather than loading a full layout folder is much more efficient as you can guess. Despite that, you can reuse dimensions and not going back and forth among layouts to check "what was that dimension again?" like in a fix dimension of a big button.
And something more critical, each folder can be extended for a specific reason. If you want the same layout but different dimensions then you should override dimensions not copy-paste the whole layout. Makes more sense, doesn't it?
And for the effort is pretty much the same thing. Like layout-large/
folder you will have values-large/
. There is a very good example in the documents I have provided and across the internet.
来源:https://stackoverflow.com/questions/11584107/how-to-deal-with-android-xlarge-screen