Android 构建UI

在一个Android应用中,Layout是开发中的一个很重要环节,Layout是组成UI不可缺少的一部分。

## Android UI 核心类

在Android应用构建UI的方法有以下几种:
  1. 单纯使用JAVA代码
  2. 使用XML完全定义界面
  3. 结合使用两者,在XML中定义,在JAVA中引用和修改
    Android SDK中关于UI的核心类:

    Android.view.View和android.view.ViewGroup

    android中的常见UI控件均会扩展View和ViewGroup其中有一部分是专门用来控制其子View位置和大小,这些类我们称为布局管理器。

    ViewGroup

    1.LayoutParams是ViewGroup内部类,包含了ViewGroup的布局参数,用来告诉它们的父类它们想怎么在父类中布局(大小和位置),所有在LayoutParams及其子类中定义的布局参数在xml中定义都是通过layout_***定义的。

    LayoutParams只提供了两个参数设定:

    layout_width  元素的高度(fill_parent | match_parent | wrap_content | *dip)
    layout_height 元素的宽度(同上)
    

    2.MarginLayoutParams也是ViewGroup一个内部类,它继承了LayoutParams类,用来扩展LayoutParams的属性,设置参数。

    MarginLayoutParams添加了四个参数设定:

    layout_marginLeft       相对于本元素左边界的偏移
    layout_marginRight      相对于本元素右边界的偏移
    layout_marginTop,       相对于本元素上边界的偏移
    layout_marginBottom     相对于本元素下边界的偏移
    

    以上的两种Layout参数,所有布局中的子ViewGroup和子View都可以使用

    下面讲述5种布局:

    ## 1.Linear Layout (线性布局)

    线性布局是Android布局中最简单的布局,也是最常用,最实用的布局。

    android:orientation线形布局的对齐方式 : vertical(垂直) 和 horizontal(水平)

    LayoutParams中的特殊参数:

    layout_weight  权值
    layout_gravity 相对于父元素的重力值(默认top|left):
    (top|bottom|left|right|center_vertical|fill_vertical |center_ horizontal
    |fill_ horizontal | center| fill)
    
    LinearLayout有两个非常相似的属性:
    android:gravity
    android:layout_gravity
    

    他们的区别在于:

    • android:gravity属性是对该view中内容的限定.比如一个button 上面的text. 你可以设置该text相对于view的靠左,靠右等位置.
    • android:layout_gravity是用来设置该view相对与父view的位置.比如一个button在linearlayout里,你想把该button放在linearlayout里靠左、靠右等位置就可以通过该属性设置.

      android:gravity用于设置View中内容相对于View组件的对齐方式,而android:layout_gravity用于设置View组件相对于Container的对齐方式。

      原理跟android:paddingLeft、android:layout_marginLeft有点类似。如果在按钮上同时设置这两个属性。

      android:paddingLeft="30px"  按钮上设置的内容离按钮左边边界30个像素
      android:layout_marginLeft="30px"  整个按钮离左边设置的内容30个像素
      

      下面回到正题, 我们可以通过设置android:gravity=”center”来让EditText中的文字在EditText组件中居中显示;

      同时我们设置EditText的android:layout_gravity=”right”来让EditText组件在LinearLayout中居右显示。看下效果:

      
      
      

      ## 2.Relative Layout (相对布局)

      RelativeLayout允许子元素指定他们相对于其它元素或父元素的位置(通过ID 指定)。因此,你可以以右对齐,或上下,或置于屏幕中央的形式来 排列两个元素。元素按顺序排列,因此如果第一个元素在屏幕的中央,那么相对于这个元素的其它元素将以屏幕中央的相对位置来排列。如果使用XML 来指定这个 layout ,在你定义它之前,被关联的元素必须定义。

      这个布局是最灵活的布局,因此复杂的布局我们多用这个布局。

      LayoutParams中特殊的参数 :
      <1>. 属性值为true或false
      android:layout_centerHrizontal            水平居中
      android:layout_centerVertical             垂直居中
      android:layout_centerInparent             相对于父元素完全居中
      android:layout_alignParentBottom          贴紧父元素的下边缘
      android:layout_alignParentLeft            贴紧父元素的左边缘
      android:layout_alignParentRight           贴紧父元素的右边缘
      android:layout_alignParentTop             贴紧父元素的上边缘
      android:layout_alignWithParentIfMissing   若找不到兄弟元素以父元素做参照物
      
      <2>. 属性值必须为id的引用名”@id/id-name”
      android:layout_below               在某元素的下方
      android:layout_above               在某元素的上方
      android:layout_toLeftOf            在某元素的左边
      android:layout_toRightOf           在某元素的右边
      android:layout_alignBaseLine       该控件的baseline和给定ID的控件的Baseline对齐
      android:layout_alignTop            本元素的上边缘和某元素的的上边缘对齐
      android:layout_alignLeft           本元素的左边缘和某元素的的左边缘对齐
      android:layout_alignBottom         本元素的下边缘和某元素的的下边缘对齐
      android:layout_alignRight          本元素的右边缘和某元素的的右边缘对齐
      
      <3>. 属性值为具体的像素值,如30dip,40px
      android:layout_marginBottom        离某元素底边缘的距离
      android:layout_marginLeft          离某元素左边缘的距离
      android:layout_marginRight         离某元素右边缘的距离
      android:layout_marginTop           离某元素上边缘的距离
      

      3.TableLayout (表格布局)



      TableLayout 将子元素的位置分配到行或列中。一个TableLayout 由许多的TableRow 组成,每个TableRow 都会定义一个 row(事实上,你可以定义其它的子对象)。

      TableLayout 容器不会显示row 、cloumns 或cell 的边框线。每个row拥有0个或多个的cell;每个cell 拥有一个View对象。

      表格由列和行组成许多的单元格。表格允许单元格为空。单元格不能跨列,这与HTML 中的不一样。

      特殊的参数:

      android:stretchColumns  伸展的列的索引
      android:shrinkColumns   收缩的列的索引
      android:collapseColumns 倒塌的列的索引(即销毁)
      

      表示两行两列的一个表格。 android:gravity=”center”书面解释是权重比。其实就是让它居中显示。

      它还可以动态添加里面的每行每列。如下代码所示:

      TableLayout tableLayout = (TableLayout) findViewById(R.id.table01);
      TableRow tableRow = new TableRow(this);
      TextView temp = new TextView(this);
      temp.setText("text的值");
      tableRow.addView(temp);
      

      android:stretchColumns=”1,2,3,4″ 它的意思就是自动拉伸1,2,3,4列。

      ## 4.AbsoluteLayout (绝对布局)

      AbsoluteLayout可以让子元素指定准确的x/y坐标值,并显示在屏幕上。(0, 0)为左上角,当向下或向右移动时,坐标值将变大。

      AbsoluteLayout没有页边框,允许元素之间互相重叠(尽管不推荐)。我们通常不推荐使用

      AbsoluteLayout,除非你有正当理由要使用它,因为它使界面代码太过刚性,以至于在不同的设备上可能不能很好地工作。

      LayoutParams中特殊的参数 :

      layout_x   x方向的坐标
      layout_y   y方向的坐标
      

      ## 5.FrameLayout ( 帧布局 )

      FrameLayout是最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域,之后你可以在其中填充一个单一对象。比如,一张你要发布的图片。所有的子元素将会固定在屏幕的左上角;你不能为FrameLayout中的一个子元素指定一个位置。后一个子元素将会直接在前 一个子元素之上进行覆盖填充,把它们部份或全部挡住(除非后一个子元素是透明的)。

      里面可以放多个控件,不过控件的位置都是相对位置

      LayoutParams中特殊的参数 :

      layout_gravity 相对于父元素的重力值(用法同LinearLayout)

      注意事项:

      1. 各布局不要乱用各自的属性。比如把属于AbsoluteLayout布局的android:layout_x和android:layout_y用到LinearLayout布局或RelativeLayout布局,或者把RelativeLayout布局的 below,rightof等属性应用到其他布局中。这样做虽然不会报错,但是根本达不到我们需要的效果。
      2. 关于android:layout_width=”fill_parent”和android:layout_height=”wrap_content” ,这是对每个布局宽和高的设置。wrap_content可表示随着其中控件的不同而改变这个布局的宽度或高度,类似于自动设置宽和高,fill_parent使布局填充整个屏幕,另外还有一种match_parent,它本质上和 fill_parent 一样,并从API Level8开始替代fill_parent。
时间: 2024-08-13 02:47:44

Android 构建UI的相关文章

Android进阶——构建UI布局的多种方式总结

引言 作为Android App,给人第一印象的就是用户界面(UI),简洁友好的UI,自然会给用户优秀的体验,自然很容易就得到用户的认可和赞许,这样App才变得真正的有价值.所以作为开发App的第一步,UI尤为重要,构建UI有很多种方式:xml静态布局.java动态代码.HTML构建(借助WebView)和第三方开源框架等. 一.构成UI的基本元素--View和ViewGroup概述 在Android中绝大部分的UI组件都是存放在android.widget包及其子包.android.view包

Android入门——构建UI布局的多种方式

引言 作为Android App,给人第一印象的就是用户界面(UI),简洁友好的UI,自然会给用户优秀的体验,自然很容易就得到用户的认可和赞许,这样App才变得真正的有价值.所以作为开发App的第一步,UI尤为重要,构建UI有很多种方式:xml静态布局.java动态代码.HTML构建(借助WebView)和第三方开源框架等. 一.构成UI的基本元素--View和ViewGroup概述 在Android中绝大部分的UI组件都是存放在android.widget包及其子包.android.view包

看大家android界面设计是拿Android Design UI Kit设计的,不直接在eclipse里设计,但是UI KIT怎么用呢

============问题描述============ Android 4.4 Design UI Kit (Nexus 4 version)打开十psd格式的,看网上说吧psd里面自己需要用到的东西保存为png格式,然后是要把png格式的图片当做android控件的背景使用? 其他类似的工具呢? ============解决方案1============ 一切不问是不是就问为什么的都是耍流氓,不知道你是怎么得出"android界面设计是拿Android Design UI Kit设计的,不直

Android界面编程——Android高级UI组件(三)

Android界面编程 Android高级UI组件 2.4.1适配器组件 适配器的作用 适配器充当适配器控件和该视图数据之间的桥梁.适配器提供访问的数据项,并负责产生数据组中的每个项的视图. 常用的适配器 BaseAdapter:抽象类,具有较高的灵活性. ArrayAdapter:最为简单,智能展示一行文字. SimpleAdapter:有较好的扩充性,可以自定义出各种效果. SimpleCursorAdapter:主要用于操作数据库. 常用的适配器控制 适配器控件扩展自ViewAdapter

Android中UI线程与后台线程交互设计的5种方法

我想关于这个话题已经有很多前辈讨论过了.今天算是一次学习总结吧. 在android的设计思想中,为了确保用户顺滑的操作体验.一 些耗时的任务不能够在UI线程中运行,像访问网络就属于这类任务.因此我们必须要重新开启一个后台线程运行这些任务.然而,往往这些任务最终又会直接或者 间接的需要访问和控制UI控件.例如访问网络获取数据,然后需要将这些数据处理显示出来.就出现了上面所说的情况.原本这是在正常不过的现象了,但是 android规定除了UI线程外,其他线程都不可以对那些UI控件访问和操控.为了解决

Android之UI View与ViewGroup

1.基本概念 View:所有可视化控件的父类,Android App屏幕上用户可以交互的对象(例如 按钮 下拉框 文本框等). ViewGroup:View的子类,存放View和ViewGroup对象的布局容器(线性布局.相对布局等). 简单理解,view就是各种控件(按钮.文本),而ViewGroup提供各种布局模式. App中任一组件都是使用View和ViewGroup对象组成的层次结构.如下图,viewgroup用于所属的view对象组织布局模式,每个view代表输入控件或者UI部件. 2

《Android构建MVVM》系列(一) 之 MVVM架构快速入门

前言 本文属于<Android构建MVVM>系列开篇,共六个篇章,详见目录树. 该系列文章旨在为Android的开发者入门MVVM架构,掌握其基本开发模式. 辅以讲解Android Architecture Components,使得更好的实现MVVM架构. 目录树 <Android构建MVVM>系列(一) 之 MVVM架构快速入门 前言 分层思想 什么是MVC/MVP? MVVM是什么,与MVC/MVP有何区别? Android Architecture Components(架

Android开发UI新技能,你get这个新技能了吗?(附源码详解)

Jetpack Compose是什么? Jetpack Compose 是安卓用于构建UI的一种新方式,采用代码而非xml文件方式,写法与Flutter非常相似.官方主页:https://developer.android.google.cn/jetpack/compose官方Demo:https://github.com/android/compose-samples/tree/master/JetNews官方入门指导: https://developer.android.google.cn/

android自定义UI模板图文详解

不知道大家在实际开发中有没有自定义过UI模板?今天花时间研究了一下android中自定义UI模板,与大家分享一下. 每个设计良好的App都是自定义标题栏,在自定义标题栏的过程中大部分人可能都是自定义一个标题的xml文件,然后在需要的地方直接通过include来引用,这比起在每个布局文件中写标题栏已经进化很多了,但仍然不是最简单有效的方法,我们为什么不能自定义一个标题控件呢?今天就带大家自己做一个标题栏控件.效果图如下: 开始啦: 第一步:自定义xml属性 新建一个android项目,在value