利用android studio LinearLayout线性布局嵌套设计制作简易的计算器详细版【精选收藏】_利用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289

界面美化（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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

代码区域

为了让计算器能够正常使用，增加了一些最基本的代码，实现最基本的计算器功能。

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 = "";
    }


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277

运行界面效果：

计算器已经可以正常运行了，为了不报错，计算结果采用一位小数点。

---

我是ots-luo，码字不易，写教程也不易，如果觉得文章不错，可以点赞评论，感谢支持！！

---

更多文章记得关注我的博客
网站文章对应：[点击传送](利用android studio LinearLayout线性布局嵌套设计制作简易的计算器详细版【精选收藏】)