计算器布局设计代码php,网格布局（计算器界面设计）

最终得到如图所示计算器界面

步骤为：

1、 在布局管理器中定义一个GridLayout,并在该GridLayout中依次定义文本框、按钮，该文本框、按钮各横跨4列。

2、 在Java代码中循环16次，依次添加16个按钮。

Layout文件定义如下：

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:rowCount="6"

android:columnCount="4"

android:id="@+id/root"

>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_columnSpan="4"

android:textSize="50sp"

android:layout_marginLeft="4dp"

android:layout_marginRight="4dp"

android:padding="5dp"

android:layout_gravity="right"

android:background="#eee"

android:textColor="#000"

android:text="0" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_columnSpan="4"

android:text="清除"

/>

注意必须在TextView 和Button 中 定义

android:layout_columnSpan="4" 表明该组件横跨四列，否则将影响后面定义的Button布局

利用Java代码来生成16个按钮，代码如下：

package com.example.gridlayouttest;

import android.os.Bundle;

import android.app.ActionBar.LayoutParams;

import android.app.Activity;

import android.view.Gravity;

import android.view.Menu;

import android.widget.Button;

import android.widget.GridLayout;

import android.widget.GridLayout.Spec;

public class GridLayoutTest extends Activity {

GridLayout gridLayout;

String[] chars=new String[]{

"7","8","9","÷",

"4","5","6","×",

"1","2","3","﹣",

".","0","=","+",

};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_grid_layout_test);

gridLayout=(GridLayout) findViewById(R.id.root);

for(int i=0;i

Button bn=new Button(this);

bn.setText(chars[i]);

//设置该按钮的字号大小

bn.setTextSize(40);

//指定该组件所在的行 一行放四个，从第二行开始放

Spec rowSpec=GridLayout.spec(i/4+2);

//指定该组件所在的列 每行有4列

Spec columnSpec=GridLayout.spec(i%4);

//定义Layout参数

android.widget.GridLayout.LayoutParams params=new GridLayout.LayoutParams(rowSpec,columnSpec);

//指定该组件占满父容器

params.setGravity(Gravity.FILL);

gridLayout.addView(bn,params);

}

}

}

首先定义了一个字符串型数组，用于设定按钮上文本。从最后的

gridLayout.addView(bn,params);

可以看出我们得到整个应用的布局管理器，而后在其上面添加Button，params为对Button定义的相关参数。

这里需要注意到的是，在定义按钮行的时候，我们用了

Spec rowSpec=GridLayout.spec(i/4+2);

来指定该组件所在的行 一行放四个，从第二行开始放。

对于多按钮指定行的定位布局，我们可以使用公式   N / 该行按钮列数 + 起始行数      其中N为按钮的序号还需要注意，一切都从0开始哦！

对于指定组件所在的列时，我们使用了

Spec columnSpec=GridLayout.spec(i%4);对于多按钮指定列的定位布局，我们可以使用公式

N % 该行按钮列数

在以后的界面设计中这两个公式可以多加利用。