更新于 

Android UI

UI

  • 用户界面(User Interface,简称 UI,亦称使用者界面)是系统和用户之间进行交互和信息交换 的媒介,它实现信息的内部形式与人类可以接受形式之间的转换。
  • 软件设计可分为两个部分:编码设计与UI设计。

Android UI

  • Android应用界面包含用户可查看并与之交互的所有内容。Android 提供丰富多样的预置 UI 组 件,例如结构化布局对象和 UI 控件,您可以利用这些组件为您的应用构建图形界面。Android 还 提供其他界面模块,用于构建特殊界面,例如对话框、通知和菜单。
  • Android UI 都是由布局和控件组成的

布局

布局(layout)可定义应用中的界面结构(Activity的界面结构)。布局中的所有元素均使用View和ViewGroup对象的层次结构进行构建。

View通常绘制用户可查看并进行交互的内容。然而,ViewGroup是不可见容器,用于定义和其他ViewGroup对象的布局结构。

布局的结构

  • 定义界面布局的视图层次结构:

    image-20210808110833650

  • View对象通常称为“微件”,可以是众多子类之一,例如Button或TextView。

  • ViewGroup对象通常称为布局,可以是提供其他布局结构的众多类型之一,例如LinearLayout或ConstrainLayout

声明布局

  • 在XML中声明界面元素,Android提供对应View类及其子类的简明XML词汇,如用于微件和布局的词汇。

    也可以使用Android Studio的Layout Editor,并采用拖放界面来构建XML布局。

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".MainActivity">
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
  • 在运行时实例化布局元素。应用可通过编程创建View对象和和ViewGroup对象(操纵其属性)。

    ConstraintLayout constraintLayout = new ConstraintLayout(this);
    TextView view = new TextView(this);
    view.setText("Hello World!");
    constraintLayout.addView(view);

编写XML

  • 利用Android的XML词汇,按照在HTML中创建包含一系列嵌套元素的网页的相同方式快速设计UI布局及其包含的屏幕元素。

  • 每个布局文件都必须包含一个根元素,并且该元素必须是视图对象或ViewGroup对象

  • 定义根元素后,可以子元素的形式添加其他布局对象或控件,从而逐步构建定义布局的视图层次结构

  • 在XML中声明布局后,以.xml扩展名将文件保存在Android项目的res/layout目录中

    <?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" >
    <TextView android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, I am a Button" />
    </LinearLayout>

加载XML资源

当编译应用时,系统会将每个 XML 布局文件编译成 View 资源。在 Activity.onCreate() 回调 内,通过调用 setContentView() ,并以 R.layout.*layout_file_name* 形式向应用代码传 递布局资源的引用 ,加载应用代码中的布局资源。

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

属性

每个 View 对象和 ViewGroup 对象均支持自己的各种 XML 属性 。某些属性是 View 对象的特有 属性(例如,TextView 支持 textSize 属性),但可扩展此类的任一 View 对象也会继承这些属 性。某些属性是所有 View 对象的共有属性,因为它们继承自 View 根类(例如 id 属性)。此 外,其他属性被视为“布局参数”,即描述 View 对象特定布局方向的属性,如由该对象的父 ViewGroup 对象定义的属性。

<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="24sp"/>
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮"/>

ID

任何 View 对象均可拥有与之关联的整型 ID,用于在结构树中对 View 对象进行唯一标识。编译应 用后,系统会以整型形式引用此 ID,但在布局 XML 文件中,系统通常会以字符串的形式在 id 属性中指定该 ID。这是所有 View 对象共有的 XML 属性(由 View 类定义),并且您会经常使 用该属性。

  • XML标记内部的ID:

    android:id="@+id/tv"
  • 字符串开头处的 @ 符号指示 XML 解析器应解析并展开 ID 字符串的其余部分,并将其标识为 ID 资 源。加号 (+) 表示这是一个新的资源名称,必须创建该名称并将其添加到我们的资源(在 R.java 文件中)内。Android 框架还提供许多其他 ID 资源。引用 Android 资源 ID 时,不需要加号,但 必须添加 android 软件包命名空间

    android:id="@android:id/empty"

    @+id 和 @id区别:

    • 其实@+id就是在R.java文件里新增一个id名称,如果之前已经存在相同的id名称,那么会覆盖之

    前的名称。

    • 而@id则是直接引用R.java文件的存在的id资源,如果不存在,会编译报错。
  • ID字符串名称,在同一布局中是必须唯一的,不能重名,不同布局中可以重名。

  • 通过ID值创建视图对象

    <TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:textSize="24sp"/>
    TextView textView = (TextView) findViewById(R.id.tv);

布局参数

  • layout_***的布局属性

    <TextView
    android:layout_width="100dp" an
    droid:layout_height="200dp"
    android:layout_marginLeft="10dp" //左边距
    android:layout_marginTop="10dp" //上边距
    android:text="Hello World!" />
  • 布局参数作用是给视图设定在布局中位置和大小

  • ViewGroup 类会实现一个扩展 ViewGroup.LayoutParams 的嵌套类,里面包含一些设置视图

    view 的尺寸和位置的属性。

    • 视图层次结构图,包含每个视图关联的布局参数:

      image-20210808113008626

      TextView tv = new TextView(this);
      LinearLayout linearLayout = new LinearLayout(this);
      LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams)tv.getLayoutParams();
      layoutParams.leftMargin = 30; //左边距 layoutParams.topMargin = 30;//上边距
      layoutParams.width = 100;//宽
      layoutParams.height = 200;//高 tv.setLayoutParams(layoutParams);
      linearLayout.addView(tv);
  • 一般而言,建议不要使用绝对单位(如像素)来指定布局宽度和高度。更好的方法是使用相对测量 单位(如与密度无关的像素单位 (dp) 、 wrap_content 或 match_parent ),因为其有助于确 保您的应用在各类尺寸的设备屏幕上正确显示。

    • wrap_content 指示您的视图将其大小调整为内容所需的尺寸。
    • match_parent 指示您的视图尽可能采用其父视图组所允许的最大尺寸。

常用布局

线性布局 - LinearLayout

  • LinearLayout 是一个视图容器,用于使所有子视图在单个方向(垂直或水平)保持对齐。您可 使用 android:orientation 属性指定布局方向。

  • android:orientation="horizontal"

    image-20210808114017343

  • android:orientation="vertical"

    image-20210808114047278

  • 布局权重 android:layout_weight

    通过给子视图设置权重值,来分配子视图所占空间的权重(比例),如图三个子视图权重分别设置

    为1,均分页面空间

    image-20210808114130737

相对布局 - RelativeLayout

  • 相对布局 :子视图可通过相应的布局属性,设定相对于另一个兄弟视图或父视图容器的相对位置

  • 属性说明

    • 相对于兄弟元素

      属性名称 属性含义
      android:layout_below=”@id/aaa” 在指定View的下方
      android:layout_above=”@id/aaa” 在指定View的上方
      android:layout_toLeftOf=”@id/aaa” 在指定View的左边
      android:layout_toRightOf=”@id/aaa” 在指定View的右边
      android:layout_alignTop=”@id/aaa” 与指定View的上边界一致
      android:layout_alignBottom=”@id/aaa” 与指定View下边界一致
      android:layout_alignLeft=”@id/aaa” 与指定View的左边界一致
      android:layout_alignRight=”@id/aaa” 与指定View的右边界一致
    • 相对于父元素

      属性名称 属性含义
      android:layout_alignParentLeft=”true” 在父元素内左边
      android:layout_alignParentRight=”true” 在父元素内右边
      android:layout_alignParentTop=”true” 在父元素内顶部
      android:layout_alignParentBottom=”true” 在父元素内底部
    • 对齐方式

      属性名称 属性含义
      android:layout_centerInParent=”true” 居中布局
      android:layout_centerVertical=”true” 垂直居中布局
      android:layout_centerHorizontal=”true” 水平居中布局
    • 间隔

      属性名称 属性含义
      android:layout_marginBottom=”” 离某元素底边缘的距离
      android:layout_marginLeft=”” 离某元素左边缘的距离
      android:layout_marginRight =”” 离某元素右边缘的距离
      android:layout_marginTop=”” 离某元素上边缘的距离
      android:layout_paddingBottom=”” 往内部元素底边缘填充距离
      android:layout_paddingLeft=”” 往内部元素左边缘填充距离
      android:layout_paddingRight =”” 往内部元素右边缘填充距离
      android:layout_paddingTop=”” 往内部元素右边缘填充距离
  • 父容器定位属性示意图

    image-20210808115600322

  • 根据兄弟组件定位

    Xnip2021-08-08_11-56-27

帧布局 - FrameLayout

最简单的一种布局,没有任何定位方式,当我们往里面添加控件的时候,会默认把他们放到这块区
域的左上角,帧布局的大小由控件中最大的子控件决定,如果控件的大小一样大的话,那么同一时
刻就只能看到最上面的那个组件,后续添加的控件会覆盖前一个。

image-20210808115759572

网格布局 - GridLayout

属性说明:

名称 含义
android:columnCount 列数
android:rowCount 行数
android:layout_columnSpan 横跨的列数
andoird:layout_rowSpan 横跨的行数

常用组件

TextView

TextView(文本框),用于显示文本的一个控件。

  • 文本的字体尺寸单位为sp

  • sp:scaled pixels(放大像素),主要用于字体显示

  • 文本常用属性

    属性名 作用
    id 为TextView设置一个组件id,根据id,我们可以在Java代码中通过 findViewById()的方法获取到该对象,然后进行相关属性的设置
    layout_width 组件的宽度
    layout_height 组件的高度
    gravity 设置控件中内容的对齐方式,TextView中是文字,ImageView中是图片等等
    text 设置显示的文本内容,一般我们是把字符串写到string.xml文件中,然后通过@string/xxx取得对应的字符串内容(方便做国际化)
    textColor 设置字体颜色,同上,通过colors.xml资源来饮用
    textStyle 设置字体风格,三个可选值:normal、bold、italic
    textSize 字体大小,单位一般是用sp
    background 控件的背景颜色,可以理解为填充整个空间的颜色,可以是图片
    autoLink 识别链接类型(web, email, phone, map, none, all)
  • 文本设置边框

    • 实现原理

      编写一个ShapeDrawable的资源文件!然后TextView将backgroud设置为这个drawable资源即可

    • ShapeDrawable的资源文件

      • <**solid** android:color = “xxx”> 这个是设置背景颜色的

      • <**stroke** android:width = “xdp” android:color=”xxx”> 这个是设置边框的粗细,以及边 框颜色的

      • <**padding** androidLbottom = “xdp”…> 这个是设置边距的

      • <**corners** android:topLeftRadius=”10px”…> 这个是设置圆角的

      • <**gradient**> 这个是设置渐变色的

        可选属性有:

        startColor:起始颜色

        endColor:结束颜 色

        centerColor:中间颜色

        angle:方向角度,等于0时,从左到右,然后逆时针方向转,当 angle = 90度时从下往上

        type:设置渐变的类型

        • 编写矩形边框的Drawable

          <?xml version="1.0" encoding="utf-8"?>
          <shape
          xmlns:android="http://schemas.android.com/apk/res/android"
          >
          <!-- 设置一个黑色边框 -->
          <stroke android:width="2px" android:color="#000000"/> <!-- 渐变 -->
          <gradient
          android:angle="270"
          android:endColor="#C0C0C0"
          android:startColor="#FCD209" />
          <!-- 设置一下边距,让空间大一点 -->
          <padding
          android:left="5dp"
          android:top="5dp"
          android:right="5dp"
          android:bottom="5dp"/>
          </shape>
        • 编写圆角矩形边框的Drawable

          <?xml version="1.0" encoding="utf-8"?>
          <shape
          xmlns:android="http://schemas.android.com/apk/res/android"
          >
          <!-- 设置透明背景色 -->
          <solid android:color="#87CEEB" /> <!-- 设置一个黑色边框 -->
          <stroke
          android:width="2px"
          android:color="#000000" /> <!-- 设置四个圆角的半径 --> <corners
          android:bottomLeftRadius="10px"
          android:bottomRightRadius="10px"
          android:topLeftRadius="10px"
          android:topRightRadius="10px" />
          <!-- 设置一下边距,让空间大一点 --> <padding
          android:bottom="5dp"
          android:left="5dp"
          android:right="5dp"
          android:top="5dp" />
          </shape>
        • image-20210808133506858

  • 带图片(drawableXxx)的TextView

    属性名 作用
    android:drawableLeft 文本左边设置图片
    android:drawableRight 文本右边设置图片
    android:drawableBottom 文本下边设置图片
    android:drawableTop 文本上边设置图片
    • 应用场景

      IMG_8977

    • 属性说明

      <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.jay.example.test.MainActivity" >
      <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:drawableTop="@drawable/show1"
      android:drawableLeft="@drawable/show1"
      android:drawableRight="@drawable/show1"
      android:drawableBottom="@drawable/show1"
      android:drawablePadding="10dp"
      android:text="张全蛋" />
      </RelativeLayout>

      image-20210808133841107

EditText

  • 输入框,继承TextView,也继承其属性

  • EditText特有属性:

    属性名 说明
    android:hint 默认提示文本
    android:textColorHint 默认提示文本的颜色
    android:selectAllOnFocus 布尔值。
    点击输入框获得焦点后,获取到输入框中所有的文本内容
    android:inputType 对输入的数据进行限制
    android:minLines 设置最小行数
    android:maxLines 设置最大行数
    当输入内容超过maxline,文字会自动向上滚动
    android:singleLine 只允许单行输入,而且不会滚动
    android:textScaleX 设置字与字的水平间隔
    android:textScaleY 设置字与字的垂直间隔
    android:capitalize sentence:仅第一个字母大写
    words:每一个单词首字母大写,用空格区分单词
    characters:每一个英文字母都大些
    • 文本类型

      多为大写、小写和数字符号

      android:inputType="none"
      android:inputType="text"
      android:inputType="textCapCharacters"
      android:inputType="textCapWords"
      android:inputType="textCapSentences"
      android:inputType="textAutoCorrect"
      android:inputType="textAutoComplete"
      android:inputType="textMultiLine"
      android:inputType="textImeMultiLine"
      android:inputType="textNoSuggestions"
      android:inputType="textUri"
      android:inputType="textEmailAddress"
      android:inputType="textEmailSubject"
      android:inputType="textShortMessage"
      android:inputType="textLongMessage"
      android:inputType="textPersonName"
      android:inputType="textPostalAddress"
      android:inputType="textPassword"
      android:inputType="textVisiblePassword"
      android:inputType="textWebEditText"
      android:inputType="textFilter"
      android:inputType="textPhonetic"
    • 数值类型

      android:inputType="number" 
      android:inputType="numberSigned"
      android:inputType="numberDecimal"
      android:inputType="phone"//拨号键盘
      android:inputType="datetime"
      android:inputType="date"//日期键盘
      android:inputType="time"//时间键盘
  • 设置EditText获取焦点,同时弹出小键盘

    edit.requestFocus();//请求获取焦点 
    edit.clearFocus();//清除焦点

    点本的系统直接requestFocus就会自动弹出小键盘

    稍微高一点的版本则需要手动去弹键盘

    第一种:

    InputMethodManagerimm=(InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
    imm.toggleSoftInput(0,InputMethodManager.HIDE_NOT_ALWAYS);

    第二种

    InputMethodManagerimm=(InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); imm.showSoftInput(view,InputMethodManager.SHOW_FORCED);
    imm.hideSoftInputFromWindow(view.getWindowToken(),0);//强制隐藏键盘
  • EditText光标位置的控制

    setSelection();//一个参数的是设置光标位置的,两个参数的是设置起始位置与结束位置的中 间括的部分,即部分选中

Button

ImageView

RadioButton & CheckBox

开关按钮 ToggleButton 和开关 Switch

ProgressBar

SeekBar - 拖动条

ScrollView - 滚动条

Date & Time 组件

ListView

GridView - 网格视图

Spinner - 列表选项框

ExpandableListView- 可折叠列表

Toast - 吐司

AlertDialog - 对话框