开发者

Layout components Horizontally in Android

I am trying to create a layout in Android for a notification. My goal is to have the following displayed:

1: Icon for the app 2: Vertically stacked LinearLayout with Session title and Room to be held in 3: The start time of the session

The problem I am facing i开发者_如何学Pythons that #2 has a variable width depending on the size of the title. Hardcoding a width would look terrible if the user turns the handset sideways and goes into Landscape mode. Therefore here is my question:

How can I layout three components horizontally in Android such that #1 and #3 are left and right aligned respectively, and #2 simply takes the space remaining?


Look at RelativeLayout. You can make your middle LinearLayout use the android:layout_toLeftOf and android:layout_toRightOf to force it to be in the middle. I usually refer to Android's Common Layout Object page for a quick example to get started. There might still be a small caveat that I am missing but I know that's the general trick I used once and I am pretty sure it worked.


Something like this might be be a reasonable basis:

<RelativeLayout
      android:id="@+id/RelativeLayout01"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="horizontal"
      xmlns:android="http://schemas.android.com/apk/res/android">
      <ImageView
            android:id="@+id/ImageView01"
            android:src="@drawable/droid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"></ImageView>
      <LinearLayout
            android:id="@+id/LinearLayout01"
            android:layout_below="@id/ImageView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_alignTop="@+id/ImageView01"
            android:layout_toRightOf="@+id/ImageView01" 
            android:background="#ffff00">
            <TextView
                  android:text="This is wide, wide, title text"
                  android:id="@+id/TextView01"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"></TextView>
            <TextView
                  android:text="Short text"
                  android:id="@+id/TextView02"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"></TextView>
            <TextView
                  android:text="Middling wide text"
                  android:id="@+id/TextView03"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"></TextView>

</LinearLayout>
      <TextView
            android:text="Right hand text"
            android:id="@+id/TextView04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignTop="@+id/ImageView01" 
            android:background="#00ffff"></TextView>
</RelativeLayout>

You might like to hard code some left margin on the LinearLayout to give it a bit of spacing


After fighting with this for a few hours, I came to understand the use of layout_weight. Seem this was the appropriate means to fix the problem


try something like this:

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <ImageView android:id="@+id/img1"
        android:background="#00F"
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:layout_alignParentLeft="true"/>
    <ImageView android:id="@+id/img2"
        android:background="#0F0"
        android:layout_width="0dip"
        android:layout_height="100dip"
        android:layout_toRightOf="@id/img1"
        android:layout_toLeftOf="@+id/img3"/>
    <ImageView android:id="@+id/img3"
        android:background="#F00"
        android:layout_width="150dip"
        android:layout_height="100dip"
        android:layout_alignParentRight="true"/>
</RelativeLayout>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜