Android 第七课——UI布局

Android布局分为:线性布局、相对布局、表格布局、帧布局、网格布局五种

布局中的距离单位:dp、px、sp。

布局继承关系图:

1)熟悉几个常用属性


<Button android:id="@+id/loginName"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/login"/>

1)android:id="@+id/loginName"  为组件自定义一个ID,便于在程序中通过映射R文件查找:R.id.loginName ;
2)android:layout_width 与 android:layout_height 设置组件的宽与高,只有三个值,分别是:
match_parent:充满父容器,新版本中使用,推荐使用这个属性值
fill_parent:充满父容器,老版本中使用
wrap_content:包裹文字,根据文字的大小来设定组件的大小
3)android:text="@string/login" 从常量中获取对应的引用值

2)LinearLayout 线性布局

线性布局即LinearLayout 布局,是Android屏幕中常用的布局方式,是一个ViewGroup以线性方向显示它的子视图(View)元素,即垂直或水平。关于组件,大部分都是View的子类,所以很多情况下可以把组件称之为视图。


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="horizontal"  >

-------------------

</LinearLayout>


1)android:orientation 确定布局为垂直还是水平

horizontal : 水平

vertical:垂直

2)layout_weight(权重) 指定该元素在LinearLayout(父容器)中所占的权重, 这个属性简单理解就是自身的权重除以所有组件权重之和的值就是在父组件中所占的比例(宽或者高)。当然,实际情况还有很多种情况,不能一概而论。

3)android:layout_gravity(对齐方式)指定该元素在LinearLayout(父容器)的对齐方式, 也就是该组件本身的对齐方式。

4)android:gravity :指的是该组件中子组件的对齐方式,与上面那个属性比起来,上面那个是控制自身在父容器中布局,而这个是控制子组件在自身容器中布局。

3)RelativeLayout

相对布局时指一个ViewGroup以相对位置显示它的子视图(View)元素,一个视图可以指定相对于他的兄弟或父亲视图位置(例如在给定视图的左边或者下面)或相对于RelativeLayout的特定区域的位置(例如底部对齐或者靠右);

相对布局时设计用户界面的有力工具,因为他消除了嵌套视图组。如果用户发现使用了多个嵌套的LinearLayout视图组,可以考虑使用一个relativeLayout视图组了。

相对布局应该是应用程序中使用最多的布局方式,因为它最灵活。另外,我们在使用相对布局时其实心里应该保持着像CSS那样的盒子模型,不过Android中,貌似没有边框的属性设置,但是可以设置内边框与外边框。


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent">

-------------

</LinearLayout>

1)第一类 :  属性值为true或false
2)第二类:属性值必须为id的引用名“@id/id-name”
3)第三类:属性值为具体的像素值,如30dip,40px

或者分为
1)相对于父元素
2)相对于某组件
3)约束自身的子组件

第一类:属性值为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 如果对应的兄弟元素找不到的话就以父元素做参照物

第二类:属性值必须为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 本元素的右边缘和某元素的的右边缘对齐

第三类:属性值为具体的像素值,如XXdip,XXpx

  • android:layout_margin 离某元素外边缘的距离(包括上右下左)
  • android:layout_marginBottom 离某元素底边缘的距离
  • android:layout_marginLeft 离某元素左边缘的距离
  • android:layout_marginRight 离某元素右边缘的距离
  • android:layout_marginTop 离某元素上边缘的距离
  • android:layout_padding 内边缘的距离(包括上右下左)
  • android:layout_paddingBottom 内底边缘的距离
  • android:layout_paddingLeft 内左边缘的距离
  • android:layout_paddingRight 内右边缘的距离
  • android:layout_paddingTop 内上边缘的距离

4)TableLayout

表格布局有TableLayout所代表,TableLayout继承了LinearLayout。TableLayout并不需要明确地声明包含多少行,多少列,而是通过添加TableRow、其他组件来控制表格的行数与列数。布局TableLayout只有TableRow,每在TableLayout中添加一个TableRow就表示新增一行,其实在TableLayout随意写一个组件也会默认占用一行,但是TableRow其实又是一个容器,在这个容器中的每一个组件占了一列。在表格布局中,列的宽度由该列中最宽的那个单元格决定,整个表格的宽度取决于父容器的宽度(默认是占满父容器)。

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="2"
    android:collapseColumns="0"
    android:shrinkColumns="1"
    >
    <TableRow>
        <TextView android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/cell1"/>
        <TextView android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="@string/cell2"/>
       <TextView android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="@string/cell3"/>
    </TableRow>
    <TextView android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="@string/cell4"/>
</TableLayout>

1)首先我们在对TableLayout属性设置时只能对列做控制,而且列的控制是从0开始计算的。

2)android:collapseColumns:将TableLayout里面指定的列隐藏,若有多列需要隐藏,请用逗号将需要隐藏的列序号隔开。

3)android:stretchColumns:设置指定的列为可伸展的列,以填满父容器中剩下的多余空白空间,若有多列需要设置为可伸展,请用逗号将需要伸展的列序号隔开。

4)android:shrinkColumns:设置指定的列为可收缩的列。当可收缩的列太宽(内容过多)不会被挤出屏幕。这个属性与android:stretchColumns属性恰好组成一对。当需要设置多列为可收缩时,将列序号用逗号隔开。

时间: 2024-08-19 08:40:17

Android 第七课——UI布局的相关文章

Android 第八课——UI布局2

Android布局分为:线性布局.相对布局.表格布局.帧布局.网格布局五种 1)FrameLayout(帧布局) 帧布局是最简单的布局对象,它被定制为用户屏幕上的一个空白备用区域,之后用户可以在其中填充一个单一对象,例如一张图片等.所有的子元素将会固定在屏幕左上角:我们不能为FrameLayout中的一个子元素指定一个位置.而且新增的子元素将会直接覆盖填充旧的子元素,类似于一个栈结构,当然也不一定是全部挡住,这样看透明度以及大小来决定. <FrameLayout xmlns:android= &qu

【Android开发学习笔记】【第七课】布局-上

概念 Android程序各式各样,依靠的就是布局,先来看看布局都是怎么来的: 白色部分就是我们经常用的几种布局,主要说说这个 线性布局-LinearLayout 在一个方向上对齐所有元素. 可以横着.竖着,也可以嵌套,直接看代码吧 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:

Android 第十一课——UI Checkbox

常用基础空组件 6 CheckBox 复选框是常用组件之一,但是开发过程中虽然很多地方会用到复选框,但是却不会用Android系统提供的原始样式,类似我们在写html时,不同的浏览器提供的复选框按钮是不一样的,兼容性也很差,一般用图片替代伪装.但是无论如何伪装样式,复选框的功能都是一样的. layout中组件:        <CheckBox               android:id="@+id/cb1"              android:layout_widt

Android 第十课——UI RadioButton

常用基础空组件 5 RadioGroup RadioButton 单选按钮时常用组件之一,但是开发过程中虽然很多地方会用到单选按钮,但是却不会用Android系统提供的原始样式,类似我们在写html时,不同的浏览器提供的单选按钮是不一样的,兼容性也很差,一般用图片替代伪装.但是无论如何伪装样式,单选按钮的功能都是一样的.下面就用一个 加减乘除 运算器来讲解单选按钮的功能,至于样式以后提供. layout中组件:  <RadioGroup         android:id="@+id/o

Android UI布局与控件(二)

一.View类的常用xml属性:[了解] ①.Android中所有的UI(用户界面)元素都是使用View和ViewGroup对象建立的 ②.View是一个可以将一些信息绘制在屏幕上并与用户产生交互的对象 ③.ViewGroup是一个包含多个的View和ViewGroup的容器,用来定义UI布局. ④.Android提供了一系列的View和ViewGroup的子类,开发者可以灵活地组合使用它们来完成界面布 局.界 面元素绘制和用户交互等工作 ⑤.开发者还可以选择性地继承一些系统提供的View,来自

Android仿微信UI布局视图(圆角布局的实现)

圆角按钮,或布局可以在xml文件中实现,但也可以使用图片直接达到所需的效果,以前版本的微信就使用了这种方法. 实现效果图:    不得不说,这种做法还是比较方便的. 源代码: MainActivity(没写任何代码,效果全在布局文件中实现): package com.android_settings; import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity

Android性能调优篇之UI布局优化

详细内容请查看我的简书地址:Android性能调优篇之UI布局优化 或者我的个人博客地址:Android性能调优篇之UI布局优化

android UI布局

一.设置重复背景 在drawable文件夹下建一个mybackground.xml文件 在文件中写入: <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/mybg_img" android:tileMod

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

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