2019级软件工程应用与实践-人工智能快递柜（代码分析4）

最新推荐文章于 2024-07-16 01:00:13 发布

deja vu ┭┮

最新推荐文章于 2024-07-16 01:00:13 发布

阅读量1.5k

点赞数

文章标签：人工智能 android ui

本文链接：https://blog.csdn.net/Shyhammer/article/details/120958732

版权

2021SC@SDUSC
在分析完manifest文件之后，下面几篇博客将会对用户界面设计的相关代码及背景知识进行分析和学习，大致的学习路径为：
UI设计相关的概念->控制UI界面->布局管理器

UI设计相关的概念

UI界面开发方式

1.使用XML布局文件控制UI界面
2.在JAVA代码中控制UI界面
3.使用XML与JAVA代码混合控制UI界面
4.开发自定义view
本项目使用的是第一种方式。此方法可以将xml布局代码和java逻辑控制代码分离开来，使程序结构更加清晰明了，是比较推荐的开发方式。
使用XML布局文件控制UI界面的方法：
1.在Android应用的res/layout/目录下编写XML布局文件
2.在Activity中使用java代码显示XML文件中布局的内容

setContentView(R.layout.activity_main);

UI界面开发代码总览

在这里插入图片描述
.app\res\drawable
位图文件 or 9 Patch文件 or Drawable对象等XML资源文件
.app\res\layout
布局文件
.app\res\mipmap
需要适应分辨率的文件放置处
m<h<xh<xxh<xxxh
拷贝图片直接放mipmap文件夹C+V，会有选项
.app\res\values
顾名思义

布局管理器

本项目使用了多种布局管理器，现选用一些代表代码进行分析。

FrameLayout 帧布局管理器

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/menu_item_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white"
    android:orientation="vertical">

    <SurfaceView
        android:id="@+id/sfv_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</FrameLayout>

其中，以下代码是所有的布局管理器中均存在的

xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"

使用tools命名空间以及其属性来解决许多开发时的问题

xmlns:tools= "http://schemas.android.com/tools"

tools可以告诉Android Studio，哪些属性在运行的时候是被忽略的，只在设计布局的时候有效。tools可以覆盖android的所有标准属性，将android:换成tools:即可。同时在运行的时候就连tools:本身都是被忽略的，不会被带进apk中。

android:id="@+id/menu_item_layout"

id属性只能接受资源类型的值，也就是必须以@开头的值。@后面使用“+”，表示当修改完某个布局文件并保存后，系统会自动在R.java文件中生成相应的int类型变量。变量名就是“/”后面的值，在本代码中@+id/menu_item_layout会在R.java文件中生成int menu_item_layout = value，其中value是一个十六进制的数。如果menu_item_layout在R.java中已经存在同名的变量，就不再生成新的变量，而该组件会使用这个已存在的变量的值。
android @id和@+id的区别

    android:layout_width="fill_parent"
    android:layout_height="fill_parent"

layout_width/layout_hight=match_parent表示继承上一个控件大小有多少就是多少
若layout_width/layout_hight=wrap_content:表示包含内容有多少宽度就有多少
歪个楼：LinearLayout布局中Layout_weight的深刻理解-为何需设置android:layout_width=“0dp”

android:orientation="vertical"

android:orientation=“vertical” 排列方式为垂直方向
android:orientation=“horizontal” 排列方式为水平方向

    <SurfaceView
        android:id="@+id/sfv_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

SurfaceView是继承与View，也就是我们在Click实践中常用到的view。它是在View层中，一个专门用户绘画的类。在绘画的时候，基本已定会用到的有以下几个工具类：Paint，画笔类；Cavans，画布类；
layout_width/layout_hight=wrap_content:表示包含内容有多少宽度就有多少

GridLayout

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="4"
    tools:context="sdu.cislc.lcms.cabinet.serial.DeviceBindActivity"
    >
    
    <EditText
        android:id="@+id/bind_code_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="1"
        android:text="TextView" />

    <Button
        android:id="@+id/bind_code"
        android:layout_height="49dp"
        android:layout_row="2"
        android:layout_column="1"
        android:text="bind_code" />
    <Button
        android:id="@+id/start_service"
        android:layout_height="49dp"
        android:layout_row="3"
        android:layout_column="1"
        android:text="start_service" />
</GridLayout>

对于GridLayout本身的属性：
android:columnCount
说明：GridLayout的最大列数
android:rowCount
说明：GridLayout的最大行数
对于子元素的属性：
android:layout_column
说明：显示该子控件的列，例如android:layout_column=”1”,表示当前子控件显示在第2列
另补充：android:layout_columnSpan
说明：该控件所占的列数，例如android:layout_columnSpan=”2”,表示当前子控件占两列。
android:layout_row和android:layout_rowSpan行属性与之类似
用法归纳:

先定义组件的对其方式 android:orientation 水平或者竖直,设置多少行与多少列
设置组件所在的行或者列,记得是从0开始算的,不设置默认每个组件占一行一列
设置组件横跨几行或者几列;设置完毕后,需要在设置一个填充:android:layout_gravity = “fill”
另：android:gravity 与android:layout_gravity区别总结
android:gravity：
这个是针对控件里的元素来说的，用来控制元素在该控件里的显示位置
android:layout_gravity：
这个是针对控件本身而言，用来控制该控件在包含该控件的父控件中的位置
关于android:layout_gravity在采用LinearLayout布局时有一些特殊情况需要注意：
(1)当 android:orientation=”vertical” 时， android:layout_gravity只有水平方向的设置才起作用，
垂直方向的设置不起作用。即：left，right，center_horizontal 是生效的。
(2)当 android:orientation=”horizontal” 时， android:layout_gravity只有垂直方向的设置才起作用，
水平方向的设置不起作用。即：top，bottom，center_vertical 是生效的。

效果图：
在这里插入图片描述

LinearLayout

<?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=".component.KeyboardFragment">

    <EditText
        android:id="@+id/frag_record_et_money"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </EditText>

    <android.inputmethodservice.KeyboardView
        android:id="@+id/frag_record_keyboard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:background="@color/key_board_back"
        android:keyBackground="@drawable/selector_keyboard"
        android:keyTextColor="@color/key_board_font"
        android:labelTextSize="30px"
        android:keyTextSize="50px"
        android:paddingTop="1dp"
        android:shadowColor="@color/white"
        android:shadowRadius="0.0" />
</LinearLayout>

ools:context="activity name"这一句不会被打包进APK。只是ADT的Layout Editor在你当前的Layout文件里面设置对应的渲染上下文，说明你当前的Layout所在的渲染上下文是activity name对应的那个activity，如果这个activity在manifest文件中设置了Theme，那么ADT的Layout Editor会根据这个Theme来渲染你当前的Layout。

    <android.inputmethodservice.KeyboardView
        android:id="@+id/frag_record_keyboard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:background="@color/key_board_back"
        android:keyBackground="@drawable/selector_keyboard"
        android:keyTextColor="@color/key_board_font"
        android:labelTextSize="30px"
        android:keyTextSize="50px"
        android:paddingTop="1dp"
        android:shadowColor="@color/white"
        android:shadowRadius="0.0" />

android.inputmethodservice.KeyboardView显示虚拟键盘的视图。处理呈现的按键并检测按键和触摸动作。
具体属性含义：
在这里插入图片描述

效果图：
在这里插入图片描述

嵌套？？？

布局管理器的嵌套就是将多种布局管理器混合使用，以达到复杂布局的排版效果。如果一个布局页面效果复杂，可能使用一种布局管理器无法完成，那么我们就需要将多种布局管理器嵌套起来以达到显示效果。在Web开发中，编写的CSS基本都是设置嵌套元素的样式的，这个理念是类似的。

<?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:id="@+id/inner_root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".component.ModeInnerLayout">

    <!--中转物品-->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:gravity="center">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="&lt; "
                    android:textSize="20dp"></TextView>

                <TextView
                    android:id="@+id/btn_return"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="返回"></TextView>
            </LinearLayout>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="中转物品"></TextView>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:text="58s"></TextView>
        </RelativeLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <sdu.cislc.lcms.cabinet.component.SduLinkButton
                android:id="@+id/save_button"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layout_weight="1"
                app:btn_icon="@drawable/btn_save"
                app:btn_style="@drawable/selector_save"
                app:btn_text="寄存" />

            <sdu.cislc.lcms.cabinet.component.SduLinkButton
                android:id="@+id/take_button"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layout_weight="1"
                app:btn_icon="@drawable/btn_take"
                app:btn_style="@drawable/selector_save"
                app:btn_text="领取" />

        </LinearLayout>


        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:src="@drawable/process_save"></ImageView>

    </LinearLayout>

</LinearLayout>

嵌套层次：
在这里插入图片描述
只是在嵌套布局管理器时我们要注意设置各个布局管理器的layout_height为包裹高度，而不能设置成为填充屏幕，否则该布局管理器就会占据剩余屏幕整个内容，而其它的布局管理器将无法显示。
在嵌套布局管理器时，页面的排版已经非常的复杂了，而若想使用Java代码对其进行控制，这个难度就已经很大了，所以在复杂布局管理器下不建议再编写Java代码来控制了，使用XML文件来布局是比较简单的方式。
参考博客
 Android学习笔记16：布局管理器的嵌套
 inputmethodservice.KeyboardView——属性分析

deja vu ┭┮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019级软件工程应用与实践-人工智能快递柜（代码分析4）

2021SC@SDUSC在分析完manifest文件之后，下面几篇博客将会对用户界面设计的相关代码及背景知识进行分析和学习，大致的学习路径为：UI设计相关的概念->控制UI界面->布局管理器UI设计相关的概念UI界面开发方式1.使用XML布局文件控制UI界面2.在JAVA代码中控制UI界面3.使用XML与JAVA代码混合控制UI界面4.开发自定义view本项目使用的是第一种方式。此方法可以将xml布局代码和java逻辑控制代码分离开来，使程序结构更加清晰明了，是比较推荐的开发方
复制链接

扫一扫