Android布局之线性布局LinearLayout(二) ----简单模仿ios端小米计算器主界面UI

Android布局之线性布局LinearLayout(二) ----简单模仿ios端小米计算器主界面UI

  今天老师的要求是让用LinearLayout布局做自己手机自带的计算器的UI设计，因为ios端的计算器是圆形按钮的，当时做的时候还不清楚Button控件如何调整成圆形，故我下载了小米计算器，方形按钮比较容易用Button控件实现。
  图片如下：
小米计算器ios端
  思路：计算器界面可以用竖直布局，上面显示数字，下面为各种按钮，通过权重来设置比例。按钮部分可以用水平布局来实现。
  缺陷：

  1. 没有模仿ios计算器；
  2. Button按钮不知道如何加边框，而是用了一个非常笨的方法，用TextView加灰色背景色充当边框；
  3. 布局没有设计好，橘黄色的长条状“=”按钮是用两个Button控件拼接出来的，仅仅只是做到了形似

  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">
    <!--文字显示-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="5"
        android:background="#EDEEEE">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="60dp"
            android:gravity="right|bottom"
            android:text="0"
            android:textColor="#313131"
            android:textSize="60dp" />

    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#797979" />
    <!--第一行-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FDFDFD"
            android:text="C"
            android:textColor="#FF5722"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="DEL"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="÷"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="×"
            android:textSize="25dp" />

    </LinearLayout>
    <!--第一行-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#797979" />

    <!--第二行-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="7"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="8"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="9"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="-"
            android:textSize="25dp" />

    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#797979" />

    <!--第三行-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="4"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="5"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="6"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="+"
            android:textSize="25dp" />

    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#797979" />

    <!--第四行-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="1"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="2"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="3"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FF5722"
            android:text=""
            android:textSize="25dp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:layout_weight="3"
            android:background="#797979" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:layout_weight="1"
            android:background="#FF5722" />

    </LinearLayout>
    <!--第五行-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="%"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="0"
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:text="."
            android:textSize="25dp" />

        <TextView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#797979" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FF5722"
            android:text="＝"
            android:textColor="#FFFFFF"
            android:textSize="25dp" />

    </LinearLayout>

</LinearLayout>

  为了更加美观和达到100%还原，这里隐藏了标题栏并把状态栏改成灰色
styles.xml添加了如下代码：

        <!--隐藏标题栏-->
        <item name="windowNoTitle">true</item>
        <!--隐藏状态栏-->
        <item name="android:windowFullscreen">false</item>

colors.xml更改了如下代码：

    <color name="colorPrimary">#EDEEEE</color>
    <color name="colorPrimaryDark">#EDEEEE</color>

运行截图如下：
小米计算器ios端

  明天争取实现完全模仿ios端原生计算器。

posted @   Smileher  阅读(783)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示