流式布局的使用 使用固定布局

首先可以看下效果圖

簡單布局使用:

android

:id=
"@+id/flow_hot"
android
:layout_width=
"match_parent"
android
:layout_height=
"wrap_content"
android
:background=
"@android:color/holo_blue_light"
>
android
:layout_width=
"wrap_content"
android
:layout_height=
"wrap_content"
android
:text=
"你是我心內的一首歌"
android
:layout_margin=
"10dp"
android
:textsize=
"20sp" 
/>
android
:layout_width=
"wrap_content"
android
:layout_height=
"wrap_content"
android
:text=
"濤聲依舊"
android
:layout_margin=
"10dp"
android
:textsize=
"20sp" 
/>
android
:layout_width=
"wrap_content"
android
:layout_height=
"wrap_content"
android
:text=
"夜夜"
android
:layout_margin=
"10dp"
android
:textsize=
"20sp" 
/>
android
:layout_width=
"wrap_content"
android
:layout_height=
"wrap_content"
android
:text=
"月落烏啼霜滿天"
android
:layout_margin=
"10dp"
android
:textsize=
"20sp" 
/>
android
:layout_width=
"wrap_content"
android
:layout_height=
"wrap_content"
android
:text=
"哇塞"
android
:layout_margin=
"10dp"
android
:textsize=
"20sp" 
/>
android
:layout_width=
"wrap_content"
android
:layout_height=
"wrap_content"
android
:text=
"word天哪"
android
:layout_margin=
"10dp"
android
:textsize=
"20sp" 
/>
android
:layout_width=
"wrap_content"
android
:layout_height=
"wrap_content"
android
:text=
"你咋不上天呢"
android
:layout_margin=
"10dp"
android
:textsize=
"20sp" 
/>
android
:layout_width=
"wrap_content"
android
:layout_height=
"wrap_content"
android
:text=
"你想怎樣"
android
:layout_margin=
"10dp"
android
:textsize=
"20sp" 
/>
android
:layout_width=
"wrap_content"
android
:layout_height=
"wrap_content"
android
:text=
"夜曲"
android
:layout_margin=
"10dp"
android
:textsize=
"20sp" 
/>

public class flowlayout extends viewgroup 

public 
flowlayout(context context, attributeset attrs) 
public 
flowlayout(context context, attributeset attrs, int defstyleattr) 
@override
protected void 
onmeasure(int widthmeasurespec, int heightmeasurespec) else 
//最後乙個元素
if (i == childcount - 1) 
}log.e("tag"
, "widthsize==" + widthsize + ",heightsize==" + heightsize);
// widthsize==768,heightsize==838
log.e("tag"
, "width==" + width + ",height==" + height);
//width==720,height==282
setmeasureddimension(widhtmode == measurespec.exactly 
? widthsize : width, heightmode == measurespec.exactly 
? heightsize : height);
} //重寫的目的，給每個子檢視指定顯示的位置:childview.layout();
private list> allviews = new arraylist<>();
//每一行的子檢視寬度的集合構成的集合
private listallheight = new arraylist<>();
//每一行的高度構成的集合
@override
protected void 
onlayout(boolean changed, int l, int t, int r, int b) else 
if(i==childcount-1)
}log.e("tag"
,"allviews.size=="+allviews.size()+",allheights.size=="+allheight.size());
//2.給每個元素新增位置
int x=0
;int y=0
;for(int i=0
;iy+=allheight.get(i);
x=0;
} }
@override
public layoutparams generatelayoutparams(attributeset attrs) 
}

布局管理 流式布局

2007 11 16 14 18 使用流式布局管理器時，gui元件將按照新增入容器的順序自左而右排列在一行上，如果一行空間不足，則另起一行。預設情況下，元件是劇中排列的。可以通過改變面板的預設布局管理器來改變元件在每一行上的排列位置。語句示例如下 flowlayout fl new flowlayo...

網頁布局流式布局

工具所用到外掛程式 masonry 是 一款非常強大的jquery動態網格布局外掛程式，可以幫助開發人員快速開發類似剪貼畫的介面效果。和css中float的效果不太一樣的地方在 於，float先水平排列，然後再垂直排列，使用masonry則垂直排列元素，然後將下乙個元素放置到網格中的下乙個開發區域。...

使用 CSS 建立固定寬度的布局

我最近的幾篇專欄文章討論了使用 xhtml 和 css 實現兩列或三列頁面布局的各個方面。到目前為止，所有例子都使用流式布局 也就是布局會自動擴充套件和適應瀏覽器視窗的寬度 現在是時候考慮另外一種主要的頁面布局方法了，這種布局方法是固定寬度布局。很多 web 構建人員傾向於使用固定寬度的布局進行頁面...