What is the Android equivalent of this xaml grid?

2019-07-31 17:32发布

I would like to make the following layout in Android (just starting).

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />            
    </Grid.RowDefinitions>

    <TextBlock Text="Text1" Grid.Row="0" />

    <ListBox Grid.Row="1" />

    <StackPanel Orientation="Horizontal" Grid.Row="2">
        <Button Content="Button 1" />
        <Button Content="Button 2" />
    </StackPanel>

</Grid>

I got this far, but the buttons don't show up on screen. It seems that I can't have something equivalent to a star-sized row with my approach.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <TextView
            android:text="@string/AppName"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textView1"
            android:gravity="center_horizontal" />
        <ListView
            android:minHeight="25px"
            android:layout_width="fill_parent"
            android:id="@+id/listView1"
            android:choiceMode="multipleChoice"
            android:drawSelectorOnTop="true"
            android:layout_height="fill_parent"
            android:layout_below="@id/textView1" />

        <LinearLayout
            android:layout_below="@id/listView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <Button
                android:text="Button"
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />
            <Button
                android:text="Button"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/button2"
                android:gravity="center_vertical"
                android:layout_gravity="right" />
        </LinearLayout>

    </RelativeLayout>
</LinearLayout>

Can someone explain me ?

Thanks !

2条回答
家丑人穷心不美
2楼-- · 2019-07-31 18:06

Try this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <TextView
        android:text="AppName"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:gravity="center_horizontal" />
    <LinearLayout
        android:id="@+id/bottomLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">
        <Button
            android:text="Button"
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_weight="50"
            android:layout_height="match_parent" />
        <Button
            android:text="Button"
            android:layout_width="0dp"
            android:layout_weight="50"
            android:layout_height="match_parent"
            android:id="@+id/button2" />
    </LinearLayout>
    <ListView
        android:minHeight="25px"
        android:layout_width="fill_parent"
        android:id="@+id/listView1"
        android:choiceMode="multipleChoice"
        android:drawSelectorOnTop="true"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="false"
        android:layout_above="@id/bottomLayout"
        android:layout_below="@id/textView1" />
</RelativeLayout>

Edit: The "fill_parent" on listView1 was pushing the layout w/ buttons outside the screen. I moved the layout on top of the ListView and made it to align with the bottom of the parent (otherwise they would show up at top).

android:layout_alignParentBottom="true"

Then made the ListView align on top of the bottomLayout in addition to being at bottom of textView1.

android:layout_above="@id/bottomLayout"
android:layout_below="@id/textView1"
查看更多
不美不萌又怎样
3楼-- · 2019-07-31 18:06

You should use LinearLayout.RelativeLayout are not cross-platform friendly and can't be understood from an XAML or iOS perspective.

Anyway.

XAML Auto is the equivalent to Android android:wrap_content

To fill the whole LinearLayout with a view, you useandroid:fill_parentand to just have the view filling the remaining space, you need to combine it withandroid:layout_weight="1". That's strange but it works and allow to achieve more complex layouts easily.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:text="Text1"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" />
    <ListBox
        android:layout_weight="1"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent" />
    <LinearLayout
        android:orientation="horizontal"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent">
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Button 1" />
        <Button
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Button 2" />
    </LinearLayout>
</LinearLayout>

Note that LinearLayout is used both as a way to specify the size behavior - equivalent to rows and columns auto and start - , and as a StackPanel since it stacks anything based on it's orientation.

查看更多
登录 后发表回答