Android學習--03（UI佈局+線性佈局+相對佈局+幀佈局+智能計算器App）

1佈局

1.1 簡介

佈局是一種可以放置很多控件的容器，它可以按照一定規律調整內部控件的位置，從而編寫出精美的界面
1.LinearLayout佈局：又稱線性佈局，它將所包含的控件在線性方向上依次排列，有垂直方向和水平方向兩種。
2.RelativeLayout佈局：又稱相對佈局，它可以通過相對定位的方式讓控件出現在佈局的任何位置。
3.FrameLayout佈局：又稱幀佈局，這種佈局沒有方便的定位方式，所有的控件都會默認擺放在佈局的左上角。

1. 2 LinearLayout佈局（線性佈局）

1.2.1重要屬性

屬性	作用	示例
android:orientation	指定控件排列方向	vertical:垂直方向 horizontal:水平方向
android:layout_gravity	指定控件在佈局中的對齊方式	top:頂端對齊，bottom:底端對齊，center_vertical:垂直居中,left:左對齊，right:左對齊，center_horizontal:水平居中
android:layout_weight	允許控件使用比例方式指定控件的大小	參考案例

android:orientation用法
如圖所示，佈局方式爲水平分佈時，改變控件的垂直屬性爲top頂 ,bottom底,center_vertical垂直居中
android:layout_gravity用法
如圖所示，佈局方式爲垂直分佈時，改變控件的垂直屬性爲left左 ,right右,center_horizontal水平居中

android:layout_weight用法

1.2.2 作業實操

注意：線性佈局的嵌套

1.2.2.1 效果演示

1.2.2.2 佈局源碼

//activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="用戶登錄"
        android:layout_gravity="center"
        android:textSize="35dp"
        android:layout_marginTop="100dp"
        android:textColor="#000000"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="100dp">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:layout_weight="1"

            android:text="用戶名："/>
        <EditText
            android:id="@+id/editText_1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="4"
            android:hint="請輸入用戶名"
            android:textSize="20dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="20dp">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="20dp"
            android:text="密碼："/>
        <EditText
            android:id="@+id/editText_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="4"
            android:hint="請輸入密碼"
            android:textSize="20dp"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="20dp"
        android:layout_gravity="right">
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="記住密碼"
            android:textSize="15dp"
            android:layout_gravity="right"
            />


    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="20dp">

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="20dp"
            android:text="取消"/>

        <Button
            android:id="@+id/button_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="20dp"
            android:text="登陸"/>

    </LinearLayout>

</LinearLayout>

1.3RelativeLayout佈局（相對佈局）

• 相對佈局有兩種方式：
  1.控件相對於父容器進行定位
  2.控件相對於控件進行定位

1.3.1 重要屬性

屬性	作用
android:layout_centerInParent=“true”	相對於父容器位置居中
android:layout_alignParentLeft=“true”	相對於父容器居左
android:layout_alignParentTop=“true”	相對於父容器居上
android:layout_alignParentRight=“true”	相對於父容器居右
android:layout_alignParentBottom=“true”	相對於父容器居下

屬性	作用
android:layout_above="@+id/button_0"	相對於控件button_0的上方
android:layout_toLeftOf="@+id/button_0"	相對於控件button_0的左方
android:layout_toRightOf="@+id/button_0"	相對於控件button_0的右方
android:layout_below="@+id/button_0"	相對於控件button_0的下方
android:layout_alignRight	本元素的右邊緣和某元素的的右邊緣對齊
android:layout_alignLeft	本元素的右邊緣和某元素的的左邊緣對齊
android:layout_alignTop	本元素的右邊緣和某元素的的上邊緣對齊
android:layout_alignBottom	本元素的右邊緣和某元素的的下邊緣對齊

• 相對於父容器
  
• 相對於控件
  
  

1.3.2 作業實操

1.3.2.1 效果演示

1.3.2.2佈局源碼

//activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/button_0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"

        android:textSize="20dp"
        android:text="按鈕0"/>
        <Button
            android:id="@+id/button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:text="按鈕1"
            android:layout_above="@+id/button_0"
            android:layout_toLeftOf="@+id/button_0"/>

        <Button
            android:id="@+id/button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/button_0"
            android:layout_toRightOf="@+id/button_0"
            android:textSize="20dp"
            android:text="按鈕2"/>
    <Button
        android:id="@+id/button_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button_0"
        android:layout_toLeftOf="@+id/button_0"
        android:textSize="20dp"
        android:text="按鈕2"/>
    <Button
        android:id="@+id/button_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/button_0"
        android:layout_below="@+id/button_0"
        android:textSize="20dp"
        android:text="按鈕2"/>
</RelativeLayout>

1.4FrameLayout佈局（幀佈局）

幀佈局默認控件位置在左上角，控件先後順序會影響覆蓋關係，後創建的總在上面

1.4.1 常用屬性

屬性	作用
android:layout_gravity	決定了一個控件在他的父容器當中的排列方式
android:layout_aliParentLeft	在父容器當中的左側
android:layout_alignParentRight	右側
android:layout_alignParentTop	上方
android:layout_alignParentBottom	下方
android:layout_centerInParent	居中

1.5 作業實操

1.5.1 效果演示

1.5.2 項目源碼（有兩種寫法生成同一樣式頁面）

效果圖

佈局代碼如下

//activity_main.xml第一種寫法
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@drawable/ditu"/>
    <Button
        android:id="@+id/button_0"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/xiangshang"
        android:layout_centerInParent="true"
    />
    <Button
        android:id="@+id/button_1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/xiangshang"
        android:layout_above="@+id/button_0"
        android:layout_centerInParent="true"

        /> <Button
    android:id="@+id/button_2"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@drawable/xiangzuo"
    android:layout_toLeftOf="@+id/button_1"
    android:layout_below="@id/button_1"
   
    /> <Button
    android:id="@+id/button_3"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@drawable/xiangyou"
    android:layout_toRightOf="@+id/button_1"
    android:layout_below="@id/button_1"
    /> <Button
    android:id="@+id/button_4"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@drawable/xiangxia"
    android:layout_below="@id/button_0"
    android:layout_centerInParent="true"
    />


</RelativeLayout>

//activity_main.xml第二種寫法
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ditu"/>
    <Button
        android:id="@+id/button_0"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@mipmap/ic_launcher"
        android:layout_centerInParent="true"
    />
    <Button
        android:id="@+id/button_1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/xiangshang"
        android:layout_above="@+id/button_0"
        android:layout_alignLeft="@id/button_0"

        /> <Button
    android:id="@+id/button_2"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@drawable/xiangzuo"
    android:layout_toLeftOf="@+id/button_0"
    android:layout_alignTop="@id/button_0"

    /> <Button
    android:id="@+id/button_3"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@drawable/xiangyou"
    android:layout_toRightOf="@+id/button_0"
    android:layout_alignTop="@id/button_0"

    /> <Button
    android:id="@+id/button_4"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@drawable/xiangxia"
    android:layout_below="@+id/button_0"
    android:layout_alignLeft="@id/button_0"

    />


</RelativeLayout>

第二頁效果如下

佈局代碼如下

//activity_sacond.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".SecondActivity">


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@drawable/guidao">
        <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
            android:background="@drawable/diaochan"
            android:layout_gravity="center"

        />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="adimin"
            android:layout_gravity="center"
            android:layout_marginTop="60dp"
            android:textColor="#E91E63"
            android:textSize="20dp"
            android:textStyle="bold"/>

    </FrameLayout>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="個人中心"
    android:textColor="#000000"
    android:layout_gravity="center"
    android:textSize="30dp"
    android:textStyle="bold"
    />
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#E91A1A"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="設置"
        android:textColor="#000000"
        android:layout_gravity="left"
        android:textSize="30dp"

        />
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000"/>
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="修改密碼"
    android:textColor="#000000"
    android:layout_gravity="left"
    android:textSize="30dp"

    />
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000"/>
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="作品詳情"
    android:textColor="#000000"
    android:layout_gravity="left"
    android:textSize="30dp"
    />
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000"/>
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="註銷"
    android:textColor="#000000"
    android:layout_gravity="left"
    android:textSize="30dp"
    />
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000"/>

</LinearLayout>

跳轉頁面代碼實現

//MainActivity.java
package com.example.linearlayout;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    Button btn_1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btn_1=findViewById(R.id.button_0);
        btn_1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this,SecondActivity.class);
                startActivity(intent);
            }
        });
    }
}

2 Style設計

2.1 簡介

方法：
第一步 在drawable文件夾下創建樣式的xml文件
第二步 佈局文件中設置控件的background屬性爲該樣式文件來實現效果
1.drawable文件夾下的btnstyle1.xml文件

<shape <mins:android="http://schemas.android.com/apk/res/android">  //shape表示形狀
< solid android:color="#ff8724" />  //solid表示實心填充
< stroke android:color="#000000" android:width="10dp" />   //表示描邊，有一個顏色和寬度
<corners android:radius="100dp"/>  //設置圓角
</ shape>

2.佈局文件中按鈕控件的屬性設置

< Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="嘿嘿"
android:textSize="60sp"
android:textColor="#ffffff"
android:textStyle="bold"
android:background="@drawable/btnstyle1"
android:layout_margin="20dp"
android:padding="5dp"
/>

Margins指外邊距，Padding指內邊距

2.2 xml屬性

XML屬性	描述
android:layout_margin	設置上下左右外邊距
android:layout_marginBottom	設置底外邊距
android:layout_marginLeft	設置左外邊距
android:layout_marginRight	設置右外邊距
android:layout_marginTop	設置頂外邊距
android:padding	設置上下左右內邊距
android:paddingBottom	設置底內邊距
android:paddingLeft	設置左內邊距
android:paddingRight	設置右內邊距
android:paddingTop	設置上內邊距

2.3 操作演示

創建一個drawable文件
生成如下文件
在activity_main.xml中的按鈕添加背景爲剛纔創建的btnstyle2文件

再添加一個drawable文件

再創建一個drawable文件，樣式不設定shape而是selector
更改activity_main中的按鈕背景
效果如圖，鼠標未按下時

按鈕按住時

2.4 案例源碼

文件所在路徑

//activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="開始遊戲"
        android:textSize="40dp"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:layout_margin="20dp"
        android:background="@drawable/btns12"
        android:padding="5dp"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="開始遊戲"
        android:textSize="40dp"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:layout_margin="20dp"
        android:background="@drawable/btnstyle2"
        android:padding="5dp"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="開始遊戲"
        android:textSize="40dp"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:layout_margin="20dp"
        android:background="@drawable/btnstyle3"
        android:padding="5dp"/>

</LinearLayout>

//btnstyle1.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ff8724"/>
    <stroke android:color="#000000" android:width="10dp"/>
</shape>

//btnstyle2.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#2196F3"/>
    <stroke android:color="#3F51B5" android:width="10dp"/>
</shape>

//btnstyle3.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#2196F3"/>
    <stroke android:color="#3F51B5" android:width="10dp"/>
    <corners android:radius="100dp"/>
</shape>

//btns12.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/btnstyle1"
    android:state_pressed="false"/>
    <item android:drawable="@drawable/btnstyle2"
        android:state_pressed="true"/>

</selector>

2.5 案例 2

2.5.1 效果展示

2.5.2 源碼

//activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="開始遊戲"
        android:textSize="40dp"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:layout_margin="20dp"
        android:background="@drawable/btns12"
        android:padding="5dp"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        android:hint="請輸入"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:layout_margin="30dp"
        android:background="@drawable/editstyle1"
        android:padding="10dp"/>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="4">

    <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="好"
    android:textSize="60dp"
    android:textColor="#ffffff"
    android:textStyle="bold"
    android:layout_margin="10dp"
    android:background="@drawable/btnstyle3"
    android:padding="5dp"
        android:layout_weight="1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="好"
        android:textSize="60dp"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:layout_margin="10dp"
        android:background="@drawable/btnstyle3"
        android:padding="5dp"
        android:layout_weight="1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="學"
        android:textSize="60dp"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:layout_margin="10dp"
        android:background="@drawable/btnstyle3"
        android:padding="5dp"
        android:layout_weight="1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="習"
        android:textSize="60dp"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:layout_margin="10dp"
        android:background="@drawable/btnstyle3"
        android:padding="5dp"
        android:layout_weight="1"/>
</LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="4">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="天"
            android:textSize="60dp"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:layout_margin="10dp"
            android:background="@drawable/btnstyle3"
            android:padding="5dp"
            android:layout_weight="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="天"
            android:textSize="60dp"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:layout_margin="10dp"
            android:background="@drawable/btnstyle3"
            android:padding="5dp"
            android:layout_weight="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="向"
            android:textSize="60dp"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:layout_margin="10dp"
            android:background="@drawable/btnstyle3"
            android:padding="5dp"
            android:layout_weight="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="上"
            android:textSize="60dp"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:layout_margin="10dp"
            android:background="@drawable/btnstyle3"
            android:padding="5dp"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我"
            android:textSize="60dp"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:layout_margin="10dp"
            android:background="@drawable/btnstyle4"
            android:padding="5dp"
            android:layout_weight="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="學"
            android:textSize="60dp"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:layout_margin="10dp"
            android:background="@drawable/btnstyle4"
            android:padding="5dp"
            android:layout_weight="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="習"
            android:textSize="60dp"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:layout_margin="10dp"
            android:background="@drawable/btnstyle4"
            android:padding="5dp"
            android:layout_weight="1"/>


    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我"
            android:textSize="60dp"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:layout_margin="10dp"
            android:background="@drawable/btnstyle4"
            android:padding="5dp"
            android:layout_weight="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="快"
            android:textSize="60dp"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:layout_margin="10dp"
            android:background="@drawable/btnstyle4"
            android:padding="5dp"
            android:layout_weight="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="樂"
            android:textSize="60dp"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:layout_margin="10dp"
            android:background="@drawable/btnstyle4"
            android:padding="5dp"
            android:layout_weight="1"/>
</LinearLayout>

</LinearLayout>

//btnstyle1.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffcccc"/>
    <stroke android:color="#ff9990" android:width="10dp"/>
</shape>

//btnstyle2.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ff6699"/>
    <stroke android:color="#ff0099a" android:width="10dp"/>
</shape>

//btnstyle3.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ff6699"/>
    <stroke android:color="#ff0099" android:width="10dp"/>
    <corners android:radius="1000dp"/>
</shape>

//btnstyle4.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#2196F3"/>
    <stroke android:color="#3F51B5" android:width="10dp"/>
    <corners android:radius="1000dp"/>
</shape>

//editstyle1.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff"/>
    <stroke android:color="#000000" android:width="5dp"/>

</shape>

//btns12.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/btnstyle1"
    android:state_pressed="false"/>
    <item android:drawable="@drawable/btnstyle2"
        android:state_pressed="true"/>

</selector>

3 智能計算器

智能計算器的實現步驟

• 建一個新的工程，命名爲DAIJSQ
• 在drawable文件夾下創建樣式文件
• 完成佈局界面中的代碼設計
• 給按鈕起一個id號
• 定義對象並添加4個對象
• 書寫數字（0-9）按鈕的代碼
• 書寫運算符號（+、-、*、/）按鈕的代碼
• 書寫等號（=）按鈕的代碼
• 書寫清除（C）按鈕的代碼

3.1 頁面佈局

頁面效果

//activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/unicorn"
    tools:context=".MainActivity">


    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        android:textStyle="bold"
        android:gravity="right"
        android:hint="0"

        android:textColor="#cc33ff"

       android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="40dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="40dp"
        android:weightSum="4"
>
        <Button
            android:id="@+id/button_7"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="7"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/button_8"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="8"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/button_9"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="9"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/button_jia"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="+"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="40dp"
        android:weightSum="4"
        >
        <Button
            android:id="@+id/button_4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="4"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/button_5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="5"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/button_6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="6"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/button_jian"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="-"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="40dp"
        android:weightSum="4"
        >
        <Button
            android:id="@+id/button_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="1"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/button_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="2"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/button_3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="3"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/button_cheng"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="*"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="4"
        android:layout_marginTop="40dp">
        <Button
            android:id="@+id/button_qing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="C"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/button_0"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="0"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/button_deng"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="="
            android:background="@drawable/btn12"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/button_chu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="60dp"
            android:text="/"
            android:background="@drawable/btn12"
            android:layout_weight="1"/>

    </LinearLayout>
</LinearLayout>

3.2 控件樣式

//editstyle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fff8dc"/>
    <stroke android:color="#ffd39b" android:width="5dp"/>
</shape>

//btnstyle1.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffcccc"/>
    <stroke android:color="#ff9990" android:width="5dp"/>
    <corners android:radius="1000dp"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffccff"/>
    <stroke android:color="#ff66ff" android:width="5dp"/>
    <corners android:radius="1000dp"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/btnstyle1" android:state_pressed="false"/>
    <item android:drawable="@drawable/btnstyle2" android:state_pressed="true"/>
</selector>

記得drawable目錄下還有一張unicorn.jpg的圖片充當背景

3.3 按鈕代碼的實現

這種實現方法的缺陷爲不能連續運算再等於，在兩個運算數後必須按一下=號，不然連續操作只會保留後兩個數

//MainActivity.java
package com.example.daijsq;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    //第一步：定義對象
    TextView txt_result;
    Button btn_7,btn_8,btn_9,btn_jia;
    Button btn_4,btn_5,btn_6,btn_jian;
    Button btn_1,btn_2,btn_3,btn_cheng;
    Button btn_qing,btn_0,btn_deng,btn_chu;
    double num1 = 0,num2 = 0;//聲明兩個參數，接收數據
    double result=0;//運算結果
    Boolean isClickdeng = false; //判斷是否單擊了=號
    String op ="%" ;//操作符+-*/
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //第二步：綁定控件
        txt_result=findViewById(R.id.editText1);
        btn_7=findViewById(R.id.button_7);btn_8=findViewById(R.id.button_8);btn_9=findViewById(R.id.button_9);btn_jia=findViewById(R.id.button_jia);
        btn_4=findViewById(R.id.button_4);btn_5=findViewById(R.id.button_5);btn_6=findViewById(R.id.button_6);btn_jian=findViewById(R.id.button_jian);
        btn_1=findViewById(R.id.button_1);btn_2=findViewById(R.id.button_2);btn_3=findViewById(R.id.button_3);btn_cheng=findViewById(R.id.button_cheng);
        btn_qing=findViewById(R.id.button_qing);btn_0=findViewById(R.id.button_0);btn_deng=findViewById(R.id.button_deng);btn_chu=findViewById(R.id.button_chu);
        //按鈕的單擊事件
        btn_7.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isClickdeng){//說明剛單擊了=號，上一個運算剛結束
                    txt_result.setText("");//重新計算，文本框清空
                    isClickdeng=false;
                }
                txt_result.setText(txt_result.getText().toString()+"7");
            }
        });
        btn_8.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isClickdeng){//說明剛單擊了=號，上一個運算剛結束
                    txt_result.setText("");//重新計算，文本框清空
                    isClickdeng=false;
                }
                txt_result.setText(txt_result.getText().toString()+"8");
            }
        });
        btn_9.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isClickdeng){//說明剛單擊了=號，上一個運算剛結束
                    txt_result.setText("");//重新計算，文本框清空
                    isClickdeng=false;

                }
                txt_result.setText(txt_result.getText().toString()+"9");
            }
        });
        btn_jia.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String str1 = txt_result.getText().toString();//獲取輸入框的內容
                if(str1.equals("")){
                    return; //如果爲空，返回
                }
                num1=Double.parseDouble(str1);//字符串類型轉爲double類型
                txt_result.setText("");
                op="+";
                isClickdeng=false;
            }
        });
        btn_4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isClickdeng){//說明剛單擊了=號，上一個運算剛結束
                    txt_result.setText("");//重新計算，文本框清空
                    isClickdeng=false;
                    txt_result.setText(txt_result.getText().toString()+"4");
                }
            }
        });
        btn_5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isClickdeng){//說明剛單擊了=號，上一個運算剛結束
                    txt_result.setText("");//重新計算，文本框清空
                    isClickdeng=false;
                }
                txt_result.setText(txt_result.getText().toString()+"5");
            }
        });
        btn_6.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isClickdeng){//說明剛單擊了=號，上一個運算剛結束
                    txt_result.setText("");//重新計算，文本框清空
                    isClickdeng=false;
                }
                txt_result.setText(txt_result.getText().toString()+"6");
            }
        });
        btn_jian.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String str1 = txt_result.getText().toString();//獲取輸入框的內容
                if(str1.equals("")){
                    return; //如果爲空，返回
                }
                num1=Double.parseDouble(str1);//字符串類型轉爲double類型
                txt_result.setText("");
                op="-";
                isClickdeng=false;
            }
        });
        btn_1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isClickdeng){//說明剛單擊了=號，上一個運算剛結束
                    txt_result.setText("");//重新計算，文本框清空
                    isClickdeng=false;
                }
                txt_result.setText(txt_result.getText().toString()+"1");
            }
        });
        btn_2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isClickdeng){//說明剛單擊了=號，上一個運算剛結束
                    txt_result.setText("");//重新計算，文本框清空
                    isClickdeng=false;
                }
                txt_result.setText(txt_result.getText().toString()+"2");
            }
        });
        btn_3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isClickdeng){//說明剛單擊了=號，上一個運算剛結束
                    txt_result.setText("");//重新計算，文本框清空
                    isClickdeng=false;
                }
                txt_result.setText(txt_result.getText().toString()+"3");
            }
        });
        btn_cheng.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String str1 = txt_result.getText().toString();//獲取輸入框的內容
                if(str1.equals("")){
                    return; //如果爲空，返回
                }
                num1=Double.parseDouble(str1);//字符串類型轉爲double類型
                txt_result.setText("");
                op="*";
                isClickdeng=false;
            }
        });
        btn_0.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isClickdeng){//說明剛單擊了=號，上一個運算剛結束
                    txt_result.setText("");//重新計算，文本框清空
                    isClickdeng=false;
                }
                txt_result.setText(txt_result.getText().toString()+"0");
            }
        });
        btn_qing.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                txt_result.setText("");
            }
        });
        btn_chu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String str1 = txt_result.getText().toString();
                if(str1.equals("")){
                    return;
                }
                num1=Double.parseDouble(str1);//字符串類型轉爲double類型
                txt_result.setText("");
                op="/";
                isClickdeng=false;
            }
        });
        btn_deng.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String str2 = txt_result.getText().toString();
                if(str2.equals("")){
                    return;
                }
                num2 = Double.parseDouble(str2);
                txt_result.setText("");
                switch(op){
                    case"+":result=num1+num2;break;
                    case"-":result=num1-num2;break;
                    case"*":result=num1*num2;break;
                    case"/":result=num1/num2;break;
                    case"%":result=num2;break;
                    default:result=0.0;break;
                }
                txt_result.setText(result+"");
                op="%";
                isClickdeng=true;
            }
        });

    }
}