Android简单计算器UI界面设计-01

直接上干货

显示框

显示框的设计是在res-drawable下建立了一个.xml文件，设计显示框的格式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <!--实心-->
    <solid android:color="@android:color/primary_text_dark"/>
    <!--边框-->
    <stroke android:width="0.5dp" android:color="@android:color/darker_gray"/>
    <!--圆角-->
    <corners android:radius="5dp"/>
    <!--边距-->
    <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp"/>

</shape>

UI界面布局

在res-layout下创建一个名为layout_simply（修改：之前的布局命名为了程序计算器）的.xml文件。
首先创建时记得选择线性布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="0dp"
    android:layout_gravity="center_horizontal">
    <!--tools:context=".SimpleActivity$placeholderForagment"-->

    <!--显示框-->
    <LinearLayout
      android:id="@+id/ll_input_result"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="20dp"
      android:background="@drawable/tv_input_result_shape"
      android:orientation="vertical">

      <TextView
          android:id="@+id/tv_input"
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="1"
          android:gravity="right"
          android:text="0"
          android:textSize="10dp"/>
  </LinearLayout>

    <!--按钮区-->
    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:columnCount="4"
        android:padding="0dp"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:layout_gravity="center_horizontal">

        <Button
            android:id="@+id/btn_action_backspce"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:text="退格"
            android:onClick="onSimpleCalculatorClicked"/>
        <Button
            android:id="@+id/btn_action_clear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="清除"
            android:onClick="onSimpleCalculatorClicked"/>

        <Button
            android:id="@+id/btn_action_sumandsub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="±"
            android:onClick="onSimpleCalculatorClicked"/>
        <Button
            android:id="@+id/btn_action_sum"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="＋"
            android:onClick="onSimpleCalculatorClicked"/>

        <!--第二行-->
        <Button
            android:id="@+id/btn_action_7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:text="7"
            android:onClick="onSimpleCalculatorClicked"/>

        <Button
            android:id="@+id/btn_action_8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="8"
            android:onClick="onSimpleCalculatorClicked"/>
        <Button
            android:id="@+id/btn_action_9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="9"
            android:onClick="onSimpleCalculatorClicked"/>

        <Button
            android:id="@+id/btn_action_sub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="-"
            android:onClick="onSimpleCalculatorClicked"/>

        <!--第三行-->
        <Button
            android:id="@+id/btn_action_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:text="4"
            android:onClick="onSimpleCalculatorClicked"/>

        <Button
            android:id="@+id/btn_action_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="5"
            android:onClick="onSimpleCalculatorClicked"/>

        <Button
            android:id="@+id/btn_action_6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="6"
            android:onClick="onSimpleCalculatorClicked"/>

        <Button
            android:id="@+id/btn_action_mul"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="*"
            android:onClick="onSimpleCalculatorClicked"/>

        <!--第四行-->
        <Button
            android:id="@+id/btn_action_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:text="1"
            android:onClick="onSimpleCalculatorClicked"/>

        <Button
            android:id="@+id/btn_action_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="2"
            android:onClick="onSimpleCalculatorClicked"/>

        <Button
            android:id="@+id/btn_action_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="3"
            android:onClick="onSimpleCalculatorClicked"/>

        <Button
            android:id="@+id/btn_action_div"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="/"
            android:onClick="onSimpleCalculatorClicked"/>

        <!--第五行-->
        <Button
            android:id="@+id/btn_action_0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:text="0"
            android:onClick="onSimpleCalculatorClicked"/>

        <Button
            android:id="@+id/btn_action_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="."
            android:onClick="onSimpleCalculatorClicked"/>

        <Button
            android:id="@+id/btn_action_backwards"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="1/X"
            android:onClick="onSimpleCalculatorClicked"/>
        <Button
            android:id="@+id/btn_action_equal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="0dp"
            android:layout_marginLeft="20dp"
            android:text="="
            android:onClick="onSimpleCalculatorClicked"/>

    </GridLayout>

</LinearLayout>

效果图如下↓