问题描述:

I want to make a layout similar to this one:

www.ImageBanana.net - layout.png http://www.imagebanana.com/img/9kmlhy66/thumb/layout.png

Four square buttons on the screen - each of those using half of the screen with/screen height (whichever is smaler). Independent of screen size/resolution.

I already tried to achieve this by using a LinearLayoutbut the buttons are ending up using the correct width, but still having the height of the background (not square any more).

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content">

<Button

android:layout_height="wrap_content"

style="@style/CKMainButton"

android:layout_width="fill_parent"

android:text="@string/sights"

android:id="@+id/ApplicationMainSight"

android:layout_toLeftOf="@+id/ApplicationMainEvent"></Button>

<Button

android:layout_height="wrap_content"

style="@style/CKMainButton"

android:layout_width="fill_parent"

android:text="@string/sights"

android:id="@+id/ApplicationMainSight"

android:layout_toLeftOf="@+id/ApplicationMainEvent"></Button>

</LinearLayout>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content">

<Button

android:layout_height="wrap_content"

style="@style/CKMainButton"

android:layout_weight="1"

android:layout_width="fill_parent"

android:text="@string/usergenerated"

android:id="@+id/ApplicationMainUserGenerated" />

<Button

android:layout_height="wrap_content"

style="@style/CKMainButton"

android:layout_weight="1"

android:layout_width="fill_parent"

android:text="@string/tours"

android:id="@+id/ApplicationMainTour"/>

</LinearLayout>

</LinearLayout>

It's looking like this: www.ImageBanana.net - layout2.png http://www.imagebanana.com/img/i2ni6g4/thumb/layout2.png

How can i acchieve the Layout to look like the image at the top above?

网友答案:
import android.content.Context;
import android.util.AttributeSet;
import android.widget.LinearLayout;

public class SquareLayout extends LinearLayout {
    // Desired width-to-height ratio - 1.0 for square
    private final double mScale = 1.0;

    public SquareLayout(Context context) {
        super(context);
    }

    public SquareLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);

        if (width > (int)((mScale * height) + 0.5)) {
            width = (int)((mScale * height) + 0.5);
        } else {
            height = (int)((width / mScale) + 0.5);
        }

        super.onMeasure(
                MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
        );
    }
}
网友答案:

My solution is similar to the first one, however, I do the resizing in the onLayout method. Don't know which one is better.

For convenience I've wrapped my solution in a nice Android Library, see https://github.com/ronaldsteen/Android-SquareLayout-Library

网友答案:

I recommend the following way, it's straightforward and works

public class SquareLayout extends RelativeLayout {

   public SquareLayout(Context context) {
       super(context);
   }

   public SquareLayout(Context context, AttributeSet attrs) {
       super(context, attrs);
   }

   @Override
   public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
       super.onMeasure(widthMeasureSpec, widthMeasureSpec);
   }

}
网友答案:

I'm usually doing things like that:

View v; // the view i want to layout squared
v.measure(1,1);
int size = v.getMeasuredHeight(); // or v.getMeasuredWidth()...
LayoutParams params = ... // either your own, or returned from View
params.width = size;
params.height = size;
v.setLayoutParams(params);

This is certainly not the most sophisticated code, as it leaves most capabilities that can be exploited in MeasureSpec, but it gets the job done, as 'v.measure(1,1)' just says "Measure my view as it is!".

The absolute plus in my approach is that you don't have to subclass anything and you don't have to add some OnGlobalLayoutListener to your ViewTreeObserver. This works all at the spot where you build or inflate your layout in code.

网友答案:

ok, here's a revised example:

<?xml version="1.0" encoding="utf-8"?>
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent" android:layout_width="fill_parent">
    <RelativeLayout android:id="@+id/magaLoginLayout"
        android:layout_height="fill_parent" android:layout_width="fill_parent">
        <Button android:text="@+id/Button01" android:id="@+id/Button01"
            android:layout_width="160dip" android:layout_height="160dip" android:layout_marginTop="20dip"></Button>
        <Button android:text="@+id/Button03" android:layout_below="@+id/Button01" android:id="@+id/Button03"
            android:layout_alignLeft="@+id/Button01" android:layout_height="160dip" android:layout_width="160dip"></Button>
        <Button android:text="@+id/Button04" android:layout_below="@+id/Button01" android:id="@+id/Button04"
            android:layout_toRightOf="@+id/Button03" android:layout_height="160dip" android:layout_width="160dip"></Button>
        <Button android:text="@+id/Button02" android:id="@+id/Button02" android:layout_width="wrap_content"
            android:layout_toRightOf="@+id/Button01" android:layout_alignTop="@+id/Button01" android:layout_alignParentRight="true" android:layout_height="160dip"></Button>


</RelativeLayout>

</ViewFlipper>

alt text http://img297.imageshack.us/img297/2575/tmpzg.png

相关阅读:
Top