Android开发人员学习小程序系列之组件位置

引言

在Android开发中,我们设置控件的位置,首先确定目标控件是在哪种布局下的,常见的布局有RelativeLayout(相对布局)、LinearLayout(绝对布局)、ConstraintLayout(约束性布局) 等等。是先确定了目标控件的父容器,然后再根据对应的属性来控制目标控件位置。

比如在父容器是RelativeLayout的情况下,我们想要控制Button控件的位置,我们可以通过:

1
2
3
4
5
android:layout_alignParentBottom=""
android:layout_alignParentStart=""
android:layout_centerInParent=""
...
...

等属性,再配合margin/padding 设置,以及与其它子控件的配合来达到我们想要的效果。

那在微信小程序的开发中,我们如何控制组件的位置呢?

小程序组件

小程序组件跟Android控件差不多意思,只是叫法有些许差异罢了,我们看一张小程序的官方组件表。

部分组件

这里只截了部分内容,想看全部的移步官方文档:

https://developers.weixin.qq.com/miniprogram/dev/component/

这里的button,不就是Android里面的button 控件嘛,text组件不就是Android里面的TextView嘛,还有input可联想对应Android中的EditText,等等,还有其他控件,都可以跟Android中的控件作对比,很类似。所以从Android学习转学小程序开发还是很容易的。各位Android developer 放心吧!😀😜

像Android开发,我们开发界面,会根据一个效果图,把控件放进xml布局文件里。在布局文件里进行各种设置,做出想要的效果。

小程序开发呢,是把组件放在wxml文件里,再配合着一个修饰组件样式wxss文件,来达到想要的的效果。

小程序组件也有自己的属性,这些属性值可以根据官方文档查询用处。比如button的属性就有部分如下:

我们可以看到,官方对其组件属性的介绍,除此之外在组件属性详情页底部还有示例代码,可以直接运行查看效果的。官方做的还挺人性化的。大家可以去看看:

button属性详情页:

https://developers.weixin.qq.com/miniprogram/dev/component/button.html


Position

接下来咱们就步如正题,看看如何控制小程序组件的位置。

以button组件为例,我们先在wxml文件中创建一个button 组件。代码如下:

效果如下:

这是默认效果。

设置组件的位置主要是使用position属性。

position的属性值有如下几种:

Snip20190519_14.png

这里说个小技巧,在写小程序时,wxss文件中,如果忘记属性的话,可以点”空格键“,就会像上图那样列出可用的属性值,并且旁边会给出属性的解释。这对不了解属性的小伙伴还是很有帮助的。

我们position有九种值可选,每种分别代表什么意思呢?接着往下看。

WechatIMG3.jpeg

-ms-page

该设置下,组件的位置是根据’absolute’模块来计算的。

示例代码:

Snip20190519_18.png

效果:

Snip20190519_19.png

上面的代码和效果图,已经表达的很明确了,我再补充一点,上面的代码用了style内联样式的方式来实现对组件样式的精确化描述,现实开发中用的更多的方式是配合着wxss文件,使用class类选择器来描述组件样式。因为使用内联样式的方式描述组件会造成居多的代码量,代码也不清晰。这里为了方便表述,所以选择内联样式的方式来表达。

如果是用类选择器的方式,那代码应该是这样:

1
2
3
4
.button-style{
   background-color: darkorange;
   position: -ms-page;
  }

(Index.wxss文件)

1
<button class='.button-style'>使用类选择器</button>

(Index.wxml文件)

效果:

Snip20190519_21.png

代码中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:

1
2
3
4
5
6
7
8
9
<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>

效果:

Snip20190519_22.png

按理说应该是5个button,但是好像只有两个button,但是仔细看,应该能看出来,这些button出现了重合在一起的情况。还有,从效果上我们看的出来最后一个button的高度是由top、botton这两个属性值决定的。

换种表述让大家看的更清楚:

1
2
3
4
5
6
7
<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>

效果:

Snip20190519_23.png

fixed

此效果和absolute效果类似

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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>

效果:

Snip20190519_24.png

inherit

从父元素继承 position 属性的值。

Code:

1
2
3
4
5
<view style='position:absolute;left:50rpx;top:200rpx;background-color:blue'>

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

</view>

效果:

Snip20190519_25.png

Code:

1
2
3
4
5
<view style='position:absolute;left:50rpx;top:200rpx;background-color:blue'>

  <button>inherit</button>

</view>

效果:

Snip20190519_26.png

initial

initial 关键字用于设置 CSS 属性为它的默认值。

relative

生成相对定位的元素,相对于其正常位置进行定位。

Code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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>

效果:

Snip20190519_27.png

static

left,top,right,bottom属性对其没用。

Code :

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

效果:

Snip20190519_28.png

sticky

用的比较少。

这篇文章解释的比较到位: https://www.cnblogs.com/coco1s/p/6402723.html

unset

名如其意,unset 关键字我们可以简单理解为不设置。其实,它是关键字 initialinherit 的组合。

什么意思呢?也就是当我们给一个 CSS 属性设置了 unset 的话:

  1. 如果该属性是默认继承属性,该值等同于 inherit
  2. 如果该属性是非继承属性,该值等同于 initial

Code :

1
2
3
<view style='position:absolute;left:20rpx'>
  <button style='position:unset;left:20rpx;top:90rpx;'>unset+left 20+top 90</button>
</view>

效果:

Snip20190519_29.png

结语

作者是做Android开发的,在学习小程序的过程中,会常常拿小程序里面的知识点和Android里面的知识点进行比较学习。微信的官方教程文档写的还是比较详细的,自学能力强的完全可以通过官方文档来学习。微信的wxss属性和前端的css属性很大部分是重合的,所以在遇到不了解的属性,可以上网查css的属性表。

上面介绍了position的9个属性值的作用,建议大家再亲手敲一遍,感受一下效果,会印象更深刻。熟悉了position属性的时候,结合left、top、right、bottom属性还有padding、margin系列属性,配合使用就可以做出想要的界面效果了。这里的padding和margin和Android中的一个意思。

关于position的介绍就说到这,大家有什么补充的可以留言区留言!咱们一起共同学习。后续作者还会不定期更新《Android开发人员学习小程序系列》

原创不易,如果觉得文章对你有用的话,就 点个赞/留言 支持一下作者吧!!

参考链接

https://developers.weixin.qq.com/miniprogram/dev/

http://www.cnblogs.com/libin-1/p/6734751.html

https://developer.mozilla.org/zh-CN/docs/Web/CSS/unset

个人公众号