Android開發人員學習小程序系列之組件位置

Android開發人員學習小程序系列之組件位置

本文首發至個人我的公衆號：Android開發圈（id：RainYang_WX）

引言

在Android開發中，咱們設置控件的位置，首先肯定目標控件是在哪一種佈局下的，常見的佈局有RelativeLayout(相對佈局)、LinearLayout(絕對佈局)、ConstraintLayout(約束性佈局) 等等。是先肯定了目標控件的父容器，而後再根據對應的屬性來控制目標控件位置。

好比在父容器是RelativeLayout的狀況下，咱們想要控制Button控件的位置，咱們能夠經過：

android:layout_alignParentBottom=""
android:layout_alignParentStart=""
android:layout_centerInParent=""
...
...
複製代碼

等屬性，再配合margin/padding 設置，以及與其它子控件的配合來達到咱們想要的效果。

那在微信小程序的開發中，咱們如何控制組件的位置呢？

小程序組件

小程序組件跟Android控件差很少意思，只是叫法有些許差別罷了，咱們看一張小程序的官方組件表。

這裏只截了部份內容，想看所有的移步官方文檔：

developers.weixin.qq.com/miniprogram…

這裏的button，不就是Android裏面的button 控件嘛，text組件不就是Android裏面的TextView嘛，還有input可聯想對應Android中的EditText，等等，還有其餘控件，均可以跟Android中的控件做對比，很相似。因此從Android學習轉學小程序開發仍是很容易的。各位Android developer 放心吧！😀😜

像Android開發，咱們開發界面，會根據一個效果圖，把控件放進xml佈局文件裏。在佈局文件裏進行各類設置，作出想要的效果。

小程序開發呢，是把組件放在wxml文件裏，再配合着一個修飾組件樣式wxss文件，來達到想要的的效果。

小程序組件也有本身的屬性，這些屬性值能夠根據官方文檔查詢用處。好比button的屬性就有部分以下：

咱們能夠看到，官方對其組件屬性的介紹，除此以外在組件屬性詳情頁底部還有示例代碼，能夠直接運行查看效果的。官方作的還挺人性化的。你們能夠去看看：

button屬性詳情頁：

developers.weixin.qq.com/miniprogram…

---

Position

接下來我們就步如正題，看看如何控制小程序組件的位置。

以button組件爲例，咱們先在wxml文件中建立一個button 組件。代碼以下：

效果以下：

這是默認效果。

設置組件的位置主要是使用position屬性。

position的屬性值有以下幾種：

這裏說個小技巧，在寫小程序時，wxss文件中，若是忘記屬性的話，能夠點"空格鍵"，就會像上圖那樣列出可用的屬性值，而且旁邊會給出屬性的解釋。這對不瞭解屬性的小夥伴仍是頗有幫助的。

咱們position有九種值可選，每種分別表明什麼意思呢？接着往下看。

-ms-page

該設置下，組件的位置是根據'absolute'模塊來計算的。

示例代碼：

效果：

上面的代碼和效果圖，已經表達的很明確了，我再補充一點，上面的代碼用了style內聯樣式的方式來實現對組件樣式的精確化描述，現實開發中用的更多的方式是配合着wxss文件，使用class類選擇器來描述組件樣式。由於使用內聯樣式的方式描述組件會形成居多的代碼量，代碼也不清晰。這裏爲了方便表述，因此選擇內聯樣式的方式來表達。

若是是用類選擇器的方式，那代碼應該是這樣：

.button-style{
   background-color: darkorange;
   position: -ms-page;
  }
複製代碼

(Index.wxss文件)

<button class='.button-style'>使用類選擇器</button>
複製代碼

(Index.wxml文件)

效果：

代碼中rpx 就像是Android中的dp同樣，都是距離單位。小程序編譯後，rpx會作一次px換算。換算是以375個物理像素爲基準，也就是在一個寬度爲375物理像素的屏幕下，1rpx = 1px。

舉個例子：iPhone6屏幕寬度爲375px，共750個物理像素，那麼1rpx = 375 / 750 px = 0.5px。

而Android呢，在160dpi下 1dp = 1px。

還有就是在設置組件的位置時，會常與left、top、right、bottom屬性配合使用，表現效果上面也展現出來了。

absolute

該值表示組件的位置與大小，是由left、top、right、bottom屬性決定的。

Code:

<button style='position:absolute'>absolute</button>

<button style='position:absolute;left:20rpx;'>absolute+left 20rpx</button>

<button style='position:absolute;left:20rpx;right:20rpx;'>absolute+left 20rpx+right 20rpx</button>

<button style='position:absolute;left:20rpx;top:200rpx'>absolute+left 20rpx+top 200rpx</button>

<button style='position:absolute;left:20rpx;top:200rpx;bottom:20rpx'>absolute+left 20rpx+top 200rpx+bottom 20rpx</button>
複製代碼

效果：

按理說應該是5個button，可是好像只有兩個button，可是仔細看，應該能看出來，這些button出現了重合在一塊兒的狀況。還有，從效果上咱們看的出來最後一個button的高度是由top、botton這兩個屬性值決定的。

換種表述讓你們看的更清楚：

<button style='position:absolute'>absolute</button>

<button style='position:absolute;left:20rpx;top:90rpx;'>absolute+left 20+top 90</button>

<button style='position:absolute;left:20rpx;right:20rpx;top:180rpx;'>absolute+left 20+right 20+top 180</button>

<button style='position:absolute;left:20rpx;top:270rpx;right:20rpx;bottom:100rpx'>absolute+left 20+top 270+right 20+bottom 100</button>



複製代碼

效果：

fixed

此效果和absolute效果相似

<button style='position:fixed'>fixed</button>

<button style='position:fixed;left:20rpx;top:90rpx;'>fixed+left 20+top 90</button>

<button style='position:fixed;left:20rpx;right:20rpx;top:180rpx;'>fixed+left 20+right 20+top 180</button>

<button style='position:fixed;left:20rpx;top:270rpx;right:20rpx;bottom:100rpx'>fixed+left 20+top 270+right 20+bottom 100</button>


<button style='position:fixed;left:90rpx'>fixed222+left 90</button>

複製代碼

效果：

inherit

從父元素繼承 position 屬性的值。

Code：

<view style='position:absolute;left:50rpx;top:200rpx;background-color:blue'>

  <button style='position:inherit'>inherit</button>

</view>
複製代碼

效果：

Code：

<view style='position:absolute;left:50rpx;top:200rpx;background-color:blue'>

  <button>inherit</button>

</view>
複製代碼

效果：

initial

initial 關鍵字用於設置 CSS 屬性爲它的默認值。

relative

生成相對定位的元素，相對於其正常位置進行定位。

Code :

<button style='position:relative'>relative</button>

<button style='position:relative;left:20rpx;top:90rpx;'>relative+left 20+top 90</button>

<button style='position:relative;right:20rpx;top:90rpx;'>relative+right 20+top 90</button>


<button style='position:relative;left:20rpx;right:20rpx;top:180rpx;'>relative+left 20+right 20+top 180</button>

<button style='position:relative;left:20rpx;top:270rpx;right:20rpx;bottom:10rpx'>relative+left 20+top 270+right 20+bottom 10</button>


複製代碼

效果：

static

left，top，right，bottom屬性對其沒用。

Code :

<button style='position:static;left:20rpx;top:90rpx;'>static+left 20+top 90</button>
複製代碼

效果：

sticky

用的比較少。

這篇文章解釋的比較到位： www.cnblogs.com/coco1s/p/64…

unset

名如其意，unset 關鍵字咱們能夠簡單理解爲不設置。其實，它是關鍵字 initial 和 inherit 的組合。

什麼意思呢？也就是當咱們給一個 CSS 屬性設置了 unset 的話：

1. 若是該屬性是默認繼承屬性，該值等同於 inherit
2. 若是該屬性是非繼承屬性，該值等同於 initial

Code :

<view style='position:absolute;left:20rpx'>
  <button style='position:unset;left:20rpx;top:90rpx;'>unset+left 20+top 90</button>
</view>
複製代碼

效果：

結語

做者是作Android開發的，在學習小程序的過程當中，會經常拿小程序裏面的知識點和Android裏面的知識點進行比較學習。微信的官方教程文檔寫的仍是比較詳細的，自學能力強的徹底能夠經過官方文檔來學習。微信的wxss屬性和前端的css屬性很大部分是重合的，因此在遇到不了解的屬性，能夠上網查css的屬性表。

上面介紹了position的9個屬性值的做用，建議你們再親手敲一遍，感覺一下效果，會印象更深入。熟悉了position屬性的時候，結合left、top、right、bottom屬性還有padding、margin系列屬性，配合使用就能夠作出想要的界面效果了。這裏的padding和margin和Android中的一個意思。

關於position的介紹就說到這，你們有什麼補充的能夠留言區留言！我們一塊兒共同窗習。後續做者還會不按期更新 《Android開發人員學習小程序系列》 。

原創不易，若是以爲文章對你有用的話，就 點個贊/留言 支持一下做者吧！！

---

參考連接

developers.weixin.qq.com/miniprogram…

www.cnblogs.com/libin-1/p/6…

developer.mozilla.org/zh-CN/docs/…