UI设计界面与控制

最新推荐文章于 2025-07-09 20:35:45 发布

转载最新推荐文章于 2025-07-09 20:35:45 发布 · 514 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.bilibili.com/video/BV1jW411375J?p=13

标签

#1024程序员节 #android #java #移动开发 #安卓

本文介绍了Android用户界面（UI）设计的基础，包括View和ViewGroup的概念及使用。View是用户界面的基本元素，如TextView，可以通过android:id、android:background和android:padding属性进行定制。ViewGroup如RelativeLayout则是用来组织和布局多个View，通过android:layout_width、android:layout_height和MarginLayoutParams调整元素的位置和大小。推荐使用XML布局文件来控制UI界面，并展示了如何在Java代码中加载XML布局。同时，文章也提及了在Java代码中直接控制UI的可能性。

UI：是指用户界面设计与控制

一、View
view是很直观的，人们可以直接看到
一个界面中可以有多个view
在这里插入图片描述
view类位于android.view包中；
view类的子类一般都位于Android.widget包中；

调用view：android.view.View
调用文本view：android.widget.TextView

打开API帮助文档：在sdk路径的docs路径中找到index.html
在这里插入图片描述
Android：id属性

android:id="@+id/button"

Android：background属性

android:background="@mipmap/bg"   # bg是图片资源名称
android:background="#FF6600"  # 设置颜色

Android：padding属性-----内边距

# 设置等边距
android:padding="16dp"  # 设置内边距为16

android:padding="@dimen/activity_margin"  # 使用这个方法设置尺寸资源前，需要先定义一个尺寸资源

在这里插入图片描述
设置边距不等语句关键词

二、ViewGroup
控制view怎么摆放，继承View类，是一个抽象类，常使用其子类

ViewGroup.LayoutParams类

# 设置具体数值
android:layout_height="100dp"  # 设置布局高度
android:layout_width="100dp"  # 设置布局宽度

不设置具体数值：使用提供的参数
在这里插入图片描述

ViewGroup.MarginLayoutParams类外边距
使用参数如下图所示：

在这里插入图片描述

Android UI组件的层次结构
在这里插入图片描述
三、控制UI界面

使用XML布局文件控制UI界面（推荐）

在Android应用的app 》 src 》 main 》 res 》layout 目录下编写
注意文件名不能以数字、字母、下划线开头，也不能是Java关键字。
例如：activity_hello_world.xml文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_hello_world"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hahaha.helloworld.HelloWorldActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

在activity中使用以下Java代码显示XML文件中布局内容。
例如：
app 》 src 》 main 》 Java 》 HelloWorldActivity.java

setContentView(R.layout.activity_hello_world);

在Java代码中控制UI界面
使用XML和Java代码混合控制UI界面
开发自定义的View