RelativeLayout中的格局,自适应宽度布局

RelativeLayout中的布局,自适应宽度布局

该图片中为android布局:
总布局为 RelativeLayout
AtLeft 为居左 
<TextView android:background="#ff0000ff" android:id="@+id/tvwAtLeft"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:text="AtLeft" android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"$amp;>amp;$lt;/TextView>

AtRight为居右
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_alignParentTop="true"
android:layout_alignParentRight="true" android:id="@+id/tvwAtRight"
android:text="AtRight" android:background="#ff0000ff"$amp;>amp;$lt;/TextView>

Scroll为中间的布局 
<TextView android:layout_height="wrap_content"
android:layout_alignParentTop="true" android:layout_toRightOf="@+id/tvwAtLeft"
android:layout_width="fill_parent" android:id="@+id/tvwScrolling"
android:layout_toLeftOf="@+id/tvwAtRight" android:text="Scrolling"
android:background="#FFFF0000"$amp;>amp;$lt;/TextView>

在中间的布局设置了android:layout_width="fill_parent" 
android:layout_toRightOf="@+id/tvwAtLeft"
android:layout_toRightOf="@+id/tvwAtLeft"
三个属性后,那么将会有类似于LinearLayout布局中的layout_weight="1"(大于0的值)一样的效果,宽度进行了自适应
经我测试,红色的2个属于貌似不用设置,也是一样效果的。

时间: 2024-08-09 10:29:24

RelativeLayout中的格局,自适应宽度布局的相关文章

独行DIV自适应宽度布局CSS实例与扩大应用范围

DIVCSS5先给大家介绍独立一列自适应宽度,也就是单独一行宽度自适应DIV的布局.通过DIV CSS实例CSS自适应宽度布局方法,再过常见用处介绍充分掌握自适应独占一行一列的布局技巧. 关键点:自适应,这个时候就不能使用固定的CSS宽度值,这个时候就只能使用百分比的宽度表达宽度. 关键代码:width:?% 以百分比为单位的百分比值,自然对象会根据设置百分比自动计算该对象宽度. 实例CSS代码: .box{ width:60%; height:80px; border:1px solid #F

从三栏自适应宽度布局到css布局的讨论

如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就会自适应了,下面是一个实时的demo: left  middle  right  但是table布局是不推荐的,table布局是css流行之前使用的布局,有很多缺点:当table加载完之前,整个table的都是空白的,table将数据和排版参和在一起,使得页面混乱,并且table布局修改排版十分麻烦

响应式布局之浮动圣杯布局(双飞翼布局)—-自适应宽度布局

前端开发中自适应布局在实际应用中越来越普遍,特别是随着更多高级浏览器的出现html5和css3得到了更好的应用. 圣杯布局有个好处,完全符合前端开发中渐进增强的理念,由于浏览器解析是从DOM的上至下,这样圣杯布局可以把页面中重要的内容section放到DOM前面先解析,而次要的aside内容则放在DOM后面后解析. 下面的demo能够解决实际应用中绝大多数的自适应布局问题了,有兴趣的coder们可以研究下,代码如下: 左边固定,右边自适应(双飞翼布局的实现):demoA html部分: cont

解决DEDE防止图片撑破页面,文章内容中的图片自适应宽度

许多使用过DEDE建网站的朋友,可能都会碰到过这样的情况,当我们在一个网站里发表一篇文章时,如果我们使用的图片,其宽度超过内容区域大小,图片就会将表格撑大,同时使得页面布局变得混乱起来.当然,如果懂CSS,我们可以利用css来定义,让超出的部分隐藏起来.不过,这样做的话,图片的美观性就很差,显示不出来超出的部分. 解决这个问题,还有一些朋友,会利用css,使图片在过大后,自动将图片缩小,不过,值得注意的是,由于CSS对各个浏览器存在兼容问题,所以就拿IE6浏览器来说,其作用就不大. 今天,软件直

css实现自适应宽度布局

1.实现左侧宽度固定,右侧全屏自适应. body{margin:0;padding:0} .wrap{ width:100%; float:left} .content{ height:300px;background:green; margin-left:200px} .right{ width:200px; height:300px; background:red; float:left; margin-left:-100%} <body> <div class="wrap

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受.那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧: 左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,

三栏布局 中栏实现自适应宽度

对于div自适应宽度,网上的说法基本上都是将要自适应宽度的div放在其它固定宽度的最后,不指定其float属性或将float属性指定为none,比如三栏布局居中的一栏为自适应宽度,就可以这样来定义三栏div: <div id="left" style="float:left;width:100px;">这是左栏</div> <div id="right" style="float:right;width:1

css布局1:左右宽度固定中间自适应html布局解决方案(同一侧宽度固定,另一侧自适应)

https://www.jb51.net/web/639884.html 本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下: a.使用浮动布局 html结构如下(为什么中间的网格宽度显示的和实际的不一样?怎么造成的;解决方法就是让中间的非浮动元素可以看到两边的浮动元素,例如为.center加overflow:hidden) ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div class="box&quo

CSS如何实现”右部宽度固定,左部自适应“的布局

吃过晚饭后,开始刷前端笔试题,却遇到了一道CSS难题——使用CSS实现左部自适应.右部固定宽度为200px的布局.当时第一眼看到题目时,以为只是一道很简单的题目.不就是定义两个左浮动的div,右部的宽度固定为200px,左部的宽度为100%,但是真的是那么简单吗?我当时信心十足的以为真的就是这么简单的!看来,自信真的是来源于无知啊!于是马上切换到sublime开始编码了.当时,写好的第一个版本大概如下: <!DOCTYPE html> <html lang="en"&