开发者

Button size relative to parent size in XML layout?

Is it possible to set in the XML layout file the size of the button so that, on one hand, it doesn't take the entire width of the parent (screen) and, on the other hand, doesn't use absolute pixel values?

To better explain my question, the problem in the following snippet is that "match_parent" takes the entire width:

<Button android:id="@+id/btn_1"
  开发者_如何学编程  android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="16px"
    android:paddingLeft="16px"
    android:paddingRight="16px"
    android:paddingTop="16px"
    android:text="@string/first_button" />

I know that it's possible to control the size during runtime but I am interested to know whether this is possible in an XML file as well.

Is there something like android:layout_width="match_HALF_parent"?


Layout weights can do this. Basically what you need to do is to set a weightSum in the parent layout, and then set a layout_weight in the child:

<?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="fill_parent"
    android:weightSum="2" android:orientation="horizontal">
    <Button android:id="@+id/btn_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingBottom="16px"
        android:paddingLeft="16px"
        android:paddingRight="16px"
        android:paddingTop="16px"
        android:text="@string/first_button" />
</LinearLayout>

It is the relationship between the parent's weightSum and the child's weight which determines the width of the child: in this case it will be half; if we were to increase the parent's weight sum to 3, the child would be one third the width of its parent.

I have written about this on my blog.


The raw example could be like this:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
>
    <Button
        android:text="Button"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginBottom="100dp"
        android:layout_marginTop="100dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
    ></Button>
</LinearLayout>

Alternatively, you could set android:padding to your layout instead of margin to button.


The solution is to nest severeal LinearLayouts. Usa one vertical LinearLayout as a container and stack horizontal LinerarLayouts on it. Each of the horizontal with a weight:

android:layout_weight="0.5"

You should also make sure to set the widths and heights as following:

android:layout_width="match_parent"
android:layout_height="match_parent"

Finally you fill these horizontal Layouts with Widgets (e.g. Buttons) and give them a weight, too.

A source could could look like the following snippet:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:background="@drawable/bg"
tools:context=".MainActivity">

<!--parent container-->
<LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <!--child container-->
    <!--each horizontal layout gets 1/3 of remaining space-->
    <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_weight="0.5"
            android:layout_height="match_parent">

        <Button
                android:background="@color/colorPrimary"
                android:layout_width="fill_parent"
                android:layout_weight="1"
                android:layout_height="fill_parent" android:text="100%" android:textSize="60dp"/>
    </LinearLayout>
    <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_weight="0.5"
            android:layout_height="match_parent">
        <Button
                android:background="@color/colorPrimary"
                android:layout_width="fill_parent"
                android:layout_weight="0.5"
                android:layout_height="fill_parent" 
                android:text="50%" 
                android:textSize="60dp"/>
        <Button
                android:background="@color/colorPrimaryDark"
                android:layout_width="fill_parent"
                android:layout_weight="0.5"
                android:layout_height="fill_parent" 
                android:textSize="60dp" 
                android:text="50%"/>
    </LinearLayout>
    <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_weight="0.5"
            android:layout_height="match_parent">
        <Button
                android:background="@color/colorPrimary"
                android:layout_width="fill_parent"
                android:layout_weight="0.7"
                android:layout_height="fill_parent" android:text="30%" android:textSize="60dp"/>
        <Button
                android:background="@color/colorPrimaryDark"
                android:layout_width="fill_parent"
                android:layout_weight="0.3"
                android:layout_height="fill_parent" android:allowUndo="false" android:text="70%"
                android:textSize="60dp"/>
    </LinearLayout>

    <!-- Just for spacing-->
    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="20dp">
    </RelativeLayout>
</LinearLayout>


</LinearLayout>

To get this as a result:

Button size relative to parent size in XML layout?

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜