利用android studio LinearLayout线性布局嵌套设计制作简易的计算器详细版【精选收藏】
16lz
2021-01-23
利用android studio LinearLayout线性布局设计制作简易的计算器详细版【精选收藏】
- Android Studio简介
- Android Studio七大布局
- LinearLayout线性布局解析
- 上代码
- 界面美化（colors.xml代码）
- 代码区域
- 运行界面效果：
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线性布局嵌套设计制作简易的计算器详细版【精选收藏】)
更多相关文章
- Android 自学之相对布局 RelativeLayout
- Android提供的系统服务之--LayoutInflater(布局服务)
- 第七章 布局
- Android 5.0上动态布局层级覆盖问题
- Android自适应不同分辨率或不同屏幕大小的layout布局(横屏|竖屏)
- 安卓课程六 android常用布局属性的介绍
- Android 约束布局(ConstraintLayout)的使用