首页 >> 全栈工程 >>Android >> 利用android studio LinearLayout线性布局嵌套设计制作简易的计算器详细版【精选收藏】
详细内容

利用android studio LinearLayout线性布局嵌套设计制作简易的计算器详细版【精选收藏】

时间:2020-04-17     作者:luo【原创】   阅读

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


}

运行界面效果:

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

23.png




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


更多文章记得关注 我的博客

网站文章对应:点击传送



ots网络logo

OTS网络安全门户主要提供网络信息安全教程、文章、工具,让更多的小伙伴加入我们的社区一起学习。

技术支持: 建站ABC | 管理登录