Android-UI 基础知识04

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android-UI 基础知识04相关的知识，希望对你有一定的参考价值。


01 android UI

1.1 UI

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

1.2 Android UI

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

02 布局

布局(layout)可定义应用中的界面结构（例如 Activity 的界面结构）。布局中的所有元素均使用 View和 ViewGroup 对象的层次结构进行构建。View 通常绘制用户可查看并进行交互的内容。然而，ViewGroup 是不可见容器，用于定义 View 和其他 ViewGroup 对象的布局结构。

2.1 布局的结构

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

Android-UI

  • View 对象通常称为“微件”，可以是众多子类之一，例如 Button 或 TextView 。
  • ViewGroup 对象通常称为“布局”，可以是提供其他布局结构的众多类型之一，例如LinearLayout 或 ConstraintLayout 。

2.2 声明布局

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

android:layout_

tools:context=".MainActivity">

<TextView

android:layout_

android:layout_

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>


Android-UI

在运行时实例化布局元素。您的应用可通过编程创建 View 对象和 ViewGroup 对象（并操纵其属性）。

ConstraintLayout constraintLayout = new ConstraintLayout(this);

TextView view = new TextView(this);

view.setText("Hello World!");

constraintLayout.addView(view);

* 提示 : 使用 Layout Inspector 调试布局，可以查看通过代码创建的布局

1. 在连接的设备或模拟器上[运行您的应用]。

2. 依次点击 Tools > Layout Inspector。

3. 在显示的 Choose Process 对话框中，选择要检查的应用进程，然后点击 OK。

Android-UI

2.3 编写XML

  • 利用 Android 的 XML 词汇，按照在 html 中创建包含一系列嵌套元素的网页的相同方式快速设计UI 布局及其包含的屏幕元素
  • 每个布局文件都必须只包含一个根元素，并且该元素必须是视图对象或 ViewGroup 对象
  • 定义根元素后，可以子元素的形式添加其他布局对象或控件，从而逐步构建定义布局的视图层次结构
  • 在 XML 中声明布局后，以 .xml 扩展名将文件保存在Android 项目的 res/layout/ 目录中

<LinearLayout

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

android:layout_

android:layout_

android:orientation="vertical" >

<TextView android:id="@+id/text"

android:layout_

android:layout_

android:text="Hello, I am a TextView" />

<Button android:id="@+id/button"

android:layout_

android:layout_

android:text="Hello, I am a Button" />

</LinearLayout>


2.4 加载 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);

2.5 属性

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

<TextView
android:id="@+id/tv"
android:layout_
android:layout_
android:text="Hello World!"
android:textSize="24sp"/>

<Button
android:id="@+id/btn"
android:layout_
android:layout_
android:text="按钮"/>

2.6 ID


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

  • XML 标记内部的 ID 语法是：

android:1 id="@+id/tv"

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

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

添加 android 软件包命名空间后，我们现在将从 android.R 资源类而非本地资源类引用 ID

R.java 文件

Android-UI

tips: @+id 和 @id区别：

其实@+id就是在R.java文件里新增一个id名称，如果之前已经存在相同的id名称，那么会覆盖之前的名称。而@id则是直接引用R.java文件的存在的id资源，如果不存在，会编译报错。

注意： ID 字符串名称，在同一布局中必须是唯一的，不能重名，不同布局中可以同名；

通过ID值创建我们视图对象的实例

<TextView
android:id="@+id/tv"
android:layout_
android:layout_
android:text="Hello World!"
android:textSize="24sp"/>



TextView textView = (TextView) findViewById(R.id.tv);

2.7 布局参数 LayoutParams

  • layout_*** 的布局属性

<TextView
android:layout_
android:layout_
android:layout_marginLeft="10dp" //左边距
android:layout_marginTop="10dp" //上边距
android:text="Hello World!" />

  • 布局参数作用是给我们的视图设定在布局中位置和大小
  • ViewGroup 类会实现一个扩展 ViewGroup.LayoutParams 的嵌套类，里面包含一些设置视图view 的尺寸和位置的属性。

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

Android-UI

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 指示您的视图尽可能采用其父视图组所允许的最大尺寸。

2.8 布局位置

  • 视图可以通过调用 getLeft() 方法和 getTop() 方法来获取视图的坐标位置 ，也可以通过getWidth() 和getHeight() 获取视图的尺寸，这些方法返回的值是相对于其父视图的位置。
  • 位置和尺寸的单位是像素（ px ）

px 与 dp 区别

px 即像素，1px代表屏幕上一个物理的像素点；

给视图设置px单位，不同分辨率下，尺寸不一样

Android-UI


dp (dip) Density independent pixels ，设备无关像素。它与“像素密度”密切相关 ;

dpi像素密度： 每英寸包含的像素数

假设有一部手机，屏幕的物理尺寸为1.5英寸x2英寸，屏幕分辨率为240x320，则我们可以计算出在这部手机的屏幕上，每英寸包含的像素点的数量为240/1.5=160dpi（横向）或320/2=160dpi（纵向），160dpi就是这部手机的像素密度，像素密度的单位dpi是Dots Per Inch的缩写，即每英寸像素数量.


Android-UI

Android-UI


2.9 内边距和外边距

Android-UI

Android-UI

03 常用布局

3.1 线性布局 - LinearLayout

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

Android-UI

  • android:orientatinotallow="vertical"

Android-UI

  • 布局权重android:layout_weight

Android-UI

通过给子视图设置权重值，来分配子视图所占空间的权重（比例），如图三个子视图权重分别设置为1，均分页面空间

3.2 相对布局 - RelativeLayout

  • 相对布局 ：子视图可通过相应的布局属性，设定相对于另一个兄弟视图或父视图容器的相对位置
  • 属性说明：
  • 相对于兄弟元素

Android-UI


  • 相对于父元素

Android-UI


  • 对齐方式

Android-UI


  • 间隔

Android-UI

  • 父容器定位属性示意图

Android-UI

  • 根据兄弟组件定位

Android-UI

3.3 帧布局 - FrameLayout

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

Android-UI

3.4 网格布局 GridLayout


  • 属性说明：

Android-UI

04 常用组件

4.1 TextView

  • TextView (文本框)，用于显示文本的一个控件。
  • 文本的字体尺寸单位为sp :
  • sp: scaled pixels(放大像素). 主要用于字体显示。
  • 文本常用属性：

Android-UI

  • 文本设置边框

实现原理：

编写一个ShapeDrawable的资源文件！然后TextView将 background 设置为这个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: 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:
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>

Android-UI


  • 带图片(drawableXxx)的TextView

Android-UI

应用场景

Android-UI

属性使用：



<RelativeLayout

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

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

android:layout_

android:layout_

tools:context="com.jay.example.test.MainActivity" >

<TextView

android:layout_

android:layout_

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>

Android-UI


4.2 EditText(输入框)

  • EditText 输入框，集成与TextView, 也继承其属性
  • EditText 特有属性

Android-UI

  • 文本类型，多为大写、小写和数字符号

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就会自动弹出小键盘了

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

第一种：

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

第二种 :

InputMethodManager imm = (InputMethodManager)
getSystemService(Context.INPUT_METHOD_SERVICE);
imm.showSoftInput(view,InputMethodManager.SHOW_FORCED);
imm.hideSoftInputFromWindow(view.getWindowToken(), 0); //强制隐藏键盘

  • EditText光标位置的控制

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

4.3 Button(按钮)

  • Button 控件继承TextView ，拥有TextView 的属性
  • StateListDrawable 简介

StateListDrawable 是Drawable资源的一种，可以根据不同的状态，设置不同的图片效果，关键节点< selector > ，我们只需要将Button的background 属性设置为该drawable资源即可轻松实现，按下 按钮时不同的按钮颜色或背景！

Android-UI

  • btn_bg1.xml

<?xml versinotallow="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/color1" android:state_pressed="true"
/>
<item android:drawable="@color/color4" android:state_enabled="false"
/>
<item android:drawable="@color/color3" />
</selector>

  • layout_btn.xml

<?xml versinotallow="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_
android:orientatinotallow="vertical"
android:paddingTop="50dp">
<Button
android:id="@+id/btnOne"
android:layout_
android:layout_
android:background="@drawable/btn_bg1"
android:text="按钮"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold" />
<Button
android:id="@+id/btnTwo"
android:layout_
android:layout_
android:text="按钮不可用"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>

  • MainActivity.java

public class MainActivity extends Activity 
private Button btnOne,btnTwo;
@Override
protected void onCreate(Bundle savedInstanceState) 
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnOne = (Button) findViewById(R.id.btnOne);
btnTwo = (Button) findViewById(R.id.btnTwo);
btnTwo.setOnClickListener(new OnClickListener()  //按钮绑定点击
事件
@Override
public void onClick(View v) 
if(btnTwo.getText().toString().equals("按钮不可用"))
btnOne.setEnabled(false);
btnTwo.setText("按钮可用");
else
btnOne.setEnabled(true);
btnTwo.setText("按钮不可用");


);

4.4 ImageView(图像视图)

ImageView 见名知意，就是用来显示图像的一个View或者说控件

需掌握的知识点：

1. ImageView的src属性和blackground的区别；

2. adjustViewBounds设置图像缩放时是否按长宽比

3. scaleType设置缩放类型

4. 最简单的绘制圆形的ImageView

src属性和background属性的区别

在API文档中我们发现ImageView有两个可以设置图片的属性，分别是：src和background

常识：

① background通常指的都是背景,而src指的是内容!!

② 当使用src填入图片时,是按照图片大小直接填充,并不会进行拉伸,而使用background填入图

片,则是会根据ImageView给定的宽度来进行拉伸

案例：

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_
android:layout_
android:orientation="vertical"
tools:context="com.jay.example.imageviewdemo.MainActivity" >
<ImageView
android:layout_
android:layout_
android:background="@drawable/pen" />
<ImageView
android:layout_
android:layout_
android:background="@drawable/pen" />
<ImageView
android:layout_
android:layout_
android:src="@drawable/pen" />
<ImageView
android:layout_
android:layout_
android:src="@drawable/pen" />
</LinearLayout>

  • Java代码中设置blackground和src属性:

前景(对应src属性):setImageDrawable();
背景(对应background属性):setBackgroundDrawable();

  • 两者结合妙用

<ImageView
android:layout_gravity="center"
android:padding="20dp"
android:layout_
android:layout_
android:background="@drawable/shape_bg"
android:src="@mipmap/pen" />

  • scaleType 属性 android:scaleType

ndroid:scaleType用于设置显示的图片如何缩放或者移动以适应ImageView的大小 Java代

码中可以通过imageView.setScaleType(ImageView.ScaleType.CENTER);来设置~ 可选

值如下：

fitXY:对图像的横向与纵向进行独立缩放,使得该图片完全适应ImageView,但是图片的横纵比

可能会发生改变

fitStart:保持纵横比缩放图片,知道较长的边与Image的编程相等,缩放完成后将图片放在

ImageView的左上角

fitCenter:同上,缩放后放于中间;

fitEnd:同上,缩放后放于右下角;

center:保持原图的大小，显示在ImageView的中心。当原图的size大于ImageView的size，

超过部分裁剪处理。

centerCrop:保持横纵比缩放图片,知道完全覆盖ImageView,可能会出现图片的显示不完全

centerInside:保持横纵比缩放图片,直到ImageView能够完全地显示图片

matrix:默认值，不改变原图的大小，从ImageView的左上角开始绘制原图， 原图超过

ImageView的部分作裁剪处理

  1. fitEnd , fitStart , fitCenter

<ImageView
android:background="#ffc"
android:layout_
android:layout_
android:layout_gravity="center"
android:scaleType="fitStart"
android:src="@mipmap/ic_launcher" />

  1. centerCrop 与centerInside

centerCrop:按横纵比缩放,直接完全覆盖整个ImageView
centerInside:按横纵比缩放,使得ImageView能够完全显示这个图片

  1. fitXY

不按比1 例缩放图片，目标是把图片塞满整个View

  1. matrix

从ImageView的左上角开始绘制原图，原图超过ImageView的部分作裁剪处理

  1. center

保持原图的大小，显示在ImageView的中心。当原图的size大于ImageView的size，超过
部分裁剪处理。

4.5 RadioButton(单选按钮)&Checkbox(复选框)

RadioButton (单选按钮) 基本用法与事件处理：

如题单选按钮，就是只能够选中一个，所以我们需要把RadioButton放到RadioGroup按钮组中，

从而实现 单选功能！先熟悉下如何使用RadioButton，一个简单的性别选择的例子： 另外我们可

以为外层RadioGroup设置orientation属性然后设置RadioButton的排列方式，是竖直还是水平~

Android-UI

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_
android:layout_
android:orientatinotallow="vertical"
tools:cnotallow=".MainActivity" >
<TextView
android:layout_
android:layout_
android:text="请选择性别"
android:textSize="23dp"
/>
<RadioGroup
android:id="@+id/radioGroup"
android:layout_
android:layout_
android:orientatinotallow="horizontal">
<RadioButton
android:id="@+id/btnMan"
android:layout_
android:layout_
android:text="男"
android:checked="true"/>
<RadioButton
android:id="@+id/btnWoman"
android:layout_
android:layout_
android:text="女"/>
</RadioGroup>
<Button
android:id="@+id/btnpost"
android:layout_
android:layout_
android:text="提交"/>
</LinearLayout>

  • 获得选中的值：这里有两种方法

第一种是为RadioButton 设置一个事件监听器setOnCheckChangeListener

RadioGroup radgroup = (RadioGroup) findViewById(R.id.radioGroup);
//第一种获得单选按钮值的方法
//为radioGroup设置一个监听器:setOnCheckedChanged()
radgroup.setOnCheckedChangeListener(new OnCheckedChangeListener() 
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) 
RadioButton radbtn = (RadioButton) findViewById(checkedId);
Toast.makeText(getApplicationContext(), "按钮组值发生改变,你选
了" + radbtn.getText(), Toast.LENGTH_LONG).show();

);

PS：另外有一点要切记，要为每个RadioButton 添加一个id，不然单选功能不会生效！！！

第二种方法是通过单击其他按钮获取选中单选按钮的值，当然我们也可以直接获取，这个看需求~

Button btnchange = (Button) findViewById(R.id.btnpost);
RadioGroup radgroup = (RadioGroup) findViewById(R.id.radioGroup);
//为radioGroup设置一个监听器:setOnCheckedChanged()
btnchange.setOnClickListener(new OnClickListener() 
@Override
public void onClick(View v) 
for (int i = 0; i < radgroup.getChildCount(); i++) 
RadioButton rd = (RadioButton) radgroup.getChildAt(i);
if (rd.isChecked()) 
Toast.makeText(getApplicationContext(), "点击提交按
钮,获取你选择的是:" + rd.getText(), Toast.LENGTH_LONG).show();
break;



);

代码解析： 这里我们为提交按钮设置了一个setOnClickListener 事件监听器,每次点击的话遍历一次

RadioGroup判断哪个按钮被选中我们可以通过下述方法获得RadioButton的相关信息！

getChildCount( )获得按钮组中的单选按钮的数目；

getChinldAt(i):根据索引值获取我们的单选按钮

isChecked( ):判断按钮是否选中

4.6 开关按钮ToggleButton和开关Switch

1. ToggleButton

Android-UI

2. Switch

Android-UI

4.7 ProgressBar进度条

常用属性

android:max：进度条的最大值

android:progress：进度条已完成进度值

android:progressDrawable：设置轨道对应的Drawable对象

android:indeterminate：如果设置成true，则进度条不精确显示进度

android:indeterminateDrawable：设置不显示进度的进度条的Drawable对象

android:indeterminateDuration：设置不精确显示进度的持续时间

android:secondaryProgress：二级进度条，类似于视频播放的一条是当前播放进度，一条是

缓冲进度，前者通过progress属性进行设置！

对应的再Java中我们可调用下述方法：

getMax()：返回这个进度条的范围的上限

getProgress()：返回进度

getSecondaryProgress()：返回次要进度

incrementProgressBy(int diff)：指定增加的进度

isIndeterminate()：指示进度条是否在不确定模式下

setIndeterminate(boolean indeterminate)：设置不确定模式下



设置ProgressBar的样式，不同的样式会有不同的形状和模式：

Widget.ProgressBar.Horizontal

横向进度条（精确模式或模糊模式，这取决于Android:indeterminate）。

Widget.ProgressBar

中号的圆形进度条（模糊模式）。

Widget.ProgressBar.Small

小号的圆形进度条（模糊模式）。

Widget.ProgressBar.Large

大号的圆形进度条（模糊模式）。

Widget.ProgressBar.Inverse

中号的圆形进度条（模糊模式），该样式适用于亮色背景（例如白色）。

Widget.ProgressBar.Small.Inverse

小号的圆形进度条（模糊模式），该样式适用于亮色背景（例如白色）。

Widget.ProgressBar.Large.Inverse

Android-UI

4.8 SeekBar拖动条

android:max="100" //滑动条的最大值

android:progress="60" //滑动条的当前值

android:secondaryProgress="70" //二级滑动条的进度

android:thumb = "@mipmap/sb_icon" //滑块的drawable

接着要说下SeekBar的事件了，SeekBar.OnSeekBarChangeListener 我们只需重写三个对应的方法：

onProgressChanged：进度发生改变时会触发

onStartTrackingTouch：按住SeekBar时会触发

onStopTrackingTouch：放开SeekBar时触发

SeekBar定制

1.滑块状态Drawable：sb_thumb.xml

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

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

<item android:state_pressed="true"

android:drawable="@mipmap/seekbar_thumb_pressed"/>

<item android:state_pressed="false"

android:drawable="@mipmap/seekbar_thumb_normal"/>

</selector>

2.条形栏Bar的Drawable：sb_bar.xml

这里用到一个layer-list的drawable资源！其实就是层叠图片，依次是:背景，二级进度条，当前进度：

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

<layer-list

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

<item android:id="@android:id/background">

<shape>

<solid android:color="#FFFFD042" />

</shape>

</item>

<item android:id="@android:id/secondaryProgress">

<clip>

<shape>

<solid android:color="#FFFFFFFF" />

</shape>

</clip>

</item>

<item android:id="@android:id/progress">

<clip>

<shape>

<solid android:color="#FF96E85D" />

</shape>

</clip>

</item>

</layer-list>

3.然后布局引入SeekBar后，设置下progressDrawable与thumb即可

<SeekBar

android:id="@+id/sb_normal"

android:layout_

android:layout_

android:maxHeight="5.0dp"

android:minHeight="5.0dp"

android:progressDrawable="@drawable/sb_bar"

android:thumb="@drawable/sb_thumb"/>

4.9 ScrollView(滚动条)

我们可以直接利用ScrollView给我们提供的:fullScroll()方法：

scrollView.fullScroll(ScrollView.FOCUS_DOWN);滚动到底部

scrollView.fullScroll(ScrollView.FOCUS_UP);滚动到顶部



隐藏滑块:

android:scrollbars="none"

设置滚动速度:

继承ScrollView，然后重写一个 public void fling (int velocityY)的方法：

@Override

public void fling(int velocityY) 

super.fling(velocityY / 2); //速度变为原来的一半



tips: ScrollView控件中只能包含一个View或一个ViewGroup


public class ScrollViewActivity extends AppCompatActivity implements

View.OnClickListener 

private Button btn_down;

private Button btn_up;

private ScrollView scrollView;

private TextView txt_show;

@Override

public void onCreate(Bundle savedInstanceState) 

super.onCreate(savedInstanceState);

setContentView(R.layout.scrollview_layout);

bindViews();



private void bindViews() 

btn_down = (Button) findViewById(R.id.btn_down);

btn_up = (Button) findViewById(R.id.btn_up);

scrollView = (ScrollView) findViewById(R.id.scrollView);

txt_show = (TextView) findViewById(R.id.txt_show);

btn_down.setOnClickListener(this);

btn_up.setOnClickListener(this);

StringBuilder sb = new StringBuilder();

for (int i = 1; i <= 100; i++) 

sb.append("我是一条文本内容 * " + i + "\\n");



txt_show.setText(sb.toString());



@Override
public void onClick(View v) 

switch (v.getId()) 

case R.id.btn_down:

scrollView.fullScroll(ScrollView.FOCUS_DOWN);

break;

case R.id.btn_up:

scrollView.fullScroll(ScrollView.FOCUS_UP);

break;






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

<Button

android:id="@+id/btn_down"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="滚动到底部" />

<Button

android:id="@+id/btn_up"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="滚动到顶部" />

<ScrollView

android:id="@+id/scrollView"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1">

<TextView

android:id="@+id/txt_show"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="" />

</ScrollView>

</LinearLayout>

4.10 Date & Time组件

1. TextClock(文本时钟)

TextClock是在Android 4.2(API 17)后推出的用来替代DigitalClock的一个控件！

TextClock可以以字符串格式显示当前的日期和时间，因此推荐在Android 4.2以后使用

TextClock。

这个控件推荐在24进制的android系统中使用，TextClock提供了两种不同的格式， 一种是在24

进制中显示时间和日期，另一种是在12进制中显示时间和日期。大部分人喜欢默认的设置。


另外他给我们提供了下面这些方法，对应的还有get方法：

Attribute Name Related Method Description

android:format12Hour setFormat12Hour(CharSequence) 设置12时制的格式

android:format24Hour setFormat24Hour(CharSequence) 设置24时制的格式

android:timeZone setTimeZone(String) 设置时区


<TextClock

android:layout_width="wrap_content"

android:layout_height="wrap_
以上是关于Android-UI 基础知识04的主要内容，如果未能解决你的问题，请参考以下文章
 

 Android-UI组件合集面试资料分享


 目标检测——深度学习下的小目标检测（检测难的原因和Tricks）


 c#关于backgroundimage和imagelist的使用。图片大小怎么调节为啥我的一张图给我缩小了。怎么原图铺


 Android-UI Automator Viewer 的使用


 使用OpenCV对图像进行两种平移操作(图像的尺寸变化与图像的尺寸不变)


 帝国cms内容页调用缩略图的原始尺寸图片