`
fuerbosi
  • 浏览: 464047 次
文章分类
社区版块
存档分类
最新评论

android View页面布局总结 最全总结。

 
阅读更多

下面是我在工作中总结的内容,希望对大家有帮助。

一、布局

View的几种布局显示方式有下面几种:线性布局(LinearLayout)、相对布局(RelativeLayout)、表格布局(TableLayout)、网络视图(GridView)、标签布局(TabLayout)、列表视图(ListView)、绝对布局(AbsoluteLayout)。

1. view的布局显示概述

在一个Android应用程序中,用户界面通过View和ViewGroup对象构建。Android中有很多种View和ViewGroup,他们都继承自View类。View对象是Android平台上表示用户界面的基本单元。View的布局显示方式直接影响用户界面,View的布局方式是指一组View元素如何布局,准确的说是一个ViewGroup中包含的一些View怎么样布局。ViewGroup类是布局(layout)和视图容器(View container)的基类,此类也定义了ViewGroup.LayoutParams类,它作为布局参数的基类,此类告诉父视图其中的子视图想如何显示。例如,XML布局文件中名为layout_something的属性。我们要介绍的View的布局方式的类,都是直接或间接继承自ViewGroup类,如下图所示:

图1、继承自ViewGroup的一些布局类

其实,所有的布局方式都可以归类为ViewGroup的5个类别,即ViewGroup的5个直接子类。其它的一些布局都扩展自这5个类。下面分小节分别介绍View的七种布局显示方式。

2. 线性布局(LinearLayout)

线性布局:是一个ViewGroup以线性方向显示它的子视图(view)元素,即垂直地或水平地。

Tips:android:layout_weight="1"

"weight"顾名思义是权重的意思,layout_weight 用于给一个线性布局中的诸多视图的重要程度赋值。所有的视图都有一个layout_weight值,默认为零,意思是需要显示多大的视图就占据多大的屏幕空间。如果没有设置权重值的话而屏幕中有多个要显示的话,那只能显示部分(如果全部显示会超出屏幕),所以就需要为每个元素添加layout_weight值了。

若赋一个高于零的值,则将父视图中的可用空间分割,分割大小具体取决于每一个视图的layout_weight值以及该值在当前屏幕布局的整体layout_weight值和在其它视图屏幕布局的layout_weight值中所占的比率而定。举个例子:比如说我们在 水平方向上有一个文本标签和两个文本编辑元素。该文本标签并无指定layout_weight值,所以它将占据需要提供的最少空间。如果两个文本编辑元素每一个的layout_weight值都设置为1,则两者平分在父视图布局剩余的宽度(因为我们声明这两者的重要度相等)。如果两个文本编辑元素其中第一个的layout_weight值设置为1,而第二个的设置为2,则剩余空间的三分之二分给第一个,三分之一分给第二个(数值越小,重要度越高)。

Tips2: setGravity(int). 设置线性布局的内部元素的布局方式

在线性布局中可使用 gravity 属性来设置控件的对齐方式,当需要为 gravity 设置多个值时,用“|”分隔即可。

3. 相对布局(Relative Layout)

相对布局:是一个ViewGroup以相对位置显示它的子视图(view)元素,一个视图可以指定相对于它的兄弟视图的位置(例如在给定视图的左边或者下面)或相对于RelativeLayout的特定区域的位置(例如底部对齐,或中间偏左)。

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

Tips1:需要注意的是在进行相对布局时要避免出现循环依赖,例如设置相对布局在父容器中的排列方式为WRAP_CONTENT,就不能再将相对布局的子控件设置为ALIGN_PARENT_BOTTOM。因为这样会造成子控件和父控件相互依赖和参照的错误。

Tips2:在相对布局中,子控件的位置是相对兄弟控件或父容器而决定的。出于性能考虑,在设计相对布局时要按照控件之间的依赖关系排列,如View A 的位置相对于View B 来决定,则需要保证在布局文件中View B 在View A 的前面。

在进行相对布局时用到的属性很多,首先来看属性值只为true 或false 的属性,如表3-1所示。

表 3-1 相对布局中只取true 或false 的属性

属性名称

属性说明

android:layout_centerHorizontal

当前控件位于父控件的横向中间位置

android:layout_centerVertical

当前控件位于父控件的纵向中间位置

android:layout_centerInParent

当前控件位于父控件的中央位置

android:layout_alignParentBottom

当前控件底端与父控件底端对齐

android:layout_alignParentLeft

当前控件左侧与父控件左侧对齐

android:layout_alignParentRight

当前控件右侧与父控件右侧对齐

android:layout_alignParentTop

当前控件顶端与父控件顶端对齐

android:layout_alignWithParentIfMissing

参照控件不存在或不可见时参照父控件

接下来再来看属性值为其他控件id的属性,如表3-2所示。

表 3-2 相对布局中取值为其他控件id 的属性及说明

属性名称

属性说明

android:layout_toRightOf

使当前控件位于给出id 控件的右侧

android:layout_toLeftOf

使当前控件位于给出id 控件的左侧

android:layout_above

使当前控件位于给出id 控件的上方

android:layout_below

使当前控件位于给出id 控件的下方

android:layout_alignTop

使当前控件的上边界与给出id 控件的上边界对齐

android:layout_alignBottom

使当前控件的下边界与给出id 控件的下边界对齐

android:layout_alignLeft

使当前控件的左边界与给出id 控件的左边界对齐

android:layout_alignRight

使当前控件的右边界与给出id 控件的右边界对齐

最后要介绍的是属性值以像素为单位的属性及说明,如表3-3所示。

表 3-3 相对布局中取值为像素的属性及说明

属性名称

属性说明

android:layout_marginLeft

当前控件左侧的留白

android:layout_marginRight

当前控件右侧的留白

android:layout_marginTop

当前控件上方的留白

android:layout_marginBottom

当前控件下方的留白

4. 表格布局(Table Layout)

表格布局:TableLayout类以行和列的形式管理控件,每行为一个TableRow对象,也可以为一个View对象,当为View对象时,该View对象将跨越该行的所有列。在TableRow中可以添加子控件,每添加一个子控件为一列。

TableLayout布局中并不会为每一行、每一列或每个单元格绘制边框,每一行可以有0 或多个单元格,每个单元格为一个View对象。TableLayout中可以有空的单元格,单元格也可以像HTML中那样跨越多个列。

用表格布局需要知道以下几点:

(1).android:shrinkColumns,对应的方法:setShrinkAllColumns(boolean),作用:设置表格的列是否收缩(列编号从0开始,下同),多列用逗号隔开(下同),如android:shrinkColumns="0,1,2",即表格的第1、2、3列的内容是收缩的以适合屏幕,不会挤出屏幕。

(2).android:collapseColumns,对应的方法:setColumnCollapsed(int,boolean),作用:设置表格的列是否隐藏。

(3).android:stretchColumns,对应的方法:setStretchAllColumns(boolean),作用:设置表格的列是否拉伸。

Tips1:尽管可以用表格布局图来设计整个用户界面,但这通常不是最好的工具,因为表格式布局(TableLayout)继承自线性布局(LinearLayout),并且而不是最有效率的布局控件。仔细推敲就可以发现,TableLayout无非是一系列LinearLayout的有序嵌套,而且从性能上考虑一般不鼓励层次太深的嵌套。尽管如此,对于本来就是表格形式的数据而言(如电子表格数据),表格式布局可能是一个合理的选择。

此外,表格布局数据会随屏幕尺寸和分辨率大小而改变。当需要显示大批量数据时就需要设置滚动条。例如,如果需要在上面的例子中加入天气状况的评析,那么文本就可能是一句话甚至二十句话,因此设置垂直或者水平的滚动条就是明智的选择。

5. 列表视图(List View)

列表布局:是一个ViewGroup以列表显示它的子视图(view)元素,列表是可滚动的列表。列表元素通过ListAdapter自动插入到列表。

ListAdapter:扩展自Adapter,它是ListView和数据列表之间的桥梁。ListView可以显示任何包装在ListAdapter中的数据。该类提供两个公有类型的抽象方法:

1) publicabstractboolean areAllItemsEnabled () :表示ListAdapter中的所有元素是否可激活的?如果返回真,即所有的元素是可选择的即可点击的;

2) publicabstractboolean isEnabled (intposition) :判断指定位置的元素是否可激活的。

总结一下列表布局的关键部分:

Ø 布局文件中定义ListView ;

Ø Adapter用来将数据填充到ListView ;

Ø 要填充到ListView的数据,这些数据可以字符串、图片、控件等等。

其中Adapter是ListView和数据源之间的桥梁,根据数据源的不同Adapter可以分为三类:

Ø String[]: ArrayAdapter ;

Ø List<Map<String,?>>: SimpleAdapter ;

Ø 数据库Cursor: SimpleCursorAdapter。

使用ArrayAdapter(数组适配器)顾名思义,需要把数据放入一个数组以便显示; SimpleAdapter能定义各种各样的布局出来,可以放上ImageView(图片),还可以放上 Button(按钮),CheckBox(复选框)等等;SimpleCursorAdapter是和数据库有关的东西。

6. 网格视图(Grid View)

网格布局:是一个ViewGroup以网格显示它的子视图(view)元素,即二维的、滚动的网格。网格元素通过ListAdapter自动插入到网格。ListAdapter跟上面的列表布局是一样的,这里就不重复累述了。

在风格布局中我们会经常自定义一个ImageAdapter。ImageAdapter类扩展自BaseAdapter,所以首先得实现它所要求必须实现的方法。构造函数和getcount()函数很好理解,而getItem(int)应该返回实际对象在适配器中的特定位置,但是这里我们不需要。类似地,getItemId(int)应该返回元素的行号,但是这里也不需要。

这里重点要介绍的是getView()方法,它为每个要添加到ImageAdapter的图片都创建了一个新的View。当调用这个方法时,一个View是循环再用的,因此要确认对象是否为空。如果是空的话,一个ImageView就被实例化且配置想要的显示属性:

Ø setLayoutParams(ViewGroup.LayoutParams):设置View的高度和宽度,这确保不管drawable中图片的大小,每个图片都被重新设置大小且剪裁以适应这些尺寸。

Ø setScaleType(ImageView.ScaleType):声明图片应该向中心剪裁(如果需要的话)。

Ø setPadding(int, int, int, int):定义补距,如果图片有不同的横纵比,小的补距将导致更多的剪裁以适合设置的ImageView的高度和宽度。

如果View传到getView()不是空的,则本地的ImageView初始化时将循环再用View对象。在getView()方法末尾,position整数传入setImageResource()方法以从mThumbIds数组中选择图片。

7. 标签布局(Tab Layout)

标签布局:是一个ViewGroup以标签的方式显示它的子视图(view)元素,就像在Firefox中的一个窗口中显示多个网页一样。

为了创建一个标签UI(tabbed UI),需要使用到TabHost和TabWidget。TabHost必须是布局的根节点,它包含为了显示标签的TabWidget和显示标签内容的FrameLayout

可以有两种方式实现标签内容:使用标签在同一个活动中交换视图、使用标签在完全隔离的活动之间改变。根据你的需要,选择不同的方式,但是如果每个标签提供不同的用户活动,为每个标签选择隔离的活动,因此你可以更好地以分离的组管理应用程序,而不是一个巨大的应用程序和布局。下面还有一个例子来创建一个标签UI,每个标签使用隔离的活动。

TabHost要求包含一个TabWidget和一个FrameLayout。TabWidget和FrameLayoutTabHost以线性垂直地显示。

TabHost的引用第一次通过getTabHost()获取。然后,为每个标签,创建TabHost.TabSpec定义标签的属性。newTabSpec(String)方法创建一个新的TabHost.TabSpec以给定的字符串标识标签。调用TabHost.TabSpec,setIndicator(CharSequence, Drawable)为每个标签设置文字和图标,调用setContent(Intent)指定Intent去打开合适的活动。每个TabHost.TabSpec通过调用addTab(TabHost.TabSpec)添加到TabHost。

8. 绝对布局(AbsoluteLayout)

绝对布局:是一个ViewGroup以绝对方式显示它的子视图(view)元素,即以坐标的方式来定位在屏幕上位置。

这种布局方式很好理解,在布局文件或编程地设置View的坐标,从而绝对地定位。

分享到:
评论

相关推荐

    Android空页面|错误页面|加载中页面处理AndroidEmptyLayout.zip

    Android 空页面|错误页面|加载中页面处理,支持所有的布局,使用简单方便 Screenshots EmptyLayout使用 1.打开 Project root 的 build.gradle allprojects { repositories { ... maven { url ...

    基于Android在布局中动态添加view的两种方法(总结)

    下面小编就为大家带来一篇基于Android在布局中动态添加view的两种方法(总结)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    Android 替换WebView加载失败时的页面

    做webview加载网页时,遇到一个问题,自带的webview错误页面不美观,于是自定义一个view提示用户,网上很多方法,也不稳定实现替换,结合网上的一些例子,加以优化和拓展,特此写一个完整版本的Demo供大家拿来直接...

    简单的 Android 页面多状态布局切换控件.zip

    简单的 Android 页面多状态布局切换控件,可在 Activity,Fragment 、XML 中使用,可作用于 XML 的根布局 View 或其子 View,默认支持 Loading、Empty、Error 三种状态布局,可进行常规配置,可自定义状态布局,并...

    Android 页面多状态布局管理的开发

    页面多状态布局是开发中常见的需求,即页面在不同状态需要显示不同的布局,实现的方式也比较多,最简单粗暴的方式就是在 XML 中先将不同状态对应的布局隐藏起来,根据需要改变其可见状态,如果多个界面公用相同的...

    SlidingLibrary:可滑动的Android页面布局,上层View可以在一定范围内自由浮动,实现较为炫酷的页面效果~~

    Sliding layout which can make your view or viewgroup float on your layout of Android application.可滑动的Android页面布局,上层View可以在一定范围内自由浮动,实现较为炫酷的页面效果~~

    Android自定义View实现BMI指数条

    最近项目需要,需要做一个BMI指数的指示条,先...1.页面布局: &lt;LinearLayout android:layout_width=fill_parent android:layout_height=100dp android:layout_marginLeft=5dp android:layout_marginRight=5dp

    Android 点击不同按钮动态加载不同的布局.rar

    Android 动态加载布局,在Android界面上根据不同的按钮加载不同的布局页面,其实原理非常简单,下面简要说明下:通过使用LayoutInflater 每次点击按钮时候去读取布局文件,然后找到布局文件里面的各个VIEW 操作完...

    Android简单实现自定义流式布局的方法

    本文实例讲述了Android简单实现自定义流式布局的方法。分享给大家供大家参考,具体如下: 首先来看一下 手淘HD – 商品详情 – 选择商品属性 页面的UI 商品有很多尺码,而且展现每个尺码所需要的View的大小也不同...

    安卓课程设计外卖/网上商城(含报告)

    Google 给我们提供的一个专门用于底部导航的 View,菜单在xml布局使用,注意的就是 app:menu 属性,它指定了导航栏显示的页面菜单是怎样的。 2.掌握自定义布局。创建自定义布局的步骤:编写一个自定义xml布局,将这...

    Android模糊处理简单实现毛玻璃效果

    实现效果大家都知道了,如何在Android中实现呢,说白了就是对图片进行模糊化处理,小编先给大家讲一下Android高级模糊技术的原理,如下: 首先我创建了一个空的bitmap,把背景的一部分复制进去,之后我会对这个...

    Android Studio实现个人记账系统源码.zip

    项目重要技术点: 1-绘制布局,掌握android基本view控件的属性和使用 2-熟练掌握Activity页面展示,跳转和传值 3-使用碎片加载界面,滑动视图切换页面 4-自定义对话框 5-自定义软键盘绘制和使用 6-列表视图以及网格...

    Android 日间/夜间模式 主题切换

    ThemeDemo日夜间模式切换,页面切换的时候附带动画特效, 关于多主题实现的,大牛这里的做法是继承...布局中直接使用 Android 默认的控件就可以.在解析以后会根据控件转换成支持主题切换的控件.解放冗余的名称.

    基于Android Studio开发的个记账工具APP源码,Android 个人记账APP源码

    项目重要技术点: 1-绘制布局,掌握android基本view控件的属性和使用 2-熟练掌握Activity页面展示,跳转和传值 3-使用碎片加载界面,滑动视图切换页面 4-自定义对话框 5-自定义软键盘绘制和使用 6-列表视图以及网格...

    Android实现图片自动轮换

    页面布局代码: &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app=...

    Android ViewPager 的使用总结

    主要产生的类文件有activity,n个view,adapter,自定义的ViewPager,n+1个布局文件 demo所用到文件 步骤: 创建activity package com.example.myviewpager; import java.util.ArrayList; import java.util.List; ...

    Android自定义View实现课程表表格

    自己闲下来时间写的一个课表控件,使用的自定义LinearLayout,里面View都是用代码实现的,最终效果如下图,写的可能有问题希望多多指点 创建一个自定义LinearLayout 控件用来装载课程的信息和课程的周数,和节数...

    Android实现页面翻转和自动翻转功能

    android:autoStart: 设置自动加载下一个View  android:flipInterval:设置View之间切换的时间间隔 android:inAnimation: 设置切换View的进入动画 android:outAnimation:设置切换View的退出动画 当然同样的在代码...

    Android利用FlexboxLayout轻松实现流动布局

    flexbox是属于CSS的一种布局方案,可以简单、完整、响应式的实现各种页面布局。谷歌将其引入以提高复杂布局的能力。下面这篇文章主要给大家介绍了在Android中利用FlexboxLayout轻松实现流动布局的相关资料,需要的...

    Android高级编程--源代码

    作为使用androidsdk构建这些应用程序的实用指南书籍,《android高级编程》从始至终穿插了一系列示例项目,每个项目都引入android的新功能和新技术,以助您达到最圆满的学习效果。书中介绍android的所有基本功能,并...

Global site tag (gtag.js) - Google Analytics