【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手

简介: 本文介绍了Android Studio中使用ConstraintLayout布局的方法,通过创建布局文件、设置控件约束等步骤,快速上手UI设计,并提供了一个TV Launcher界面布局的绘制示例。

一、前言

在进行Android APP开发过程中,减少layout嵌套即可改善UI的绘制性能;而ConstraintLayout 布局的出现,直接将Layout扁平化,并且得到了UI绘制工具的很好支持,本文即介绍其用法和注意事项,看完这一篇,即可掌握使用Android的UI工具,绘制APP的方法。

大家可以参考本文末尾的布局,自己练练,看看是不是一下子就掌握了呢?哈哈

作为一个捣鼓BSP的系统开发人员,偶尔也需要弄个APP,所以呢,不得已,搞了一把,在此分享给大家。

二、绘制效果

  • 先给大家看下最终的绘制效果
  • 本文demo的是一个TV Launcher界面的布局绘制
  • 特点:大屏幕、横屏模式,分辨率1920x1080

TV Launcher demo 布局

三、ConstraintLayout 使用方法

3.1 创建布局文件

  • 可随意创建一个布局文件
  • 再创建一个MainActivity来使用这个布局
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.XLauncher">

        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

3.2 替换配置

  • 按如下格式修改
<?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">  备注:此处必须捆绑一个Activity

    <Button
        android:id="@+id/button2"
        android:layout_width="146dp"
        android:layout_height="45dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="16dp"
        android:text="Button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

3.3 设置约束,步骤1

  • 任何一个控件,只需要给出一个一个(x, y)的定位约束,即可

在这里插入图片描述

3.4 设置约束,步骤2

  • 此处是步骤2,也是第一次2种方法,可以将控件约束到已经固定好的控件上
  • 同样只需要固定一个x,y组合即可
    在这里插入图片描述

3.5 其他设置

不用多说了,没有其他了,掌握上面2个就可以开始了,剩余的各位一用即懂了。

四、结束

  • 各位也可参考本文布局,自己试试,是不是一下子,就掌握了~HOHO
    在这里插入图片描述
相关文章
|
16天前
|
移动开发 监控 前端开发
构建高效Android应用:从优化布局到提升性能
【7月更文挑战第60天】在移动开发领域,一个流畅且响应迅速的应用程序是用户留存的关键。针对Android平台,开发者面临的挑战包括多样化的设备兼容性和性能优化。本文将深入探讨如何通过改进布局设计、内存管理和多线程处理来构建高效的Android应用。我们将剖析布局优化的细节,并讨论最新的Android性能提升策略,以帮助开发者创建更快速、更流畅的用户体验。
43 10
|
16天前
|
存储 搜索推荐 Java
探索安卓开发中的自定义视图:打造个性化UI组件Java中的异常处理:从基础到高级
【8月更文挑战第29天】在安卓应用的海洋中,一个独特的用户界面(UI)能让应用脱颖而出。自定义视图是实现这一目标的强大工具。本文将通过一个简单的自定义计数器视图示例,展示如何从零开始创建一个具有独特风格和功能的安卓UI组件,并讨论在此过程中涉及的设计原则、性能优化和兼容性问题。准备好让你的应用与众不同了吗?让我们开始吧!
|
24天前
|
API Android开发
Android项目架构设计问题之选择和使用合适的UI库如何解决
Android项目架构设计问题之选择和使用合适的UI库如何解决
38 0
|
14天前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
30 0
|
30天前
|
XML 数据可视化 API
Android经典实战之约束布局ConstraintLayout的实用技巧和经验
ConstraintLayout是Android中一款强大的布局管理器,它通过视图间的约束轻松创建复杂灵活的界面。相较于传统布局,它提供更高灵活性与性能。基本用法涉及XML定义约束,如视图与父布局对齐。此外,它支持百分比尺寸、偏移量控制等高级功能,并配有ConstraintSet和编辑器辅助设计。合理运用可显著提高布局效率及性能。
77 0
|
Android开发
《Android UI基础教程》——导读
本节书摘来自异步社区《Android UI基础教程》一书中的目录,作者 【美】Jason Ostrander,更多章节内容可以访问云栖社区“异步社区”公众号查看
787 0