首页 > 其他分享 >Android开发-Android UI与布局详解

Android开发-Android UI与布局详解

时间:2023-03-23 18:55:56浏览次数:43  
标签:layout px 布局 视图 详解 UI Android TextView

1.UI

  • UI  -  User Interface  -  用户界面  -  系统与用户信息交换的媒介
  • 软件设计 = 编码设计 + UI设计
  • Android UI = 布局 + 控件

2.布局layout

  • View:微件。用户可交互内容。常见的有TextView(文本框)、Button(按钮)等。
  • ViewGroup:布局。不可见容器。常见的有LinearLayout(线条布局)、ConstraintLayout(约束布局)等。
  • 布局与微件的视图层次结构示意图:(跟文件夹与文件差不多)

 

  • 布局的声明方式:

    文件 activity_main.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="300dp"
        android:layout_height="300dp"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
    ... /> 代表了创建一个微件View - 文本框(TextView),并在(...)部分设置了它的样式。

   接下来需要实例化这个View。在文件MainActivity.java中:

        ConstraintLayout constraintLayout = new ConstraintLayout(this);
        TextView view = new TextView(this);
        view.setText("Hello World");
        constraintLayout.addView(view);

 

  •  注意:
    •   每个布局文件有且只有一个根元素。并且必须是View或ViewGroup。
    •   根元素下可以添加子元素控件,逐步定义布局视图层次结构。
    •   声明布局后要以.xml形式保存在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);
            }

     

3.属性

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello,I am a TextView"
        android:textSize="24sp"/>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮"/>

 

4.ID

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello,I am a TextView"
        android:textSize="24sp"/>

 

//通过ID值创建视图对象实例
TextView textView = (TextView) findViewById(R.id.tv);

 5.布局参数

  • 布局参数LayoutParams:给视图设定在布局中的位置和大小。
  • 设置方式:
    •   xml:
    •     <TextView
              android:id="@+id/tv"
              android:layout_width="100dp"    //宽
              android:layout_height="200dp"    //高
              android:layout_marginLeft="10dp"    //左边距
              android:layout_marginTop="20dp"    //上边距
              android:text="Hello,I am a TextView"
              android:textSize="24sp"/>
    • java:
    •         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);
  • 获取布局位置
    •   视图:getLeft(),getTop()获取视图的坐标位置(相对于其父视图);getWidth(),getHeight()获取视图的尺寸。
  • 相对测量单位:
    •   wrap_content:指示视图将其大小调整为内容所需的尺寸(内容多大视图多大)
    •   match_parent:指示视图尽可能采用父视图组所允许的最大尺寸(父视图允许多大就多大)
    •     <TextView
              android:id="@+id/tv"
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:layout_marginLeft="10dp"
              android:layout_marginTop="20dp"
              android:text="Hello,I am a TextView"
              android:textSize="24sp"/>
  •  注意:在Android编程中描述尺寸大小尽量用dp,或wrap_content、match_parent而非px。
    •   px:像素,1px指屏幕上一个物理像素点。
    •   dp:设备无关像素。与像素密度有关。
    • 密度类型

      代表的分辨率

      px

      屏幕密度

      dpi

      换算

      px/dp

      比例

      低密度(ldpi)

      240x320

      120

      1dp=0.75px

      3

      中密度(mdpi)

      320x480

      160

      1dp=1px

      4

      高密度(hdpi)

      480x800

      240

      1dp=1.5px

      6

      超高密度(xhdpi)

      720x1280

      320

      1dp=2px

      8

      超超高密度

      (xxhdpi)

       

      1080x1920

       

      480

       

      1dp=3px

       

      12

 6.内边距与外边距

<?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:background="#ffc"    //浅黄色背景
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="300dp"    //红宽
        android:layout_height="300dp"    //红高
        android:layout_marginLeft="40dp"    //外左边距
        android:layout_marginTop="40dp"    //外上边距
        android:background="#DD001B"    //红色
        android:paddingLeft="40dp"    //内左边距
        android:paddingTop="40dp">    //内上边距

        <View
            android:layout_width="180dp"    //绿宽
            android:layout_height="180dp"    //绿高
            android:background="#139948"/>    //绿色
    </LinearLayout>

</LinearLayout>

 

 

外边距 内边距
layout_margin 外边距 padding 内边距
layout_marginTop 外上边距 paddingTop 内上边距
layout_marginBottom 外下边距 paddingBottom 内下边距
layout_marginLeft 外左边距 paddingLeft 内左边距
layout_marginRight 外右边距 paddingRight 内右边距

 

 

 

         

标签:layout,px,布局,视图,详解,UI,Android,TextView
From: https://www.cnblogs.com/lysboke/p/17248520.html

相关文章

  • 从零开始搞一个androidApp,实现h5自动更新、jsbridge
    准备window电脑javajdk(包含了javajre)下载安装androidsdk下载安装androidstudio下载安装gradle下载一台带sim卡的android手机nodejs下载安装 npminstall-g......
  • CSS详解
    CascadingStyleSheets层叠样式表HTML+CSS+JavaScript框架+表现+交互一、初始及入门1.CSS概念CSS在网页中的应用CSS的发展史CSS的优势2.CSS基本语法标签style3.......
  • .net core 关于对swagger的UI(Index.html)或接口的权限验证;
    背景:如何在ASP.NetCore的生产环境中保护swaggerui,也就是index.html页面。其实swagger是自带禁用的功能的,只需要设置开关即可。但是有一些场景,是需要把这些接口进行开放......
  • Android 打包分析
    问题:makeproject项目生成的apk大小在15M左右run到设备里的apk大小在5M左右  通过解包分析,主要差异在lib文件夹下15M的包   5M的包   如需控......
  • ESD二极管工作原理、封装、型号、选型(详解)
    常用静电防护保护器件——ESD二极管,对于电子工程师而言,并不陌生。在消费电子、家电、智能家居、可穿戴智能设备、汽车电子、安防、工业设备等产品领域中都能看到ESD二极管靓......
  • layui的select下拉反填
    //获取select,val中是要选择哪一项的value$("select[name=endcommand]").val(endcommand);//form句柄_form.render(); ......
  • Quicker快速开发,简单的网页数据爬取(示例,获取天眼查指定公司基础工商数据)
    前言有某个线上项目,没有接入工商接口,每次录入公司的时候,都要去天眼查、企查查或者其他公开数据平台,然后手动录入,一两个还好说,数量多了的重复操作就很烦,而且,部分数据是包含......
  • Mysql常用语法详解
    一、数据库创建数据库createdatabase数据库名;查询所有数据库showdatabases;查看正在创建的数据库信息showcreatedatabase数据库名;删除数据库dropdatabas......
  • Android 使用ListView只显示一条数据
    情况一:ListView外嵌套了ScrollView导致情况二:没有使用ScrollView解决:动态获取ListView的高度,并用代码设置。在adapter中setAdapter之后调用以下方法即可。 setListVi......
  • SpringBoot详解
    一、介绍1.SpringBoot是一个基于Spring框架的开源框架,用于构建微服务和Web应用程序。它可以帮助开发者轻松创建独立的、基于Spring的应用程序,并在较短的时间内完......