Can't get proper layout with "fill_parent"
I'm trying to create this simple layout in Android.
A should wrap to fit its content and left|center_vertical
align.
B should expand as much as possible, filling all empty space.
C should be right-aligned, wrapping to fill its content and also being aligned center_vertical
.
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_paren开发者_运维问答t"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="left|center_vertical">
<!-- A -->
<ImageView android:id="@+id/example_item_icon"
android:layout_width="48px"
android:layout_height="48px"/>
<!-- B -->
<LinearLayout android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="left|center_vertical"
android:padding="5px">
<TextView android:id="@+id/example_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"/>
<TextView android:id="@+id/example_item_level_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold|italic"
android:lines="1"
android:textSize="10px"/>
</LinearLayout>
<!-- C -->
<TextView android:id="@+id/example_item_count_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="14px"/>
</LinearLayout>
In this layout, C is pushed off-screen. How can I make this layout work?
fill_parent means "be as big as the parent," not "use the remaining empty space." Instead of fill_parent, just use android:layout_width="0dip" and android:layout_weight="1".
the trick, use a relative layout ... here's an example (off the top of me head - not checked and missing height fields and vertical align settings to make it easy to see the important stuff).
<relativelayout android:width="fillParent">
<textview android:id="@+id/left" android:text="left"
android:width="wrap_content"
android:layout_alignParentleft="true" />
<textview android:id="@+id/right" android:text="right"
android:width="wrap_content"
android:layout_alignParentright="true" />
<textview android:id="@+id/middle" android:text="middle"
android:width="wrap_content"
android:layout_alignleft="@id/right" android:layout_alignright="@id/left" />
</relativelayout>
edit: here it is with the typos cleaned (and it is tested as working)
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/left"
android:text="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<TextView
android:id="@+id/right"
android:text="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
<TextView
android:id="@+id/middle"
android:text="middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/right"
android:layout_toRightOf="@id/left" />
</RelativeLayout>
Try this. I replaced the ImageViews
with TextViews
to show up in the XML editor easier. Note that I kept the 48px width on "A" which is not something I think you really want to have. Replace it with wrap_content.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_vertical">
<!-- A -->
<TextView android:layout_height="48px"
android:id="@+id/example_item_count_text2"
android:textSize="14px"
android:layout_weight="1"
android:text="this is item a"
android:textStyle="bold"
android:layout_width="48px">
</TextView>
<!-- B -->
<LinearLayout android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:layout_weight="1"
android:padding="5px">
<TextView android:id="@+id/example_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="this is B"
android:textStyle="bold"/>
<TextView android:id="@+id/example_item_level_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="this should be underneath B"
>
</LinearLayout>
<!-- C -->
<TextView android:id="@+id/example_item_count_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="this is item c"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="14px"/>
</LinearLayout>
Here's my answer. I just set the layout_weight
on B to be 1
. Evidently, layout_weight
is something like a percentage-based layout approach. I don't know how it works, but here is my finished product, looking great:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="left|center_vertical">
<ImageView android:id="@+id/example_item_icon"
android:layout_width="48px"
android:layout_height="48px"/>
<LinearLayout android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="left|center_vertical"
android:layout_weight="1"
android:padding="5px">
<TextView android:id="@+id/example_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"/>
<TextView android:id="@+id/example_item_level_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold|italic"
android:lines="1"
android:textSize="10px"/>
</LinearLayout>
<TextView android:id="@+id/example_item_count_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="14px"/>
</LinearLayout>
精彩评论