利用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 name="colorPrimaryDark">#37B8F3
    <color name="colorAccent">#03DAC5
    <color name="text_bk1">#F5F5F5
    <color name="text_bk2">#FCFCFC
    <color name="text_bk3">#5ADCED
    <color name="text_text1">#878787
    <color name="text_text2">#000000
    <color name="text_text3">#5ADCED
    <color name="text_text4">#FCFCFC
</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线性布局嵌套设计制作简易的计算器详细版【精选收藏】)