如何创建均匀间距的按钮?

时间:2010-08-07 08:49:33

标签: android

请原谅粗糙的Photoshop工作。但是这张图片应该非常简洁地展示我正在尝试做的事情:

buttons http://www.efalk.org/buttons3.png

简而言之,我希望按钮沿着屏幕的高度均匀分布,我希望它们的大小相同。有合理的方法吗?

2 个答案:

答案 0 :(得分:2)

您可以尝试这样的事情:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="@+id/FrameLayout01" android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android" android:layout_weight="1">

<Button android:text="@+id/Button01" android:id="@+id/Button01" 
android:layout_width="wrap_content" android:layout_height="wrap_content" 
android:layout_gravity="top|left">
</Button>
<Button android:text="@+id/Button02" android:id="@+id/Button02" 
android:layout_width="wrap_content" android:layout_height="wrap_content" 
android:layout_gravity="top|right"></Button>
<Button android:text="@+id/Button03" android:id="@+id/Button03"
android:layout_width="wrap_content" android:layout_height="wrap_content" 
android:layout_gravity="left|center_vertical"></Button>
<Button android:text="@+id/Button04" android:id="@+id/Button04" 
android:layout_width="wrap_content" android:layout_height="wrap_content" 
android:layout_gravity="right|center_vertical"></Button>
<Button android:text="@+id/Button05" android:id="@+id/Button05" 
android:layout_width="wrap_content" android:layout_height="wrap_content" 
android:layout_gravity="bottom|left"></Button>
<Button android:text="@+id/Button06" android:id="@+id/Button06" 
android:layout_width="wrap_content" android:layout_height="wrap_content" 
android:layout_gravity="bottom|right"></Button>

</FrameLayout>

如果您需要超过三行,您可以定义一个LinearLayout并使用FrameLayout填充它,其中每个帧包含两个按钮。

答案 1 :(得分:1)

感谢您的想法;他们帮助我专注于这个问题。

然而,有时候,你只需要咬紧牙关并在代码中执行它。这是一个快速而肮脏的实现作为自定义ViewGroup。在设置布局之后,可能更容易在onCreate()中执行此操作,但这对我有用。

/**
 * $Id$
 *
 * SideLayout.java - Quick-and-dirty button layout
 *
 * Author: Edward A. Falk
 *         efalk@users.sourceforge.net
 *
 * Date: Aug 2010
 *
 * Overview: this container widget takes its children and lays
 * them out in two columns, on the left and right edges of the
 * parent.  Children are evenly spaced and forced to be all the
 * same size.
 */

import java.lang.Math;
import android.view.View;
import android.view.ViewGroup;
import android.content.Context;
import android.util.AttributeSet;

public class SideLayout extends ViewGroup {

    private int max_wid, max_hgt;

    public SideLayout(Context ctx) {
      super(ctx);
    }

    public SideLayout(Context ctx, AttributeSet attrs) {
      super(ctx, attrs);
    }

    public SideLayout(Context ctx, AttributeSet attrs, int defStyle) {
      super(ctx, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        final int num_children = getChildCount();

        // Since this is a special-purpose widget, this is brute simple.  All
        // of our children will have sizes of wrap_content, so we query them
        // all, then make a second pass assigning their final sizes.

        max_wid = 0;
        max_hgt = 0;
        for( int i = 0; i < num_children; ++i )
        {
            final View child = getChildAt(i);
            if( child != null && child.getVisibility() != View.GONE )
            {
                measureChild(child, widthMeasureSpec, heightMeasureSpec);
                max_wid = Math.max(max_wid, child.getMeasuredWidth());
                max_hgt = Math.max(max_hgt, child.getMeasuredHeight());
            }
        }

        // Make a second pass, tell children the actual size they got.
        for( int i = 0; i < num_children; ++i )
        {
            final View child = getChildAt(i);
            if( child != null && child.getVisibility() != View.GONE )
            {
                child.measure(
                  MeasureSpec.makeMeasureSpec(max_wid, MeasureSpec.EXACTLY),
                  MeasureSpec.makeMeasureSpec(max_hgt, MeasureSpec.EXACTLY));
            }
        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b)
    {
        final int num_children = getChildCount();
        int x,y;

        if( num_children <= 0 )
          return;

        // Split the children into two groups, left and right.  Each
        // column is evenly-spaced.

        int wid = r - l;
        int hgt = b - t;
        int nrow = (num_children + 1) / 2;
        int margin = (hgt - max_hgt * nrow) / (nrow + 1);

        int i = 0;
        for( int col = 0; col < 2; ++col ) {
            x = col == 0 ? 0 : wid - max_wid;
            y = margin;
            for( int row = 0; row < nrow; ++row, ++i ) {
                if( i < num_children ) {
                    final View child = getChildAt(i);
                    if( child != null && child.getVisibility() != View.GONE )
                      child.layout(x, y, x+max_wid, y+max_hgt);
                }
                y += margin + max_hgt;
            }   
        }   
    }   
}