`

android-五大布局&单位详解

 
阅读更多

首先看下单位详解:android-五大布局&单位详解

px

即像素,1px代表屏幕上一个物理的像素点;

px单位不建议使用,因为同样100px的图片,在不同手机上显示的实际大小可能不同

dp

这个是最常用但也最难理解的尺寸单位。它与像素密度密切相关,所以首先我们解释一下什么是像素密度。假设有一部手机,屏幕的物理尺寸为1.5英 寸x2英寸,屏幕分辨率为240x320,则我们可以计算出在这部手机的屏幕上,每英寸包含的像素点的数量为240/1.5=160dpi(横向)或 320/2=160dpi(纵向),160dpi就是这部手机的像素密度,像素密度的单位dpiDots Per Inch的缩写,即每英寸像素数量。横向和纵向的这个值都是相同的,原因是大部分手机屏幕使用正方形的像素点。

不同的手机/平板可能具有不同的像素密度,例如同为4寸手机,有480x320分辨率的也有800x480分辨率的,前者的像素密度就比较低。 Android系统定义了四种像素密度:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi),它们对应的dppx的系 数分别为0.7511.52,这个系数乘以dp长度就是像素数。例如界面上有一个长度为“100dp”的图片,那么它在240dpi的手机上实际显 示为80x1.5=120px,在320dpi的手机上实际显示为80x2=160px。如果你拿这两部手机放在一起对比,会发现这个图片的物理尺寸差 不多,这就是使用dp作为单位的效果。

dipandroid-五大布局&单位详解

dp完全相同,只是名字不同而已。在早期的Android版本里多使用dip,后来为了与sp统一就建议使用dp这个名字了。

sp

与缩放无关的抽象像素(Scale-independent Pixel)。spdp很类似但唯一的区别是,Android系统允许用户自定义文字尺寸大小(小、正常、大、超大等等),当文字尺寸是正常 1sp=1dp=0.00625英寸,而当文字尺寸是超大时,1sp>1dp=0.00625英寸。类似我们在windows里调整字 体尺寸以后的效果——窗口大小不变,只有文字大小改变。

 

 

 

====================================分隔符========================================

为了适应各式各样的界面风格,Android系统提供了5种布局,这5种布局分别是:、

 

LinearLayout(线性布局) 常用

TableLayout(
表格布局) oa 类常

RelativeLayout(
相对布局) 常用

AbsoluteLayout(
绝对布局)游戏类使用

FrameLayout(
帧布局) 视频类常用

利用这五种布局,可以在屏幕上将控件随心所欲的摆放,而且控件的大小和位置会随着屏幕大小的变化作出相应的调整。

下面是 五个布局的继承关系图

android-extends.jpg

一,LinearLayout(线性布局)

   
在一个方向上(垂直或水平)对齐所有子元素
一个垂直列表每行将只有一个子元素(无论它们有多宽)
一个水平列表只是一列的高度(最高子元素的高度来填充,水平排列可能显示不完全)

 

 

 线性布局vertical:

android-vertical.png

线性布局 horizontal 没有现实完全:
android-horizontal.png

 


Xml代码如下android-五大布局&单位详解

 

 

<?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"
>

<!-- android:orientation="horizontal" 水平排列-->
<!--添加控件 -->
</LinearLayout>

 

 

 

 


二,TableLayout(表格布局)android-五大布局&单位详解

把子元素放入到行与列中
不显示行、列或是单元格边界线
单元格不能横跨行,如HTML中一样
表格布局模型以行列的形式管理子控件,每一行为一个TableRow的对象,当然也可以是一个View的对象。TableRow可以添加子控件,每添加一个为一列。

android:layout_colum
官方解释:The index of the column in which this child should be,也即是设置该控件在TableRow中所处的列。
android:layout_span
官方解释:Defines how many columns this child should span,也即是设置该控件所跨越的列数。

android:collapseColumns
官方解释:The 0 based index of the columns to collapse. The column indices must be separated by a comma: 1, 2, 5.也即是将TableLayout里面指定的列隐藏,若有多列需要隐藏,请用逗号将需要隐藏的列序号隔开。

android:stretchColumns
官方解释:The 0 based index of the columns to stretch. The column indices must be separated by a comma: 1, 2, 5. You can stretch all columns by using the value “*” instead. Note that a column can be marked stretchable and shrinkable at the same time.也即是设置指定的列为可伸展的列,可伸展的列会尽量伸展以填满所有可用的空间,若有多列需要设置为可伸展,请用逗号将需要伸展的列序号隔开。

android:shrinkColumns
官方解释:The 0 based index of the columns to shrink. The column indices must be separated by a comma: 1, 2, 5. You can shrink all columns by using the value “*” instead. 设置指定的列为可收缩的列。当可收缩的列太宽以至于让其他列显示不全时,会纵向延伸空间。当需要设置多列为可收缩时,将列序号用逗号隔开。

下面用一个例子简单说明TableLayout的用法:android-五大布局&单位详解

 

 

 

android-table.png

 


代码如下

 

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1" >

    <TableRow>

        <TextView
            android:layout_column="1"
            android:padding="3dip"
            android:text="Row1" />

        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:text="1" />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

    <TableRow>

        <TextView
            android:padding="3dip"
            android:text="*" />

        <TextView
            android:padding="3dip"
            android:text="Row12" />

        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:text="2" />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

    <TableRow>

        <TextView
            android:layout_column="1"
            android:padding="3dip"
            android:text="Row13" />
    </TableRow>

</TableLayout>

 

 

 


三、RelativeLayout(相对布局)

相对布局的子控件会根据它们所设置的参照控件和参数进行相对布局。参照控件可以是父控件,也可以是其它子控件,但是被参照的控件必须要在参照它的控件之前定义。下面是一个简单的例子:

 

android-Relative.png

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    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=".MainActivity" >

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:text="我是标题"
        android:textColor="#000000"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_title"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:text="我是说明文本"
        android:textColor="#66000000"
        android:textSize="14sp" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
		android:layout_alignParentRight="true"
		android:layout_centerInParent="true"
         />

</RelativeLayout>

 

 


四、AbsoluteLayout(绝对布局)

绝对布局的子控件需要指定相对于此坐标布局的横纵坐标值,否则将会像框架布局那样被排在左上角。手机应用需要适应不同的屏幕大小,而这种布局模型不能自适应屏幕尺寸大小,所以应用的相对较少。

由于  市面上 手机屏幕大小不一 绝对布局现在不建议使用,这里不做讲解

一般游戏类 使用的较多, 控件位置是获取屏幕大小然后 计算出来的.

 

 

五、FrameLayout(帧布局)

可以理解为 web 开发的div
框架布局是最简单的布局形式。所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层,最后一个添加到框架布局中的视图显示在最顶层,上一层的控件会覆盖下一层的控件。这种显示方式有些类似于堆栈。下面举一个简单的例子

 

android-Frame.png

<!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> </o:OfficeDocumentSettings> </xml><![endif]-->


Xml 代码如下

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/text_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我是播放器播放文本中"
        android:visibility="invisible" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:visibility="visible"  >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="play"
            android:text="播放" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="pause"
            android:text="暂停" />
    </LinearLayout>

    <ImageView
        android:id="@+id/iv"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:visibility="invisible" />

</FrameLayout>

 

 

下面介绍一下RelativeLayout用到的一些重要的属性:android-五大布局&单位详解


第一类:属性值为truefalse
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-五大布局&单位详解
android:layout_below                          
在某元素的下方
android:layout_above                          
在某元素的的上方
android:layout_toLeftOf                       
在某元素的左边
android:layout_toRightOf                     
在某元素的右边

android:layout_alignTop                      本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft                     
本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom                 
本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight                    
本元素的右边缘和某元素的的右边缘对齐

第三类:属性值为具体的像素值,如30dip40pxandroid-五大布局&单位详解
android:layout_marginBottom              
离某元素底边缘的距离
android:layout_marginLeft                  
离某元素左边缘的距离
android:layout_marginRight                 
离某元素右边缘的距离
android:layout_marginTop                  
离某元素上边缘的距离

 

 

 

 

 

 

  • 大小: 2.6 KB
  • 大小: 10.4 KB
  • 大小: 5.2 KB
  • 大小: 17.2 KB
  • 大小: 8.7 KB
  • 大小: 14.1 KB
0
0
分享到:
评论

相关推荐

    Android 五大布局方式详解

    Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。 帧布局(FrameLayout):组件从屏幕左上方布局组件。 表格布局(TableLayout):按照行列方式布局组件。 ...

    android 五大布局详解

    该文档详细讲解了android的五大布局方法, 简单明了, 可以看看看哦!

    【Android开发学习笔记之一】5大布局方式详解 - Angel_Kitty - 博客园.pdf

    Android开发学习笔记五大布局方式详解,线性布局,相对布局,帧布局,绝对布局,表格布局。。。。 。。。。。

    Android开发-之五大布局详解

    主要介绍了Android开发-之五大布局详解,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    Android五大布局与实际应用详解

    主要为大家详细介绍了Android五大布局与实际应用,感兴趣的小伙伴们可以参考一下

    《Android自定义组件开发详解》

    第五章 阴影、渐变和位图运算 123 5.1 概述 123 5.2 阴影 123 5.3 渐变 125 5.3.1 线性渐变(LinearGradient) 126 5.3.2 径向渐变(RadialGradient) 130 5.3.3 扫描渐变(SweepGradient) 135 5.3.4 位图渐变...

    Android应用开发揭秘pdf高清版

     国内第一本基于Android 2.0的经典著作,5大专业社区联袂推荐,权威性毋庸置疑!《Android应用开发揭秘》内容全面,不仅详细讲解了Android框架、Android组件、用户界面开发、游戏开发、数据存储、多媒体开发和网络...

    《Google Android开发入门与实战》.pdf

     本书内容上涵盖了用android开发的大部分场景,从android基础介绍、环境搭建、sdk介绍、market使用,到应用剖析、组件介绍、实例演示等方面。从技术实现上,讲解了5个android平台下的完整综合实例及源代码分析,...

    Google.Android开发入门与实战

     《Android开发入门与实战》内容上涵盖了用Android开发的大部分场景,从Android基础介绍、环境搭建、SDK介绍、Market使用,到应用剖析、组件介绍、实例演示等方面。从技术实现上,讲解了5个Android平台下的完整综合...

Global site tag (gtag.js) - Google Analytics