安卓实验1 界面设计:控件和布局

这篇具有很好参考价值的文章主要介绍了安卓实验1 界面设计:控件和布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

实验题目:界面设计:控件和布局

  • 实验目的

1了解Android编程原理

2掌握基本布局管理器、控件的应用

3掌握控件的事件处理编程

  • 实验内容

编写一个小费计算器,界面如下。在Amount框中输入就餐费用,在15%标准小费率列下将按15%计算小费(Tip)的金额和应付总金额(Total),在18%定制小费比例下将按定制比例计算小费和应付总额。定制小费率可以通过拖动SeekBar进行修改。(自拟实验内容也可以,只要涉及到的是相同的知识点。比如可以是课堂上做过的练习题或者是自主学习时候的做过的练习题)android界面设计器,ui,android-studio

  • 程序设计思想(流程图,或算法思想或设计方案等)

本次实验设计一个小费计算器,需要使用到布局管理器和控件的应用。界面分为两部分,上半部分是输入框和SeekBar控件,下半部分是显示小费和总金额的文本框。实现的主要思路是:

UI设计:在activity_main.xml文件中,使用TextView显示“账单金额”、“小费金额”、“总金额”等标签,使用EditText允许用户输入账单金额,使用SeekBar提供滑块选择器以选择自定义小费百分比,使用RadioButton提供两个选项:15%和自定义百分比。

创建变量和实例化UI元素:在MainActivity类中,声明了一些变量来存储账单金额和自定义小费百分比,以及UI元素的引用,如tipTextView、totalTextView、amountEditText和customSeekBar等。在onCreate()方法中,使用findViewById()方法实例化这些UI元素,并将它们存储在对应的变量中。

实现监听器:为了在用户更改EditText、SeekBar或RadioButton时更新小费和总金额,需要实现相应的监听器。使用TextWatcher接口实现一个amountEditTextWatcher来监听EditText的更改,使用OnSeekBarChangeListener接口实现一个customSeekBarListener来监听SeekBar的更改,使用OnCheckedChangeListener接口实现一个监听器来监听RadioButton的更改。当用户更改EditText、SeekBar或RadioButton时,这些监听器将自动更新小费和总金额。

更新小费和总金额:为了更新小费和总金额,可以实现两个私有方法updateStandard()和updateCustom(),它们计算并更新小费和总金额的值,并将这些值显示在tipTextView和totalTextView中。

使用NumberFormat进行格式化:为了将小费和总金额格式化为货币值,可以使用NumberFormat类的静态方法getCurrencyInstance()创建一个货币格式对象,然后使用该对象的format()方法将double值格式化为货币值。

处理RadioButton选择:当用户选择15%的RadioButton时,将SeekBar的进度设置为15,并将EditText的文本设置为空。

处理SeekBar滑块选择:当用户拖动SeekBar时,根据SeekBar的进度计算自定义小费百分比,并更新小费和总金额。

  • 源代码(主要源代码)

MainActivity.java

package com.example.caculate;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.text.Editable;

import android.text.TextWatcher;

import android.widget.EditText;

import android.widget.RadioButton;

import android.widget.SeekBar;

import android.widget.TextView;

import android.widget.CompoundButton;

import java.text.NumberFormat;

public class MainActivity extends AppCompatActivity {

    private static final NumberFormat currencyFormat = NumberFormat.getCurrencyInstance();

    private static final NumberFormat percentFormat = NumberFormat.getPercentInstance();

    private double billAmount = 0.0;

    private double customPercent = 0.18;

    private TextView tipTextView;

    private TextView totalTextView;

    private EditText amountEditText;

    private SeekBar customSeekBar;

    private RadioButton fifteenPercentRadioButton;

    private RadioButton  customPercentRadioButton;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

       tipTextView = findViewById(R.id.tipTextView);

        totalTextView = findViewById(R.id.totalTextView);

        amountEditText = findViewById(R.id.amountEditText);

        customSeekBar = findViewById(R.id.customSeekBar);

        fifteenPercentRadioButton=findViewById(R.id.fifteenPercentRadioButton);

        customPercentRadioButton=findViewById(R.id.customPercentRadioButton);

        amountEditText.addTextChangedListener(amountEditTextWatcher);

        customSeekBar.setOnSeekBarChangeListener(customSeekBarListener);

        fifteenPercentRadioButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

            @Override

            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

                if(isChecked) {

                    customSeekBar.setProgress(15);

                    amountEditText.setText(""); // 将amountEditText清空

                }

            }

        });

    }

    private void updateStandard() {

        double tip = billAmount * 0.15;

        double total = billAmount + tip;

        tipTextView.setText(currencyFormat.format(tip));

        totalTextView.setText(currencyFormat.format(total));

    }

    private void updateCustom() {

//        percentTextView.setText(percentFormat.format(customPercent));

        double tip = billAmount * customPercent;

        double total = billAmount + tip;

        tipTextView.setText(currencyFormat.format(tip));

        totalTextView.setText(currencyFormat.format(total));

    }

    private final TextWatcher amountEditTextWatcher = new TextWatcher() {

        @Override

        public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

        @Override

        public void onTextChanged(CharSequence s, int start, int before, int count) {

            try {

                billAmount = Double.parseDouble(s.toString());

            } catch (NumberFormatException e) {

                billAmount = 0.0;

            }

            updateStandard();

            updateCustom();

        }

        @Override

        public void afterTextChanged(Editable s) {}

    };

    private final SeekBar.OnSeekBarChangeListener customSeekBarListener = new SeekBar.OnSeekBarChangeListener() {

        @Override

        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

            customPercent = progress / 100.0;

            updateCustom();

        }

        @Override

        public void onStartTrackingTouch(SeekBar seekBar) {}

        @Override

        public void onStopTrackingTouch(SeekBar seekBar) {}

    };

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:padding="16dp">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/bill_amount_label" />

    <EditText

        android:id="@+id/amountEditText"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:inputType="numberDecimal"

        android:textSize="24sp" />

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="tip_percent_label" />

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

        <RadioGroup

            android:id="@+id/tipRadioGroup"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="vertical">

            <RadioButton

                android:id="@+id/fifteenPercentRadioButton"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="fifteen_percent_label"

                android:checked="true" />

            <RadioButton

                android:id="@+id/customPercentRadioButton"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="custom_percent_label" />

        </RadioGroup>

        <SeekBar

            android:id="@+id/customSeekBar"

            android:layout_width="10dp"

            android:layout_height="wrap_content"

            android:layout_weight="3"

             />

        <TextView

            android:id="@+id/customPercentTextView"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="custom_percent_label"

            android:visibility="gone" />

    </LinearLayout>

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        android:padding="8dp">

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/tip_amount_label" />

        <TextView

            android:id="@+id/tipTextView"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:textSize="24sp" />

    </LinearLayout>

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        android:padding="8dp">

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/total_amount_label" />

        <TextView

            android:id="@+id/totalTextView"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:textSize="24sp" />

    </LinearLayout>

</LinearLayout>

  • 测试与运行
  1. 在调试程序的过程中遇到什么问题,是如何解决的?

在调试过程中可能会遇到控件无法响应点击事件的问题,这时可以检查代码中是否正确设置了控件的点击事件监听器,并且确保监听器方法中实现了正确的逻辑。

  1. 测试数据及运行结果。(无测试数据的,直接记录运行结果)

输入餐费金额为100,选择fiften_percent_lable设置定制小费率为15%,则计算结果如下:

小费金额:15.00

应付总金额:115.00

android界面设计器,ui,android-studio

输入餐费金额为100,选择custom_precent_label设置定制小费率为50%,则计算结果如下:

小费金额: 50.00

应付总金额:150.00

android界面设计器,ui,android-studio

  • 总结

本次实验通过编写小费计算器程序,深入学习了Android中常用的布局管理器和控件,以及控件事件的处理方法。通过本次实验,我掌握了以下知识:

LinearLayout布局管理器的使用方法,包括垂直和水平方向的布局。

TextView和EditText控件的基本属性和使用方法。

RadioGroup、RadioButton和SeekBar控件的基本属性和使用方法,以及如何为它们添加事件监听器。

如何为控件添加事件监听器,并实现相应的逻辑,如计算小费和总金额等。

通过本次实验,我不仅掌握了Android程序开发的基础知识,还能够为后续的Android应用开发打下良好的基础。在未来的Android应用开发中,我可以更加熟练地运用布局管理器和控件,并实现更加复杂的交互逻辑和UI设计。文章来源地址https://www.toymoban.com/news/detail-735729.html

到了这里,关于安卓实验1 界面设计:控件和布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 九宫格布局小程序-模仿微信钱包界面设计-基础入门

    九宫格布局小程序-模仿微信钱包界面设计-基础入门

    代码展示: 使用flex布局模型和wx:for属性仿微信“钱包”页面实现九宫格 项目创建完毕之后,在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index,表示小程序运行的第一个页面; 将app.json文件内pages属性中的“pages/logs/logs”删除,并删除上一行末尾

    2024年02月08日
    浏览(26)
  • Winform UI界面设计例程——多线程访问UI控件

    Winform UI界面设计例程——多线程访问UI控件

    这里讨论两种多线程访问UI控件的方法,线程完成后更新Lable控件 如下图,第一种方式为方式1按钮按下,线程运行,并更新label 第二种方法为按下方式2按钮,线程运行,完成后更新label  新建winform项目程序,布局如上,大家可以不用配色,简单即可 引用 using System.Threading;  

    2023年04月08日
    浏览(13)
  • 安卓开发学习之设计三种计算机界面

    安卓开发学习之设计三种计算机界面

    1.简单的计算器 2.科学计算器 3.程序计算器 不用实现具体功能,只需设计界面即可! 为了更好的在三个界面之间跳转,添加一个主界面。 activity_main.xml 线性布局中添加4个按钮 界面效果: 简单计算器: chengxujishuanqi.xml 界面效果: 科学计算器: kexuejishuanqi.xml 界面效果: 程序

    2023年04月08日
    浏览(10)
  • UI界面视觉设计之字体要素--安卓-ios-网页常用字体

    UI界面视觉设计之字体要素--安卓-ios-网页常用字体

     怎么设计出从而设计出富有美感和形式感的优秀作品? 1.设计经验的积累。 2. 在每个项目设计中只使用1到2个字体样式,通过对字体大小或颜色来强调重点文案,如图的界面设计中,都是通过字体大小、粗细来区分界面内容中的层级关系。字体用得越多,越显得不够专业;

    2024年02月05日
    浏览(15)
  • Android Studio欢迎界面和登陆界面的设计(小白)

    Android Studio欢迎界面和登陆界面的设计(小白)

            最近学校开设了Android Studio的开发课程,跟着书上的例子和小破站的视频开启了安卓小白之旅,今天主要整理了一下\\\"欢迎界面\\\"和\\\"登陆界面\\\"的相关内容。         首先新建一个项目,按照自己的需求命名项目 新建一个类,命名为Splash  欢迎界面的页面布局 在layout中

    2024年02月10日
    浏览(14)
  • Android用户注册界面设计

    Android用户注册界面设计

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 提示:以下是本篇文章正文内容,下面案例可供参考 根据前面的学习内容,设计如图1所示的用户注册界面,要求如下: (1)将应用的名称、姓名编辑框的输入提示中的“张三”,改为自己的姓名; (

    2023年04月12日
    浏览(7)
  • Android studio - UI 界面设计(仿问卷星登陆注册界面)

    Android studio - UI 界面设计(仿问卷星登陆注册界面)

    1 先上效果图: 2 准备工作 建如下活动文件以及素材文件 3 代码实现 3.1 修改themes.xml、 themes.xml(night)文件 使自定义按钮组件起效果 代码实现 btn_login.xml button_lg.xml button_res.xml 3.2 实现布局 3.2.1 登陆界面 activity_login.xml 3.2.2 注册界面 activity_register.xml 4 按钮实现页面跳转 4.1 Logi

    2024年02月11日
    浏览(12)
  • PyQt5设计好UI界面后,通过Python文件打开,控件集中在左上角问题解决方案

    PyQt5设计好UI界面后,通过Python文件打开,控件集中在左上角问题解决方案

            在用PyQt5做GUI界面时遇到的一个问题,在QtDesigner预览的界面正常,但是转换成.py文件后show()出来的界面,控件都挤在左上角无法使用。 目录 一、问题 1.QtDesigner预览的界面正常​编辑 2.转换.py文件后通过show()方法,显示异常 二,解决方法 1.在MainWindow = QtWidgets.QM

    2024年02月04日
    浏览(12)
  • Android开发-UI界面--类微信页面设计

    Android开发-UI界面--类微信页面设计

    一、功能说明 二、开发技术 ​ 本次用到了 layout.xml、控件、监听、fragment layout(布局) ​ 定义了用户界面的可视化结构,主要有4种布局: ConstrainLayout (约束布局):一个使用“相对定位”灵活地确定微件的位置和大小的一个布局 LinearLayout (线性布局):按照水平或垂直

    2024年02月10日
    浏览(10)
  • Android布局和控件:创建用户界面的XML布局文件和常用UI控件详解

    在Android应用开发中,创建用户界面是一个重要的任务。通过使用XML布局文件和常用的UI控件,开发人员可以设计和构建出吸引人且功能丰富的应用界面。本文将详细介绍如何使用XML布局文件来创建Android应用的用户界面,并深入探讨一些常用UI控件的属性和用法。 XML布局文件是

    2024年02月17日
    浏览(12)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包