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/…