Android 介面佈局
阿新 • • 發佈：2021-08-11
佈局
介面元素
固定大小，無需變動。---通過空白出來適應尺寸
可變動大小--通過變化來適應。
兩者兼有--通過排版，來優化組合。
| android | web-css | destop | |
| 整體尺寸是否變動 | 主視窗隨不同解析度變動 | 有窗體固定尺寸的。 有自適應的 | 有窗體固定尺寸的。 有自適應的 |
| 自適應 | match_parent | bootstrap 整體div width=100%，背景色能填滿 中間部分採用 <div container> @media(min-width: XXpx) 根據實時寬度分成好幾個區間。到達某個區間後調整尺寸。 內容相對集中。 裡面的xs，md沒搞懂啥用。 < div=row 來控制偏移這些 <div=colx </div> 來完成整體佈局。 | |
| 整體 上下左右結構 層疊 巢狀 | AppBarOverLay layout- BottomNavigation 感覺也是預設垂直方向下來。 頁面建立就必須會存在一個layout。 都是按layout的特性來規劃。 層疊 分挺多種情況的， 線性佈局裡面每個元素會鋪開。 相對佈局中， 預設都是放在左上角。。 然後看起來也不是全覆蓋，透明累積顯示。 指定layout_above這種來設定關係。 還可以 layoutA -match_parent來佔據整個層。 layoutB-match——bottom 試了下，layoutB預設就是透明的，會顯示出layoutA的底色 巢狀 <include layout="@layout/content_main" /> | html 是流動Flow模型 預設垂直方向-塊狀元素以行的形式佔據位置。 改水平方向-通過float,或者width比例。 <div position= fixed left=0,right=0> <div position =relative <div float=left> <div float=left> 或者 <div width= x%> <div width=x%> <div> 層疊 使用z_index來指定順序 | menu panel- align=left align=client status align=bottom 容器的功能很少。 基本都是拖拽一下，對對齊。 沒啥佈局概念。 層疊 先看控制元件之間特定的層級關係， 再看控制元件新增進來的順序。 不太涉及佈局容器間的關係。 |
| 區域性 | layout-即作為整體的佈局元件。 又作為控制元件內部的佈局元件。 （如listview） 水平，垂直好理解 RelativeLayout 相對於父佈局的位置。top,left,right,bottom 感覺類似於delphi控制元件裡的各種屬性。 相對於兄弟控制元件的位置。 layout_toRightOf layout_below 格子佔的比例--思路有點不一樣 先分配控制元件自身佔用的位置，再用layout_weight來分配空餘的空間。 也有說是就按layout_weigh的值來分配空間。 這裡layout_width設定會不起作用，一般寫成0dp。 這個只能用再linearlayout? 其它的可以用百分比佈局 app:layout_widthpercent="xx%" TabLayout viewPager 來填充 viewPagerAdapter adapter.addFragment(Fragment,Title) tilte-標籤頁名稱 Fragment-顯示內容 | 列表元件 ul table <ul>-垂直排列 <li><div><span1></div></li>水平排列 </ul> | 容器 |
| 元素屬性 | 長，寬，margin，gravity[相當於align] 居中－layout_centerInParent="true" 居右－layout_alignParentRight="true" visibility-“visible ”、“invisible”、“gone”-隱藏，不保留佔有的空間。 裝飾填補－ <View android:layout_width="match_parent". android:layout_height="8dp" android:background="@drawable/title_shadow" /> <View android:layout_width="1px" android:layout_height="match_parent" android:background="@color/normal_bg_color" /> 不同狀態下的顯示 焦點，點選狀態等 通過background設定一個xml分樣式 <selector> <item state_focused=true drawable=""> 主要設定過去 | position --位置 固定位置 fixed---已網頁視窗為基準 absolute-已容器為基準 偏移值 relative-申明瞭此屬性，才能用left，right這些偏移值。 float 使元素在水平方向佈局。 也可以用width=x%來柵格化 display --顯示模式 感覺就 是否換行的區別。 塊狀-block 內聯-inline oncursor-- | |
| 實際響應 | Buttom--點選效果 button-自帶漣漪效果 imageButton--通過xml設定 state_pressed=true or false 這裡直接指定圖片可能會被拉伸，要<bitmap>這種格式設定 Radio--選擇效果 RadioButton--通過xml設定 state_checked=true or false 閃爍效果 Timer.schedule(task,period) task run setBackgroudResource(A or B) Timer.cancel |