Android GridLayout中元素平分且行充滿螢幕(計算器的介面效果)

有時候我們想用GridLayout做類似計算器的效果,可是看起來的效果確實這麼的糟糕,如下圖:

可是上圖的每個元素都沒有做到平分螢幕的1/4, 看起來很醜是吧!,

經過修改之後的效果圖如下:

原理:

拿到GridLayout中的列數/螢幕的寬度,然後通過GridLayout.getChildCount()去獲取GridLayout中的元素個數,然後迴圈設定寬度就可以做到平分效果

java:

package com.sl.horizontalscrollview;

import android.annotation.TargetApi;
import android.app.Activity;
import android.os.Build;
import android.os.Bundle;
import android.util.Log;
import android.widget.Button;
import android.widget.GridLayout;


public class MainActivity extends Activity {


    private static final String TAG = "MainActivity";
    private GridLayout mGridLayout;
    private int columnCount; //列數
    private int screenWidth; //螢幕寬度

    @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_m);

        mGridLayout = (GridLayout) findViewById(R.id.gridLayout);
        columnCount = mGridLayout.getColumnCount();
        screenWidth = this.getWindowManager().getDefaultDisplay().getWidth();
        Log.e(TAG, "column:" + columnCount + ";  screenwidth:" + screenWidth);
        for (int i = 0; i < mGridLayout.getChildCount(); i++) {
            Button button = (Button) mGridLayout.getChildAt(i);
            button.setWidth(screenWidth / columnCount);
        }
    }
}

XML:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/gridLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:rowCount="5"
    tools:ignore="NewApi">

    <Button
        android:id="@+id/empty"
        android:text="C" />

    <Button
        android:id="@+id/delete"
        android:text="←" />

    <Button
        android:id="@+id/divide"
        android:text="/" />

    <Button
        android:id="@+id/multiple"
        android:text="*" />

    <Button
        android:id="@+id/seven"
        android:text="7" />

    <Button
        android:id="@+id/eight"
        android:text="8" />

    <Button
        android:id="@+id/nine"
        android:text="9" />

    <Button
        android:id="@+id/minus"
        android:text="-" />

    <Button
        android:id="@+id/four"
        android:text="4" />

    <Button
        android:id="@+id/five"
        android:text="5" />

    <Button
        android:id="@+id/six"
        android:text="6" />

    <Button
        android:id="@+id/plus"
        android:text="+" />

    <Button
        android:id="@+id/one"
        android:text="1" />

    <Button
        android:id="@+id/two"
        android:text="2" />

    <Button
        android:id="@+id/three"
        android:text="3" />

    <Button
        android:id="@+id/equal"
        android:layout_gravity="fill_vertical"
        android:layout_rowSpan="2"
        android:text="=" />

    <Button
        android:id="@+id/zero"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="0" />

    <Button
        android:id="@+id/dot"
        android:text="." />


</GridLayout>