2. 程式人生 > >手把手教你做安豆計算器（二）－計算器介面佈局

手把手教你做安豆計算器（二）－計算器介面佈局

阿新 • • 發佈：2019-02-16

第3節 計算器介面佈局

現在起，我們就開始正式開發“計算器”應用。這一節，我們將完成計算器的介面佈局，讓它初具計算器的模樣。

計算器介面是通過佈局檔案定義的。它位於專案的res\layout\activity_main.xml檔案中。

這個佈局檔案通過java原始碼MainActivity.java中的setContentView()函式，設定到介面上。

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

接下來，我們的介面佈局，就會在這個佈局檔案activity_main.xml中進行。
在修改佈局檔案的過程中，可以通過Preview功能，來實時觀看我們修改的介面佈局效果。

3.1 上下段佈局

首先確定佈局形式。介面分為兩個大區域，上半區域顯示計算表示式和計算結果，下半區域顯示鍵盤。

  1. 兩個區域一上一下，呈線型排列，因此我們選擇LinearLayout佈局；
  2. 通過將LinearLayout的android:orientation屬性設定成vertical來將它包含的內容以豎直方式排列;
  3. 整個介面將盡可能佔用整個螢幕，因此使用match_parent指定佈局的寬度和高度。match_parent
    說明尺寸要儘可能的大。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
 

    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.anddle.calculator.MainActivity">
</LinearLayout>
  1. 上半區域包含了表示式區域和計算結果區域，它們也成豎直排列，所以還需要一個LinearLayout包含它們。上半區域佔整個介面的1/3，就要將android:layout_weight設定成1，android:layout_height設定成0dp；
  2. 下半區域是鍵盤的顯示區域，我們也選用LinearLayout作為這個區域的佈局。下半區域佔整個介面的2/3,就要將android:layout_weight設定成2，android:layout_height設定成0dp；

這樣的設定說明，要將父佈局剩餘的空間平均分成1+2=3份，上半區域分得1/3，下半區域分的2/3。所謂空餘的空間就是:父佈局的空間，被子佈局的空間佔用後，所剩餘的空間。

佈局檔案中，我們將現實區域和鍵盤區域的高度都設定成了0dp，說明它們在豎直方向上不佔用任何空間，但是又設定了layout_weight，說明它們要按照父控制元件match_parent佔用的高度來按比例分配。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.anddle.calculator.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"/>

</LinearLayout>

3.2 顯示區域佈局

結果區域和表示式區域一上一下，各佔一半空間，用來顯示文字內容。它們可以使用TextView控制元件來實現。

  1. 為結果區域指定android:id為result_area，android:layout_weight設定成1，android:layout_height設定成0dp；
  2. 為表示式區域指定android:id為formula_area，android:layout_weight設定成1，android:layout_height設定成0dp；
    設定了id，我們以後就可以在程式碼中，通過這id來獲取並使用這個控制元件了。
  3. 包含結果區域和表示式區域的LinearLayout設定android:orientation屬性為vertical，讓它們豎直排列
  4. 為了祛除介面上四個邊的空白，我們還要移除最外層LinearLayout的android:paddingXXXX這幾個屬性，讓整個介面填滿顯示區域。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.anddle.calculator.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"/>

        <TextView
            android:id="@+id/result_area"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/formula_area"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"/>

</LinearLayout>

3.3 鍵盤區域佈局

鍵盤佈局可以進一步分成左右兩個區域，

  1. 左邊區域是C DEL ／ 0-9以及.；
  2. 右邊區域是* - + =。

這兩個區域，可以同樣使用水平排列的LinearLayout作為它們的父佈局，

  1. 左邊區域像個表格，可以使用TableLayout，讓它佔據3個單位的寬度，android:layout_weight設定成3，android:layout_width設定成0dp；
  2. 右邊區域就是一個簡單的豎直排列的LinearLayout，讓它佔據1個單位的寬度，也就是android:layout_weight設定成1，android:layout_width設定成0dp；
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="2">

    <TableLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"/>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

</LinearLayout>

3.3.1 鍵盤左區域佈局

鍵盤按鈕分成3*5格，每一格就是一個按鈕，這就像是一個表格，所以我們選用了TableLayout作為它們的佈局。

  1. 每一行用TableRow表示，它是與TableLayout配合使用的佈局，用來表示表格的每一行；這裡有5行，就新增5個TableRow；
  2. TableRow在預設情況下，會假定android:layout_width為match_parent，android:layout_height為wrap_content，我們就簡單的在這裡設定一個android:layout_weight為1；
<TableLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="3">

    <TableRow android:layout_weight="1">
    </TableRow>

    <TableRow android:layout_weight="1">
    </TableRow>

    <TableRow android:layout_weight="1">
    </TableRow>

    <TableRow android:layout_weight="1">
    </TableRow>

    <TableRow android:layout_weight="1">
    </TableRow>

</TableLayout>

鍵盤上的按鈕可以使用Android SDK提供的Button控制元件，

  1. 通過android:text屬性為每個Button設定需要顯示的內容；
  2. 為它們各自的android:id取上對應的id名字；
  3. 每一行的Button還是按照相等的比例進行分配，android:layout_width設定成0dp，android:layout_weight設定成1，android:layout_height設定成match_parent。
  4. 最後一行中的‘0’按鈕，它要佔據兩列的寬度，我們可以將這個Button控制元件的android:layout_weight設定成2，就能讓它能夠佔據2格的位置了；
<TableLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="3">

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_c" android:text="C"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_del" android:text="DEL"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_div" android:text="/"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
    </TableRow>

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_7" android:text="7"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_8" android:text="8"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_9" android:text="9"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
    </TableRow>

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_4" android:text="4"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_5" android:text="5"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_6" android:text="6"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
    </TableRow>

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_1" android:text="1"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_2" android:text="2"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_3" android:text="3"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
    </TableRow>

    <TableRow android:layout_weight="1">
        <Button android:id="@+id/btn_0" android:text="0"
                android:layout_weight="2"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
        <Button android:id="@+id/btn_dot" android:text="."
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>
    </TableRow>

</TableLayout>

3.3.2 鍵盤右區域佈局

最後，我們將鍵盤右邊區域的按鈕新增上。

  1. 讓Button豎直排列，就要將包裹它們的LinearLayout設定android:orientation成vertical；
  2. 這一列的Button還是按照相等的比例進行分配，所以android:layout_height設定成0dp，android:layout_weight設定成1，android:layout_width設定成match_parent。
<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="vertical">

    <Button android:id="@+id/btn_mul" android:text="*"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="0dp"/>
    <Button android:id="@+id/btn_sub" android:text="-"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="0dp"/>
    <Button android:id="@+id/btn_add" android:text="+"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="0dp"/>
    <Button android:id="@+id/btn_equ" android:text="＝"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="0dp"/>

</LinearLayout>

至此，計算器的介面佈局就完成了。

/*******************************************************************/
* 版權宣告
* 本教程只在CSDN和安豆網釋出，其他網站出現本教程均屬侵權。

*另外，我們還推出了Arduino智慧硬體相關的教程，您可以在我們的網店跟我學Arduino程式設計中購買相關硬體。同時也感謝大家對我們這些碼農的支援。

*最後再次感謝各位讀者對安豆的支援，謝謝:)
/*******************************************************************/

相關推薦

手把手教你做安豆計算器（二）－計算器介面佈局

第3節 計算器介面佈局 現在起，我們就開始正式開發“計算器”應用。這一節，我們將完成計算器的介面佈局，讓它初具計算器的模樣。 計算器介面是通過佈局檔案定義的。它位於專案的res\layout\activity_main.xml檔案中。 這個佈局檔案通過

手把手教你做音樂播放器（五）音樂列表的儲存（下）

5.2 MusicService的配合 MusicService對外提供新增播放列表的介面，對內要管理PlayListContentProvider。它提供了下面的介面， addPlayList()：新增播放列表。這裡新增列表應該有兩種形式，一種是一次性新

手把手教你做智慧LED燈（一） 功能規劃與設計方案

前言 智慧硬體有意思，現在市場上有很多針對普通消費者的智慧硬體。例如，智慧燈泡、智慧插座、智慧電子秤，甚至無人飛行器。拋開這些智慧裝置實現的功能不談，它們的實現原理都是大同小異：通過手機的藍芽（或者wifi網路），連線智慧硬體上的藍芽模組，向藍芽模組傳送各種控

手把手教你開發jquery插件（一）

PE ora ID outside sep write -c visio .sh Just as the auther of jQuery Tools said: 上海代孕 http://www.xyrjkf.cn/ jQuery UI has a so-called

手把手教你構建 C 語言編譯器（6）

由於語法分析本身比較複雜，所以我們將它拆分成 3 個部分進行講解，分別是：變數定義、函式定義、表示式。本章講解函式定義相關的內容。 手把手教你構建 C 語言編譯器系列共有10個部分： EBNF 表示 這是上一章的 EBNF 方法中與函式定義相關的內容。 variable_decl ::= type {'*

手把手教你構建 C 語言編譯器（4）

本章我們將講解遞迴下降的方法，並用它完成一個基本的四則運算的語法分析器。 手把手教你構建 C 語言編譯器系列共有10個部分： 什麼是遞迴下降 傳統上，編寫語法分析器有兩種方法，一種是自頂向下，一種是自底向上。自頂向下是從起始非終結符開始，不斷地對非終結符進行分解，直到匹配輸入的終結符；自底向上是不斷地將終

手把手教你構建 C 語言編譯器（8）

這是整個編譯器的最後一部分，解析表示式。什麼是表示式？表示式是將各種語言要素的一個組合，用來求值。例如：函式呼叫、變數賦值、運算子運算等等。 表示式的解析難點有二：一是運算子的優先順序問題，二是如何將表示式編譯成目的碼。我們就來逐一說明。 手把手教你構建 C 語言編譯器系列共有10個部分： 運算子的優先順

手把手教你構建 C 語言編譯器（2）

本章是“手把手教你構建 C 語言編譯器”系列的第三篇，本章我們要構建一臺虛擬的電腦，設計我們自己的指令集，執行我們的指令集，說得通俗一點就是自己實現一套匯編語言。它們將作為我們的編譯器最終輸出的目的碼。 手把手教你構建 C 語言編譯器系列共有10個部分： #計算機的內部工作原理 計算機中有三個基本部件需要

手把手教你構建 C 語言編譯器（5）

本章中我們用 EBNF 來大致描述我們實現的 C 語言的文法，並實現其中解析變數定義部分。 由於語法分析本身比較複雜，所以我們將它拆分成 3 個部分進行講解，分別是：變數定義、函式定義、表示式。 手把手教你構建 C 語言編譯器系列共有10個部分： EBNF 表示 EBNF 是對前一章提到的 BNF 的擴充

手把手教你構建 C 語言編譯器（9）

恭喜你完成了自己的 C 語言編譯器，本章中我們發一發牢騷，說一說編寫編譯器值得注意的一些問題；編寫編譯器時遇到的一些難題。 手把手教你構建 C 語言編譯器系列共有10個部分： 虛擬機器與目的碼 整個系列的一開始，我們就著手虛擬機器的實現。不知道你是否有同感，這部分對於整個編譯器的編寫其實是十分重要的。我認

手把手教你構建 C 語言編譯器（1）

本章是“手把手教你構建 C 語言編譯器”系列的第二篇，我們要從整體上講解如何設計我們的 C 語言編譯器。 手把手教你構建 C 語言編譯器系列共有10個部分： 首先要說明的是，雖然標題是編譯器，但實際上我們構建的是 C 語言的直譯器，這意味著我們可以像執行指令碼一樣去執行 C 語言的原始碼檔案。這麼做的理由

手把手教你構建 C 語言編譯器（0）

“手把手教你構建 C 語言編譯器” 這一系列教程將帶你從頭編寫一個 C 語言的編譯器。希望通過這個系列，我們能對編譯器的構建有一定的瞭解，同時，我們也將構建出一個能用的 C 語言編譯器，儘管有許多語法並不支援。 手把手教你構建 C 語言編譯器系列共有10個部分： 在開始進入正題之前，本篇是一些閒聊，談談這

手把手教你構建 C 語言編譯器（3）

本章我們要講解如何構建詞法分析器。 手把手教你構建 C 語言編譯器系列共有10個部分： 什麼是詞法分析器 簡而言之，詞法分析器用於對原始碼字串做預處理，以減少語法分析器的複雜程度。 詞法分析器以原始碼字串為輸入，輸出為標記流（token stream），即一連串的標記，每個標記通常包括： (token,

手把手教你構建 C 語言編譯器（7）

整個編譯器還剩下最後兩個部分：語句和表示式的解析。它們的內容比較多，主要涉及如何將語句和表示式編譯成彙編程式碼。這章講解語句的解析，相對於表示式來說它還是較為容易的。 手把手教你構建 C 語言編譯器系列共有10個部分： 語句 C 語言區分“語句”（statement）和“表示式”（expression）兩

手把手教你整合maven+spring專案（3）

 在上一篇部落格裡我們講解了如何用maven專案整合Springmvc，今天我們將圍繞Spring Security 來介紹，Spring Security 提供了基於javaEE的企業應用軟體全面的安全服務，如果你的專案對於安全和訪問要求比較高，強烈輕易你在專案中使用Spring Sec

手把手教你整合maven+spring專案（2）

在上一篇部落格裡，講解了如何新建Maven專案，今天在我們將會在上一篇部落格的基礎上，整合springmvc，本篇部落格適合新手入門springmvc，下面將開始今天的正文； 第一步：新增包com.zds,並新增controller、dao、service各包， 然後，修改pom.xml，新

手把手教你如何玩轉面試（資料庫）

本篇是講解對於資料庫知識的整理，當然，不只是需要知道這個方面的內容，還需要掌握其他方面的知識，我都根據自己的經歷來進行了整理，方便大家進行系統化的學習，只有多複習多研究，才能對技術有更好的掌握，才能拿到更好的offer。 下面是其他方面的知識點，歡迎大家進行瀏覽

手把手教你如何玩轉面試（作業系統）

        本篇是講解關於JavaWeb崗位面試方面的一些對於作業系統知識的整理，當然，不只是需要知道這個方面的內容，還需要掌握其他方面的知識，我都根據自己的經歷來進行了整理，方便大家進行系統化的學習，只有多複習多研究，才能對技術有更好的掌握，才能拿到更好的offer。

手把手教你如何玩轉面試（作業系統） PCB IPC

手把手教你如何玩轉面試（作業系統） 2018年10月18日 15:57:01 Cs_hnu_scw 閱讀數：852 版權宣告：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/Cs_hnu_scw/article/details/79

手把手教你移植linux核心---------OK6410（一）

配置資訊： 移植核心：linux-3.3.5       可以從  http://www.kernel.org/     下載純正的版本    編譯環境：vmware下ubuntu11.04 交叉編譯版本：4.3.2 準備工作： 一塊OK6410開發板，交叉網線，串列埠線