Android UI

UI

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

Android UI

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

布局

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

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

布局的结构

定义界面布局的视图层次结构：
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 的尺寸和位置的属性。

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

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"
android:orientation="vertical"
布局权重 android:layout_weight

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

为1，均分页面空间

相对布局 - 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=””	往内部元素右边缘填充距离

父容器定位属性示意图
根据兄弟组件定位

帧布局 - FrameLayout

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

网格布局 - 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>

带图片(drawableXxx)的TextView

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

应用场景

属性说明

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

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();//一个参数的是设置光标位置的，两个参数的是设置起始位置与结束位置的中 间括的部分，即部分选中

Android UI

UI

Android UI

布局

布局的结构

声明布局

编写XML

加载XML资源

属性

ID

布局参数

常用布局

线性布局 - LinearLayout

相对布局 - RelativeLayout

帧布局 - FrameLayout

网格布局 - GridLayout

常用组件

TextView

EditText

Button

ImageView

RadioButton & CheckBox

开关按钮 ToggleButton 和开关 Switch

ProgressBar

SeekBar - 拖动条

ScrollView - 滚动条

Date & Time 组件

ListView

GridView - 网格视图

Spinner - 列表选项框

ExpandableListView- 可折叠列表

Toast - 吐司

AlertDialog - 对话框

PopupWindow - 悬浮框