利用android studio LinearLayout线性布局设计制作简易的计算器详细版【精选收藏】
Android Studio简介
Android Studio 是谷歌推出的一个Android集成开发工具，基于IntelliJ IDEA. 类似 Eclipse ADT，Android Studio 提供了集成的 Android 开发工具用于开发和调试。
在IDEA的基础上，Android Studio 增加了：
- 基于Gradle的构建支持
- Android 专属的重构和快速修复
- 提示工具以捕获性能、可用性、版本兼容性等问题
- 支持ProGuard 和应用签名
- 基于模板的向导来生成常用的 Android 应用设计和组件
- 功能强大的布局编辑器，可以让你拖拉 UI 控件并进行效果预览
Android Studio七大布局
在设计的时候，我们可以根据要设计的程序，采用适合的布局，在Android中有七大布局，分别是:
- LinearLayout(线性布局)
- RelativeLayout(相对布局)
- TableLayout(表格布局)
- FrameLayout(帧布局)
- AbsoluteLayout(绝对布局)
- GridLayout(网格布局)
- ConstraintLayout(约束布局)
目前android最新的默认布局是ConstraintLayout(约束布局)
AbsoluteLayout(绝对布局) 是被吐槽最多的，因为屏幕大小兼容问题
LinearLayout线性布局解析
这篇文章是根据我上一篇博客【利用android studio制作简易的计算器】的界面设计修改的，原来采用网格布局出现屏幕不兼容问题，所以这次采用LinearLayout线性布局重构了代码，为了方便设计布局，还采用了嵌套的方式。
上代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="166dp"
android:layout_weight="1">
<TextView
android:id="@+id/the_first_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="50dp" />
<TextView
android:id="@+id/the_option"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="50dp" />
<TextView
android:id="@+id/the_second_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="50dp" />
<TextView
android:id="@+id/the_equal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:textSize="50dp" />
<TextView
android:id="@+id/the_answer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="50dp" />
</LinearLayout>
<View
android:layout_width="wrap_content"
android:layout_height="2dp"
android:background="#B5B5B5" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:textSize="30dp">
<Button
android:id="@+id/surplus"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:background="@color/text_bk1"
android:textColor="@color/text_text3"
android:text="%" />
<Button
android:id="@+id/root"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="√"
android:background="@color/text_bk1"
android:textColor="@color/text_text3" />
<Button
android:id="@+id/clear"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="C"
android:background="@color/text_bk1"
android:textColor="@color/text_text3" />
<Button
android:id="@+id/delete"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="DEL"
android:background="@color/text_bk1"
android:textColor="@color/text_text3" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:textSize="30dp">
<Button
android:id="@+id/seven"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="7"
android:background="@color/text_bk2"
android:textColor="@color/text_text2" />
<Button
android:id="@+id/eight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="8"
android:background="@color/text_bk2"
android:textColor="@color/text_text2" />
<Button
android:id="@+id/nine"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="9"
android:background="@color/text_bk2"
android:textColor="@color/text_text2" />
<Button
android:id="@+id/add"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="+"
android:background="@color/text_bk1"
android:textColor="@color/text_text3" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:textSize="30dp">
<Button
android:id="@+id/four"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="4"
android:background="@color/text_bk2"
android:textColor="@color/text_text2" />
<Button
android:id="@+id/five"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="5"
android:background="@color/text_bk2"
android:textColor="@color/text_text2" />
<Button
android:id="@+id/six"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="6"
android:background="@color/text_bk2"
android:textColor="@color/text_text2" />
<Button
android:id="@+id/substraction"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="-"
android:background="@color/text_bk1"
android:textColor="@color/text_text3" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:textSize="30dp">
<Button
android:id="@+id/one"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="1"
android:background="@color/text_bk2"
android:textColor="@color/text_text2" />
<Button
android:id="@+id/two"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="2"
android:background="@color/text_bk2"
android:textColor="@color/text_text2" />
<Button
android:id="@+id/three"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="3"
android:background="@color/text_bk2"
android:textColor="@color/text_text2" />
<Button
android:id="@+id/mulitipliction"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="*"
android:background="@color/text_bk1"
android:textColor="@color/text_text3" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:textSize="30dp">
<Button
android:id="@+id/zero"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="0"
android:background="@color/text_bk2"
android:textColor="@color/text_text2" />
<Button
android:id="@+id/point"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="."
android:background="@color/text_bk2"
android:textColor="@color/text_text2" />
<Button
android:id="@+id/equal"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="="
android:background="@color/text_bk3"
android:textColor="@color/text_text4" />
<Button
android:id="@+id/division"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="30dp"
android:text="/"
android:background="@color/text_bk1"
android:textColor="@color/text_text3" />
</LinearLayout>
</LinearLayout>
界面美化（colors.xml代码）
这次的的页面还是采用了上次的色彩布局。修改了应用的颜色
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#03A9F4</color>
<color name="colorPrimaryDark">#37B8F3</color>
<color name="colorAccent">#03DAC5</color>
<color name="text_bk1">#F5F5F5</color>
<color name="text_bk2">#FCFCFC</color>
<color name="text_bk3">#5ADCED</color>
<color name="text_text1">#878787</color>
<color name="text_text2">#000000</color>
<color name="text_text3">#5ADCED</color>
<color name="text_text4">#FCFCFC</color>
</resources>
代码区域
为了让计算器能够正常使用，增加了一些最基本的代码，实现最基本的计算器功能。
package com.example.wzx_sy4;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
Button zero;
Button one;
Button two;
Button three;
Button four;
Button five;
Button six;
Button seven;
Button eight;
Button nine;
Button point;
Button clear;
Button add;
Button substraction;
Button mulitipliction;
Button division;
Button root;
Button surplus;
Button equal;
Button delete;
TextView theFirstView;
TextView theOptionView;
TextView theSecondView;
TextView theEqualView;
TextView theAnswerView ;
String option = "";
String str1 = "",str2 = "";
double number1 ,number2;
int answerFlag = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView(); //初始化布局
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.zero:
case R.id.one:
case R.id.two:
case R.id.three:
case R.id.four:
case R.id.five:
case R.id.six:
case R.id.seven:
case R.id.eight:
case R.id.nine:
if(answerFlag == 0){
if(option == ""){
str1 = str1+((Button) view).getText().toString();
theFirstView.setText(str1);
}
else{
str2 = str2+((Button) view).getText().toString();
theSecondView.setText(str2);
}
}
if(answerFlag == 1){
clear();
answerFlag = 0;
str1 = str1+((Button) view).getText().toString();
theFirstView.setText(str1);
}
break;
case R.id.point:
if(str1 != "" && option == ""){
str1 = str1+((Button) view).getText().toString();
theFirstView.setText(str1);
}
if(option != "" && str2 != ""){
str2 = str2+((Button) view).getText().toString();
theSecondView.setText(str2);
}
else{
//什么都不执行
}
break;
case R.id.add:
option = "+";
theOptionView.setText("+");
break;
case R.id.substraction:
option = "-";
theOptionView.setText("-");
break;
case R.id.mulitipliction:
option = "×";
theOptionView.setText("×");
break;
case R.id.division:
option = "÷";
theOptionView.setText("÷");
break;
case R.id.surplus:
option = "%";
theOptionView.setText("%");
break;
case R.id.root:
if(str1 == ""){
option = "√";
theOptionView.setText("√");
}
break;
case R.id.clear:
clear();
break;
case R.id.delete:
if(theAnswerView.getText().toString() == ""){
if((theSecondView.getText().toString())!= ""){
int length = str2.length();
if(length == 1){
theSecondView.setText("");
}
else{
str2 = str2.substring(0,length-1);
theSecondView.setText(str2);
}
break;
}
if((theSecondView.getText().toString()) == "" && (theOptionView.getText().toString()) != ""){
theOptionView.setText("");
break;
}
if((theSecondView.getText().toString()) == "" && (theAnswerView.getText().toString()) == "" && (theFirstView.getText().toString()) != ""){
int length = str1.length();
if(length == 1){
theFirstView.setText("");
}
else{
str1 = str1.substring(0,length-1);
theFirstView.setText(str1);
}
break;
}
}
break;
case R.id.equal:
theEqualView.setText("=");
answerFlag = 1;
if(option == "+"){
number1 = Double.parseDouble(theFirstView.getText().toString());
number2 = Double.parseDouble(theSecondView.getText().toString());
theAnswerView.setText( (number1+number2)+"");
}
if(option == "-"){
number1 = Double.parseDouble(theFirstView.getText().toString());
number2 = Double.parseDouble(theSecondView.getText().toString());
theAnswerView.setText( (number1-number2)+"");
}
if(option == "×"){
number1 = Double.parseDouble(theFirstView.getText().toString());
number2 = Double.parseDouble(theSecondView.getText().toString());
theAnswerView.setText( (number1*number2)+"");
}
if(option == "÷"){
number1 = Double.parseDouble(theFirstView.getText().toString());
number2 = Double.parseDouble(theSecondView.getText().toString());
if(number2 == 0){
theAnswerView.setText("错误");
}
else{
theAnswerView.setText( (number1/number2)+"");
}
}
if(option == "√"){
number2 = Double.parseDouble(theSecondView.getText().toString());
theAnswerView.setText(Math.sqrt(number2)+"");
}
if(option == "%"){
number1 = Double.parseDouble(theFirstView.getText().toString());
number2 = Double.parseDouble(theSecondView.getText().toString());
theAnswerView.setText(number1%number2+"");
}
break;
}
}
public void initView(){
zero = (Button)findViewById(R.id.zero);
one = (Button)findViewById(R.id.one);
two = (Button)findViewById(R.id.two);
three = (Button)findViewById(R.id.three);
four = (Button)findViewById(R.id.four);
five = (Button)findViewById(R.id.five);
six = (Button)findViewById(R.id.six);
seven = (Button)findViewById(R.id.seven);
eight = (Button)findViewById(R.id.eight);
nine = (Button)findViewById(R.id.nine);
point = (Button)findViewById(R.id.point);
clear = (Button)findViewById(R.id.clear);
add = (Button)findViewById(R.id.add);
substraction = (Button)findViewById(R.id.substraction);
mulitipliction = (Button)findViewById(R.id.mulitipliction);
division = (Button)findViewById(R.id.division);
root = (Button)findViewById(R.id.root);
surplus = (Button)findViewById(R.id.surplus);
equal = (Button)findViewById(R.id.equal);
delete = (Button)findViewById(R.id.delete);
theFirstView = (TextView)findViewById(R.id.the_first_number);
theOptionView = (TextView)findViewById(R.id.the_option);
theSecondView = (TextView)findViewById(R.id.the_second_number);
theEqualView = (TextView)findViewById(R.id.the_equal);
theAnswerView = (TextView)findViewById(R.id.the_answer);
zero.setOnClickListener(this);
one.setOnClickListener(this);
two.setOnClickListener(this);
three.setOnClickListener(this);
four.setOnClickListener(this);
five.setOnClickListener(this);
six.setOnClickListener(this);
seven.setOnClickListener(this);
eight.setOnClickListener(this);
nine.setOnClickListener(this);
point.setOnClickListener(this);
clear.setOnClickListener(this);
add.setOnClickListener(this);
substraction.setOnClickListener(this);
mulitipliction.setOnClickListener(this);
division.setOnClickListener(this);
root.setOnClickListener(this);
surplus.setOnClickListener(this);
equal.setOnClickListener(this);
delete.setOnClickListener(this);
theFirstView.setOnClickListener(this);
theOptionView.setOnClickListener(this);
theEqualView.setOnClickListener(this);
theSecondView.setOnClickListener(this);
theAnswerView.setOnClickListener(this);
}
public void clear(){
str1 = "";
str2 = "";
theFirstView.setText("");
theSecondView.setText("");
theOptionView.setText("");
theEqualView.setText("");
theAnswerView.setText("");
option = "";
}
}
运行界面效果：
计算器已经可以正常运行了，为了不报错，计算结果采用一位小数点。
我是ots-luo，码字不易，写教程也不易，如果觉得文章不错，可以点赞评论，感谢支持！！
更多文章记得关注我的博客
网站文章对应：[点击传送](利用android studio LinearLayout线性布局嵌套设计制作简易的计算器详细版【精选收藏】)
1252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
