实战 01|「编写互动式界面」

这篇具有很好参考价值的文章主要介绍了实战 01|「编写互动式界面」。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

实践是最好的学习方式,技术也如此。

一、功能需求(一)


1、功能需求描述

  • 组成:两个 Button 元素(Button1Button2 )和一个 TextView
  • 功能:用户点击 Button1,屏幕显示一条消息(a Toast);点击 Button2 增加 TextView 中显示的 “计数器” ,计数器从 0 开始;
实战 01|「编写互动式界面」,安卓开发入门指南(注重实操),android

2、知识点


实战 01|「编写互动式界面」,安卓开发入门指南(注重实操),android
实战 01|「编写互动式界面」,安卓开发入门指南(注重实操),android
  • View

    • 定义应用中的界面结构;
    • 布局中的所有元素均使用 ViewViewGroup 对象的层次结构进行构建;
    • View 通常用于绘制用户可见的并与之交互的内容;ViewGroup 是不可见的容器,用于定义 View 和其它 ViewGroup 对象的布局结构;
      • View 对象通常称为 控件,可以是多个子类之一;例如 ButtonTextView
        ViewGroup 对象通常称为 布局,可以是提供不同布局结构之一;例如 LinearLayoutConstraintLayout
  • 常用属性

    • match_parent
      • 用于 layout_widthlayout_height
      • 扩展 View 以按宽度或高度填充其父级。当 LinearLayout 是根 View 时,它会扩展到屏幕的大小(父 View )
    • Wrap_content(指占满父容器此时要控件的宽或高等于父容器的宽或高);
      • 用于 layout_widthlayout_height
      • 缩小尺寸,使 View 足够大以包含其内容。如果没有内容, View 将变得不可见(指控件的高或宽随内容的长度决定);
    • 具体展示参考链接:链接

3、布局与程序设计


调色板窗格:显示
组件树窗格:显示 UI 元素的视图层次结构;View 元素被组织成父级和子级的树形层次结构,子级继承其父级的属性;

创建布局

为 Button 添加 OnClick 属性和处理程序;单击处理程序是当用户单击或点击可单击 UI 元素时调用的方法

public class MainActivity extends AppCompatActivity {
    private int mCount = 0;
    private TextView mShowCount;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);  // 指定一个视图
        Log.i("myapplication", "1521");
        }

    public void showToast(View view) {
        Toast toast = Toast.makeText(this, R.string.toast_message, Toast.LENGTH_SHORT);
        toast.show();
    }

    public void countUp(View view) {
        mCount ++;
        mShowCount = (TextView) findViewById(R.id.show_count);
        if (mShowCount != null) {
            mShowCount.setText(Integer.toString(mCount));
        }
    }
}

二、功能需求(二)


1、功能需求描述

  • 为手机和平板电脑等较大显示器水平和垂直方向创建布局变体;通常在另一个视图组中使用,以水平或垂直排列 UI 元素。

2、知识点

1)LinearLayout
  • LinearLayout:是一个 ViewGroup,将视图结合排列在水平或垂直行中,以水平垂直排列 UI 元素。
  • 修改属性;
  • 修改视图控件位置 -> 修改代码位置;
  • 修改权重 (android:layout_weight),额外空间分配;
<?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:id="@+id/button_toast"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="@android:color/holo_purple"
        android:text="@string/button_label_toast"
        android:textColor="@android:color/black"
        android:onClick="showToast" />


    <TextView
        android:id="@+id/show_count"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="@string/count_initial_value"
        android:textColor="@android:color/holo_purple"
        android:textSize="160sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/button_count"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="@android:color/holo_purple"
        android:text="@string/button_label_count"
        android:textColor="@android:color/black"
        android:onClick="countUp" />
    
</LinearLayout>

2)RelativeLayout
  • 视图分组,其中每个视图相对于组内的其他视图进行定位和对齐,用于构建布局;
  • 相对于其他元素的位置:android:layout_below="@+id/xxx"
  • 相对于父视图的位置:android:layout_centerHorizontal="true"

android:layout_below=“@+id/show_count”:相对于其他视图的位置

<?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">

    <Button
        android:id="@+id/button_toast"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="@android:color/holo_purple"
        android:text="@string/button_label_toast"
        android:textColor="@android:color/black"
        android:onClick="showToast" />


    <TextView
        android:id="@+id/show_count"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="@string/count_initial_value"
        android:textColor="@android:color/holo_purple"
        android:textSize="160sp"
        android:textStyle="bold"
        android:layout_below="@+id/button_toast"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        />

    <Button
        android:id="@+id/button_count"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="@android:color/holo_purple"
        android:text="@string/button_label_count"
        android:textColor="@android:color/black"
        android:onClick="countUp"
        android:layout_below="@+id/show_count"
        android:layout_centerHorizontal="true"
        />

</RelativeLayout>

三、功能需求(三)


1、功能需求描述

1)滚动单个元素
实战 01|「编写互动式界面」,安卓开发入门指南(注重实操),android
实战 01|「编写互动式界面」,安卓开发入门指南(注重实操),android
  • 显示文章标题(TextView)、副标题(TextView)、文章(TextView);
    文本和滚动试图
    文本信息超出了显示屏的显示范围,创建滚动视图,用户向上或向下滑动垂直滚动,向左或向右滑动水平滚动
知识点
  • 使用 ScrollView 滚动单个子 View (例如 TextView )。一个 ScrollView 只能容纳一个子 View 或 ViewGroup 。

<ScrollView</ScrollView>文章来源地址https://www.toymoban.com/news/detail-621460.html

<RelativeLayout 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"
    tools:context="com.example.android.scrollingtext.MainActivity">

    <TextView
        android:id="@+id/article_heading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:padding="@dimen/padding_regular"
        android:text="@string/article_title"
        android:textAppearance=
                        "@android:style/TextAppearance.DeviceDefault.Large"
        android:textColor="@android:color/white"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/article_subheading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/article_heading"
        android:padding="@dimen/padding_regular"
        android:text="@string/article_subtitle"
        android:textAppearance=
                        "@android:style/TextAppearance.DeviceDefault" />

    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/article_subheading">

        <TextView
            android:id="@+id/article"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:autoLink="web"
            android:lineSpacingExtra="@dimen/line_spacing"
            android:padding="@dimen/padding_regular"
            android:text="@string/article_text" />

    </ScrollView>

</RelativeLayout>
2)滚动多个元素
  • 将文章副标题和文章一起滚动
知识点
  • 使用 ViewGroup (例如 LinearLayout )作为 ScrollView 中的子 View 来滚动多个 View 元素。将元素括在 LinearLayout 内
实战 01|「编写互动式界面」,安卓开发入门指南(注重实操),android
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/article_heading"
        android:background="@color/head_backgroud"

        android:textColor="@android:color/white"
        android:padding="@dimen/padding_regular"
        android:textAppearance="@android:style/TextAppearance.DeviceDefault"
        android:textStyle="bold"
        android:text="@string/article_title"/>

    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/article_heading">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/article_subheading"
                android:padding="@dimen/padding_regular"
                android:textAppearance="@android:style/TextAppearance.DeviceDefault"
                android:text="@string/article_subtitle"/>
            
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/article"
                android:autoLink="web"
                android:padding="@dimen/padding_regular"
                android:text="@string/article_text"

                android:lineSpacingExtra="@dimen/line_spacing"/>

        </LinearLayout>
    </ScrollView>

</RelativeLayout>

2、效果展示

实战 01|「编写互动式界面」,安卓开发入门指南(注重实操),android

四、更改启动器图标

  • 启动器图标:应用程序图标或产品图标,显示在设备的屏幕;
实战 01|「编写互动式界面」,安卓开发入门指南(注重实操),android

到了这里,关于实战 01|「编写互动式界面」的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 安卓开发——UI界面开发

    开发一个类似微信的主页面框架,UI布局为上中下结构,包含4个tab界面: 页面顶部为页面标题 页面底部为导航栏 页面中部为内容展示界面 layout xml,控件,监听,fragment 选择File-New-New Project 空项目 项目设置 选择java项目 该UI界面由多个xml布局页面组成: 顶部标题栏 : app的标题,即

    2023年04月27日
    浏览(79)
  • 安卓开发——微信UI界面

    一、功能说明 本次作业开发的是类似微信的主页面框架,UI布局为上中下结构,用户可通过点击底部导航栏切换板块内容,其中共包含四个板块,分别是“微信”、“通讯录”、“发现”和“我的”。 二、设计流程 2.1 页面设计 微信的界面布局分为上中下三个部分。 (1)第

    2024年02月05日
    浏览(39)
  • 安卓开发 微信ui界面设计 (Android Studio)

    功能: 开发一个类似微信的主页面框架,UI布局为上中下结构,包含4个tab界面: 开发技术为: layout xml、控件、监听,fragment; 设计流程: 创建项目 改下项目名,编程语言为java UI界面 UI界面由多个xml组成,头部标题为微信,中间留空白,底部分为四个(微信,联系人,发现,

    2024年02月15日
    浏览(62)
  • 安卓开发学习之设计三种计算机界面

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

    2023年04月08日
    浏览(51)
  • 【移动开发学习】 Android Studio 编写一个简单的微信界面

    Android Studio简单还原微信ui 目标 实现3-4个tab的切换效果 技术需求 activity, xml, fragment, recyclerview 成果展示 其中联系人界面通过recyclerview实现了可以滑动列表           仓库地址 https://github.com/SmileEX/wecaht.git 实现过程 主要ui 第一步我们首先把微信的ui主体做出来,即这三个部分

    2024年02月08日
    浏览(65)
  • 【移动开发学习】 Android Studio 编写一个简单的微信界面 (2)

    Android Studio简单还原微信ui 上一期完成内容(前情提要) 上次我们简单地实现了微信的几个初始界面,并且在联系人页面通过recycleview添加了许多的view 目标 建立在上次的基础上,我们来扩展联系人界面的功能,给每一个view添加一个点击功能,让其可以跳转到另一个activity,

    2024年02月05日
    浏览(63)
  • 很合适新手入门使用的Python游戏开发包pygame实例教程-01[开发环境配置与第一个界面]

    我们假定你已经安装好了我们开发python程序的sublime text,如果不知道怎么安装的可以参照我前面的博文。这里只需要解决的是配置好Pygame的问题。本篇博文主要解决开发环境配置以及第一个游戏界面的显示问题。 文章原出处: https://blog.csdn.net/haigear/article/details/130173836 没有

    2024年01月25日
    浏览(96)
  • 【IMX6ULL驱动开发学习】01.编写第一个hello驱动+自动创建设备节点(不涉及硬件操作)

    目录 一、驱动程序编写流程 二、代码编写 2.1 驱动程序hello_drv.c 2.2 测试程序 2.3 编写驱动程序的Makefile 三、上机实验 3.1 NFS 挂载 3.2 测试示例 构造file_operations结构体 在里面填充open/read/write/ioctl成员 注册file_operations结构体 int major = register_chrdev(0, \\\"name\\\", fops); 入口函数:调用

    2024年02月13日
    浏览(42)
  • Android音视频开发实战01-环境搭建

    FFmpeg 是一款流行的开源多媒体处理工具,它可以用于转换、编辑、录制和流式传输音视频文件。FFmpeg 具有广泛的应用场景,包括视频编解码、格式转换、裁剪、合并、滤镜等等。官网:https://ffmpeg.org/ FFmpeg 支持各种常见的音视频格式,例如 MP4、AVI、FLV、MOV、AAC、MP3、M4A 等等

    2024年02月10日
    浏览(56)
  • 家校互通小程序实战开发01需求分析

    最近几年,随着移动互联网的深入发展,我们的日常生活和工作和微信已经紧密绑定。其实,有时候生活和工作的界限已经不明显,在我们的微信好友里既有家人、朋友,也有同事、客户和领导。 因为微信连接的便利性和沟通的及时性,现在学校也将微信作为和家长沟通和连

    2024年01月15日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包