当前位置:首页 >  站长 >  交互设计 >  正文

简单了解程序员如何布局页面

  2017-11-02 10:08  来源:齐乐娱乐100  我来投稿  我要评论
  开抢了!双11齐乐娱乐者优选服务!   有些朋友会有疑问,做UI到底需不需要掌握一些开发知识呀?   我觉得了解是有必要的,但不需要研究的太深入。   那怎么了解呢?我来教你个方法(需要有安卓手机才行,但苹果手机也没关系,看了此文也会有所收获!)   今天的大纲如下:   1.先找到打开页面布局的开关   2.认识布局中的三个内容   3.举个例子   4.注意事项   1.先找到打开页面布局的开关   我们需要先打开显示页面布局的开关,这是我们今天学习的基础。   先打开安卓系统手机的设置页面:   
150951518729433389
    找到“开发者选项”,点击进入:   
150951520247612243
    再找到“显示布局边界”,打开开关后,你会的得到下面这个各种框框的页面:   
150951521301077815
    这就是我们今天要研究的效果,可能现在看着有点蒙,但等我下面给你介绍完,你就知道开发实现页面的基本原理了!   屌不屌?   2.认识布局中的三个内容   想弄明白原理,就必须知道,这上面各种形式的框框、颜色都是啥意思!   其实,只要我们用心观察,就会发现,里面只有三种形式的内容。   第一种:   
150951522707116742
    这种矩形就是控件区,里面可能是文字呀、按钮呀、图片呀等等!   第二种:   
150951523521052639
    这种紫色矩形是指控件与控件之间的间距。   第三种:   
150951524945043578
    剩下就只剩白色区域了,其实严格来说是透明区域,这部分内容是控件内部的间距:   认识了这三个内容,你再来看这个页面是不是就知道,开发哥哥是怎么实现页面的了?   如果还不懂,我们下面来举个例子。   3.举个例子   我们就来看下面这个区域怎么实现的:   
150951526345001888
    这样,一条内容的布局就完成,之后就往相应的地方里面放东西就行了!   4.注意事项   说个注意事项吧,我们工作中经常遇到的一个问题,看下图:   
150951527992713461
    两排文字之间是有间距的(红色部分12像素),但是当我们看开发布局的时候:   
150951529492121075
    两个文字控件之间是没有间距的。   也就是说,其实字体控件本身上下是带有一定间距的,如果这时候我们还标注间距为12像素,那实现出来的行间距就会比设计稿要大,所以在做效果图标注的时候一定考虑好,后期实现出来难免会有微调的情况。   总结   没事的时候可以多看看开发的布局情况,让自己对页面的实现有更深的了解。
    点赞0 投稿指南 实力品牌 企业会员 责任编辑:西瓜
    作者:
    A5品牌宝

    信息推荐

    扫一扫关注最新齐乐娱乐资讯
    齐乐娱乐下载