Android UI 编程 | 青训营笔记

BIGBOSSyifi
112 阅读8分钟

这是我参与「第四届青训营 」笔记创作活动的的第3天

前言

今天学习到的是Android的UI编程，这是Android的前端样式的开发，是Android课程比较重要的一点，因为在大二的时候学过一点，对本章的学习有一定的基础，但是进入入学习的时候发现了很多的知识点不足，正好借此查漏补缺，在本节课的中，一边学习一边上手敲了很多代码案例进行了巩固，对本节课内容有了较深的掌握。

对之前模仿天气APP的一个项目进行了UI优化 由于本项目没有引用使用布局约束组件，所以在不同的dpi下布局表现不同.....

截屏2022-07-25 13.06.19.png

本节课知识点大纲：

1. Android UI组件

2. Android UI布局

一、Android UI组件：

Android UI的定义

  • UI：User Interface
  • Android系统是图形用户界面操作系统
  • UI界面由多个不同功能的UI组件构成
  • Android SDK提供了大量的UI组件

如图所示： 本人手机UI界面：（Samsung Galaxy Noet9——OneUI2.5）

image.png

本人仿写备忘录APP的UI

image.png

二、UI组件：

常规UI组件大多由Android Framework中的android.widget这个package提供

image.png

三、基础UI-（附代码案例）

1. 文本框 TextView

代码如下：

截屏2022-07-25 12.26.46.png

2. 输入框 EidtText

截屏2022-07-25 12.27.29.png

3. 按钮 Button

前端样式：

截屏2022-07-25 12.29.05.png

.class调用：

public class MyActivity extends Activity {
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.content_layout_id);

      final Button button = findViewById(R.id.button_id);
      button.setOnClickListener(new View.OnClickListener() {
          public void onClick(View v) {
              // Code here executes on main thread after user presses button
          }
      });
  }

}

4. 图片按钮 ImageButton

截屏2022-07-25 12.31.10.png

5. 单选框 RadioButton

前端样式：

截屏2022-07-25 12.32.34.png

后端调用：

public void onRadioButtonClicked(View view) {
    // Is the button now checked?
    boolean checked = ((RadioButton) view).isChecked();
    // Check which radio button was clicked
    switch(view.getId()) {
        case R.id.radio_pirates:
            if (checked)
            // Pirates are the best
               break;
            case R.id.radio_ninjas:
            if (checked)
            // Ninjas rule
                break;
}

三、布局

LinearLayout

线性布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" > 

</LinearLayout>

RelativeLayout

相对布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"    
    android:layout_height="match_parent"
    android:paddingLeft="16dp"    
    android:paddingRight="16dp" >

</RelativeLayout>

FrameLayout

FrameLayout示例

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:gravity="center"
        android:background="@android:color/holo_blue_bright"
        android:text="我是第一层"/>

    <TextView
        android:layout_width="150dp"
        android:layout_height="140dp"
        android:gravity="center"
        android:background="@android:color/holo_green_light"
        android:text="我是第二层"/>

</FrameLayout>

ConstraintLayout

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.constraint.ConstraintLayout>

3.2.5 布局总结

四、课后个人总结：

  • 本章较难知识点：

1.Android UI组件

  1. 文本框 TextView
  2. 输入框 EidtText
  3. 按钮 Button
  4. 图片按钮 ImageButton
  5. 单选框 RadioButton
  6. 多选框 CheckBox
  7. 计时器 Chronometer
  8. Toast

2.Android UI布局

  1. LinearLayout （线性布局）
  2. RelativeLayout（相对布局）
  3. FrameLayout（帧布局）
  4. TableLayout（表格布局）
  5. GridLayout 网格布局
  6. AbsoluteLayout（绝对布局）

五、知识点补充：

LinearLayout （线性布局）

LinearLayout是一种线型的布局方式。LinearLayout布局容器内的组件一个挨着一个地排列起来：不仅可以控制个组件横向排列，也可控制各组件纵向排列。

android:orientation 属性指定了排列方向是 vertical，如果指定的是horizontal，控件就会在水平方向上排列了。

android:gravity 是用 于指定文字在控件中的对齐方式 android:layout_gravity 是用于指定控件在布局中的对齐 方式 RelativeLayout 相对布局 android:layout_weight=“1”（权重分布），这个weight在垂直布局时，代表行距；水平的时候代表列宽；weight值越大就越大。

android:visibility=invisible控制布局是否显示 ：1、显示 visible 2、不显示，但占空间 invisible 隐藏 gone

RelativeLayout（相对布局）

是一种相对布局，控件的位置是按照相对位置来计算的，后一个控件在什么位置依赖于前一个控件的基本位置，是布局最常用，也是最灵活的一种布局。 分类方式一

a）、第一类:属性值为true或false

  • 　　android:layout_centerHrizontal 水平居中
  • 　　android:layout_centerVertical 垂直居中
  • 　　android:layout_centerInparent 相对于父元素完全居中
  • 　　android:layout_alignParentBottom 贴紧父元素的下边缘
  • 　　android:layout_alignParentLeft 贴紧父元素的左边缘
  • 　　android:layout_alignParentRight 贴紧父元素的右边缘
  • 　　android:layout_alignParentTop 贴紧父元素的上边缘　

b）、第二类：属性值必须为id的引用名“@id/id-name”

  • 　　android:layout_below 在某元素的下方
  • 　　android:layout_above 在某元素的的上方
  • 　　android:layout_toLeftOf 在某元素的左边
  • 　　android:layout_toRightOf 在某元素的右边
  • 　　android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
  • 　　android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
  • 　　android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
  • 　　android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐

c）、第三类：属性值为具体的像素值，如30dip，40px

  • 　　android:layout_marginBottom 离某元素底边缘的距离
  • 　　android:layout_marginLeft 离某元素左边缘的距离
  • 　　android:layout_marginRight 离某元素右边缘的距离
  • 　　android:layout_marginTop 离某元素上边缘的距离 　　 分类方式二
  • 　　android:layout_marginTop=“25dip” //顶部距离
  • 　　android:gravity=“left” //空间布局位置
  • 　　android:layout_marginLeft="15dip //距离左边距

相对于给定ID控件

  • 　　android:layout_above 将该控件的底部置于给定ID的控件之上;
  • 　　android:layout_below 将该控件的底部置于给定ID的控件之下;
  • 　　android:layout_toLeftOf 将该控件的右边缘与给定ID的控件左边缘对齐;
  • 　　android:layout_toRightOf 将该控件的左边缘与给定ID的控件右边缘对齐;
  • 　　android:layout_alignBaseline 将该控件的baseline与给定ID的baseline对齐;
  • 　　android:layout_alignTop 将该控件的顶部边缘与给定ID的顶部边缘对齐;
  • 　　android:layout_alignBottom 将该控件的底部边缘与给定ID的底部边缘对齐;
  • 　　android:layout_alignLeft 将该控件的左边缘与给定ID的左边缘对齐;
  • 　　android:layout_alignRight 将该控件的右边缘与给定ID的右边缘对齐;

相对于父组件

  • 　　android:layout_alignParentTop 如果为true,将该控件的顶部与其父控件的顶部对齐;
  • 　　android:layout_alignParentBottom 如果为true,将该控件的底部与其父控件的底部对齐;
  • 　　android:layout_alignParentLeft 如果为true,将该控件的左部与其父控件的左部对齐;
  • 　　android:layout_alignParentRight 如果为true,将该控件的右部与其父控件的右部对齐;

居中

  • 　　android:layout_centerHorizontal 如果为true,将该控件的置于水平居中;
  • 　　android:layout_centerVertical 如果为true,将该控件的置于垂直居中;
  • 　　android:layout_centerInParent 如果为true,将该控件的置于父控件的中央;

指定移动像素

  • 　　android:layout_marginTop 上偏移的值;

  • 　　android:layout_marginBottom 下偏移的值;

  • 　　android:layout_marginLeft 　　左偏移的值;

  • 　　android:layout_marginRight 　 右偏移的值; 　　 基本属性

  • 　　android:id — 为控件指定相应的ID

  • 　　android:text — 指定控件当中显示的文字，需要注意的是，这里尽量使用strings.xml文件当中的字符串

  • 　　android:grivity — 指定控件的基本位置，比如说居中，居右等位置这里指的是控件中的文本位置并不是 控件本身

  • 　　android:textSize — 指定控件当中字体的大小

  • 　　android:background — 指定该控件所使用的背景色，RGB命名法

  • 　　android:width — 指定控件的宽度

  • 　　android:height — 指定控件的高度

  • 　　android:padding* — 指定控件的内边距，也就是说控件当中的内容

  • 　　android:sigleLine — 如果设置为真的话，则控件的内容在同一行中进行显示

FrameLayout（帧布局）

FrameLayout对象好比一块在屏幕上提前预定好的空白区域，可以将一些元素填充在里面，如图片。所有元素都被放置在FrameLayout区域的最左上区域，而且无法为这些元素制指定一个确切的位置，若有多个元素，那么后面的元素会重叠显示在前一个元素上。

TableLayout（表格布局）

TableLayout是指将子元素的位置分配到行或列中。Android的一个TableLayout有许多TableRow组成，每一个TableRow都会定义一个Row。TableLayout容器不会显示Row，Column，及Cell的边框线，每个Row拥有0个或多个Cell，每个Cell拥有一个View对象。在使用tablelayout时，应注意每一个cell的宽度。 （1）TableLayout行列数的确定

TableLayout的行数由开发人员直接指定，即有多少个TableRow对象（或View控件），就有多少行 TableLayout的列数等于含有最多子控件的TableRow的列数。如第一TableRow含2个子控件，第二个TableRow含3个，第三个TableRow含4个，那么该TableLayout的列数为4. （2）TableLayout可设置的属性详解

TableLayout可设置的属性包括全局属性及单元格属性。 全局属性也即列属性，有以下3个参数：

  • 　　android:stretchColumns 设置可伸展的列。该列可以向行方向伸展，最多可占据一整行。
  • 　　android:shrinkColumns 设置可收缩的列。当该列子控件的内容太多，已经挤满所在行，那么该子控件的内容将往列方向显示。
  • 　　android:collapseColumns 设置要隐藏的列。 示例：
  • 　　android:stretchColumns=“0” 第0列可伸展
  • 　　android:shrinkColumns=“1,2” 第1,2列皆可收缩
  • 　　android:collapseColumns="*" 隐藏所有行

GridLayout 网格布局

GridLayout布局使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。而GridLayout使用的其实是跟LinearLayout类似的API，只不过是修改了一下相关的标签而已，所以对于开发者来说，掌握GridLayout还是很容易的事情。GridLayout的布局策略简单分为以下三个部分： 首先它与LinearLayout布局一样，也分为水平和垂直两种方式，默认是水平布局，一个控件挨着一个控件从左到右依次排列，但是通过指定Android:columnCount设置列数的属性后，控件会自动换行进行排列。另一方面，对于GridLayout布局中的子控件，默认按照wrap_content的方式设置其显示，这只需要在GridLayout布局中显式声明即可。

AbsoluteLayout

android:layout_x 指定控件在父布局的x轴坐标 android:layout_y 指定控件在父布局的 y轴坐标 AbsoluteLayout（绝对布局）

绝对布局极少使用，在不是绝对要使用的情况下就绝对不要用

六、引用参考：

avatar
文章
阅读
粉丝