Android布局與CSS的Flex布局的對應關系
@Author:莫川
一都毒、前言
作為一個android開發(fā)者碰缔，使用xml寫UI金抡，實在是太方便了梗肝。最近學習Weex，需要使用css來布局禀晓。學成之后粹懒，發(fā)現(xiàn)使用CSS的Flex布局樣式也非常方便崎淳。在css中拣凹，使用flex布局嚣镜，需要添加display屬性橘蜜，當然跌捆，Weex默認使用的display屬性就是flex佩厚。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
二抄瓦、使用CSS寫布局
2.1 線性布局實現(xiàn)
對于android開發(fā)者而言陶冷，使用LinearLayout寫線性布局煞额；使用CSS的話沾谜，無論是線性或者相對类早，都是使用div標簽。div標簽有點相當于android的ViewGroup一樣缭召。
2.1.1 方向
(1).垂直方向(從上到下)
android:
android:orientation=“vertical”
flex:
flex-direction: column;
(2).水平方向(從左向右)
android:
android:orientation=“horizontal”
flex:
flex-direction: row;
比如嵌巷，寫一個左右方向的布局：
<div style="display:flex;flex-direction:row;">
<div style="width:40px;height:100px;background-color:#ff0000;">
</div>
<div style="width:100px;height:100px;background-color:#fffff">
</div>
<div style="width:80px;height:100px;background-color:#ff0000">
</div>
</div>
效果為：
2.1.2 權(quán)重
在android中，線性布局LinearLayout可以設置android:weightSum屬性坪圾，其子元素可以設置android:layout_weight屬性，用于等分的效果漾月。比如：
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100px"
android:background="#ffffff"
android:orientation="horizontal"
android:weightSum="3" >
<TextView
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="1"
android:background="#ff0000"
android:textColor="#000000" />
<TextView
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center"
android:text="2"
android:background="#0000ff"
android:textColor="#000000" />
</LinearLayout>
在flex中，則使用flex屬性即可觅彰。比如：
<div style="display:flex;flex-direction:row;width:300px">
<div style="height:100px;flex:1;background-color:#ff0000;">
</div>
<div style="height:100px;flex:2;background-color:#0000ff;">
</div>
</div>
效果為:
在這里烛芬，與android類似蛀骇，flex的優(yōu)先級是高于width的擅憔。
2.2 相對布局實現(xiàn)
在android中暑诸，使用RelativeLayout實現(xiàn)相對布局个榕。一般來說西采，相對布局能實現(xiàn)的樣式械馆，大多都可以使用多層嵌套的線性布局實現(xiàn)霹崎。比如android里的toLeft,toRightOf,below,above尾菇。
分別對應的是在某某元素的左派诬、右、下憔儿、上等方位。這種布局耀里，可以使用嵌套式的線性div實現(xiàn)冯挎。但是房官，也有例外续滋，比如覆蓋效果翰守。如下：
一個藍色的方塊，覆蓋在一個紅色的方塊之上疲酌，并且在右下角蜡峰，分別距右方和下方40像素。如果使用android的相對布局朗恳，非常好寫：
使用的布局主要有：
//與父布局的相對關系屬性
android:layout_alignParentLeft
android:layout_alignParentTop
android:layout_alignParentRight
android:layout_alignParentBottom
//外邊距
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
實現(xiàn)上述效果的xml代碼：
<RelativeLayout
android:layout_width="160dp"
android:layout_height="160dp"
android:background="#ff0000">
<View
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="40dp"
android:layout_marginRight="40dp"
android:background="#00ff00" />
<View
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:background="#0000ff" />
</RelativeLayout>
使用CSS布局湿颅，應該怎么寫呢？
<div style="position:relative;height:160px;width:160px;background-color:#ff0000;">
<div style="position:absolute;height:40px;width:40px;background-color:#00ff00;right:40px;bottom:40px">
</div>
<div style="position:absolute;width:40px;height:40px;background-color:#0000ff;right:20px;bottom:20px">
</div>
</div>
這里引入如下一些CSS屬性
positon: relative或absolute
top粥诫，left油航，bottom，right
首先看一下子元素的postion屬性，使用的是absolute絕對布局余境。然后使用bottom和right屬性，定位該元素在上級的最近一個使用了position為relative的div中的位置。這里的bottom，是指距底部的距離蜜葱，right是指距右邊的距離揭鳞。同樣的舞骆，如果使用top和left，則可以定位其上、左的位置。說明：如果left和right同時使用，這時场仲，要看是否有width屬性档插，如果沒有指定width屬性，則left和right同時生效棒坏，寬度這會根據(jù)left和right自動計算；如果指定了寬度，則只有l(wèi)eft和width生效谎替，忽略right秩命，應避免這種情況霹菊。
2.3 居中問題
在android中礼搁，線性布局和相對布局的居中是不一樣的瑟曲。線性布局LinearLayout使用android:gravity和android:layout_gravity確定。而相對布局RelativeLayout則使用:
水平居中
android:layout_centerHorizontal
垂直居中
android:layout_centerVertical
全居中
android:layout_centerInParent
在Flex中，居中為：
水平居中
justify-content:center;
垂直居中
align-items:center;
全居中：
同時使用
justify-content:center;
align-items:center;
除居中之外，justify-content和align-items還有其他屬性可選：
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
具體含義芭梯，可以查閱文檔累奈，在次不再贅述。
2.4 邊距
為了使內(nèi)邊距和外邊距的含義和android一致查描，需要在css的樣式中添加
box-sizing:border-box;
也就是說桥滨，為元素指定的任何內(nèi)邊距和邊框都將在已設定的寬度和高度內(nèi)進行繪制邀杏。通過從已設定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。這就和android的padding一致了微姊。
//android內(nèi)邊距
android:padding
android:paddingLeft
android:paddingRight
android:paddingTop
android:paddingBottom
//android外邊距
android:margin
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
對應css
/* css內(nèi)邊距 */
padding
padding-top
padding-right
padding-bottom
padding-left
/* css外邊距 */
margin
margin-top
margin-right
margin-bottom
margin-left
android中的邊框一般需要寫shape實現(xiàn)。而css中則相對簡單。
/* css邊框 */
border
border-width
border-style
border-color
2.5 圓角弧度
android中如果寫一個圓角的shape還是非常簡單的赞别，只需要使用shape即可鞠绰。
//android中背景的radius屬性
radius;
topLeftRadius
topRightRadius
bottomLeftRadius
bottomRightRadius
在CSS中曙咽，與其類似：
/* css中圓角屬性 */
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
注意：
在android中魁亦，只能背景設置shape，而控件本身的內(nèi)容并不會改變的轮蜕。而CSS中的border-radius既可以用于設置背景痊剖，也可以改變控件本身的內(nèi)容佛析。比如：要實現(xiàn)一個顯示圓形的圖片控件，在android上伞梯，無論你對ImageView怎么設置屬性敬特，都不可以合搅，只能重新開發(fā)一個圓角控件CircleImageView。CSS中直接使用border-radius即可悯搔。
2.6 其他屬性
//背景
public static final String VIEW_BACKGROUND = "android:background";
//文本
public static final String VIEW_TEXT = "android:text";
//文本顏色
public static final String VIEW_TEXT_COLOR = "android:textColor";
//文本大小
public static final String VIEW_TEXT_SIZE = "android:textSize";
//文本風格
public static final String VIEW_TEXT_STYLE = "android:textStyle";
//單行顯示
public static final String VIEW_SINGLE_LINE = "android:singleLine";
//多行顯示
public static final String VIEW_MAX_LINE = "android:maxLines";
//默認值顯示
public static final String VIEW_HINT = "android:hint";
//圖片的縮放方式
public static final String VIEW_SCALE_TYPE = "android:scaleType";
//文本屬性
public static final String VIEW_ELLIPSIZE = "android:ellipsize";
- 2.6.1 背景色
background-color: #dddddd;
background-color: rgba(0,0,0,0.5);
其中：
R：紅色值增炭。正整數(shù) | 百分數(shù)
G：綠色值靡馁。正整數(shù) | 百分數(shù)
B：藍色值。正整數(shù)| 百分數(shù)
A：透明度码党。取值0~1之間
- 2.6.2 文本內(nèi)容
直接放到標簽中即可
- 2.6.3 文本顏色
color:#ff0000;
- 2.6.4 文本大小
font-size:24px;
- 2.6.5 風格
.normal {font-style:normal;}/* 默認，正常*/
.italic {font-style:italic;}/* 斜體*/
.oblique {font-style:oblique;}/* 傾斜*/
.normal {font-weight:normal;}/* 默認，正常*/
.thick {font-weight:bold;}/* 加粗*/
.thicker {font-weight:900;}/* 加粗*/
- 2.6.6 行數(shù)限制
普通的web前端：
(1).單行限制集乔，多余的部分顯示點點點...
css為：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
部分瀏覽器還需要width限制肥印。
(2).限制多行，多余部分顯示...
比如景殷，限制3行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
(3).Weex
weex的text組件，添加了屬性lines用于限制行數(shù)。比如：
限制單行和多行時：
.togetherTitle {
width: 500px;
text-overflow: ellipsis;
margin-top: 10px;
font-size: 28px;
color: #4a4a4a;
lines: 1; /*weex 屬性,限制文本為2行*/
}
.togetherContent {
text-overflow: ellipsis;
height: 100px;
width: 500px;
margin-top: 5px;
font-size: 26px;
color: #9f9f9f;
lines: 2; /*weex 屬性,限制文本為2行*/
}
- 2.6.7 文本對齊方式
android中TextView的android:gravity屬性八秃，對應的left骤肛，center，right尊搬。在CSS中則為：
text-align:center;
left 把文本排列到左邊您没。默認值：由瀏覽器決定欧募。
right 把文本排列到右邊。
center 把文本排列到中間仆抵。
justify 實現(xiàn)兩端對齊文本效果跟继。
- 2.6.8 圖片scaleType
android中ImageView控件的scaleType屬性，常用的有centerCrop和fitXY镣丑；
在CSS中實現(xiàn)fitXY的效果是非常簡單的舔糖，只需要使用img標簽，然后設置寬高即可莺匠。
而實現(xiàn)centerCrop的效果則需要下面三個樣式配合：
background-image:url('xxxx');
background-size:80px 120px;
background-position:center;
最關鍵點屬性就是background-position金吗，當為center的時候，就是居中趣竣。當然摇庙，它還可以有很多其他值，比如left遥缕，right等卫袒。
weex的話則使用image組件的resize屬性即可。
2.7 可見性控制
在android中单匣，我們使用visibility屬性夕凝，控制可見性烤蜕。
//控件可見性屬性
android:visibility="gone|visible|invisible";
gone是既不可見，也不占位
visible是既可見迹冤，又占位
invisible是不可見，但占位
在CSS中虎忌，可見并占位當然是默認狀態(tài)泡徙；
android中gone對應的不可見可以通過設置display屬性實現(xiàn):
dispaly:none;
android中的invisible可以設置visibility屬性實現(xiàn)。
visibility:hidden;
在React當中膜蠢，我們可以通過數(shù)據(jù)源實現(xiàn)對div的可見性控制堪藐，比如：
{status?<div>xxxx</div>:none}
2.8 Demo
圖片上覆蓋了一個div的蒙層，而div蒙層內(nèi)部的布局挑围，又可以分解為一個垂直方向的線性布局礁竞。
<div class="container" onclick="playVideo">
<image class="img" src="{{item.images[0]}}"></image>
<div class="center-container">
<image class="icon" src="{{item.feature.videoIconBig}}"></image>
<text class="text">{{item.title}}</text>
<text class="text">{{item.feature.playTime}}</text>
</div>
</div>
...
.img {
width: 750px;
height: 350px;
}
.center-container {
position: absolute;
flex-direction: column;
top: 0;
left: 0;
width: 750px;
height: 350px;
background-color: rgba(0, 0, 0, 0.3);
align-items: center;
justify-content: center;
}
.text {
position: relative;
margin-top: 20px;
margin-bottom: 0px;
font-size: 25px;
color: #ffffff;
}
.icon {
position: relative;
margin-top: 70px;
margin-bottom: 10px;
width: 50px;
height: 50px;
}
.container {
position: relative;
width: 750px;
height: 350px;
align-items: center;
justify-content: center;
}
三、參考文章
2 weex文檔
