百分比布局_百分比 约束布局 - CSDN
  • css页面布局之百分比布局

    千次阅读 2018-07-26 13:17:32
    我们可以用百分比布局来实现这种效果。 应用场景: 富图表的大屏幕展示页面 丰富交互体验的单页面程序 喜欢抠页面细节的项目 实现过程 html,body元素高度设置为100%;容器元素(#app),高度设置为100%; 将...

    前言:

    有的时候我们需要页面刚好装满整个屏幕,不多不少,里面如果有子容器,希望能刚好装满父容器,不多不少。

    我们可以用百分比布局来实现这种效果。

    应用场景:

    • 富图表的大屏幕展示页面
    • 丰富交互体验的单页面程序
    • 喜欢抠页面细节的项目

    实现过程

    1. html,body元素高度设置为100%;容器元素(#app),高度设置为100%;
    2. 将容器继续细分为几个子盒子(subbox),高度宽度分别设置为百分比形式,浮动布局。
    3. 在子容器里分别添加一个包裹盒子(可以用来设置背景图,盒模型设置为border-box,内边距等,高度百分比)
    4. 这样我们的每个元素的高度都依赖于父元素的高度。这样就能实现刚好装满屏幕的效果,测试完美

     

    展开全文
  • 百分比布局 & rem布局

    千次阅读 2019-03-21 23:33:04
    100%布局特点:屏幕尺寸越大显示的...百分比布局 新建html及对应的css 引入meta : vp <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, mi...

    100%布局特点:屏幕尺寸越大显示的内容越多;
    rem布局特点:不同屏幕尺寸,显示的内容大致一样;

    百分比布局

    1. 新建html及对应的css

    2. 引入meta : vp

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" id="vp"/>
    
    1. 引入设备缩放比代码(后三句),将id名添加到meta标签
    <script type="text/javascript">
    // 把屏幕的倍率缩小到N分之一(N是window.devicePixelRatio)
    	var scale = 1/window.devicePixelRatio;
    	var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
    	document.getElementById("vp").content = mstr;
    </script>
    
    
    1. 一般拿到640px的设计稿,在iphone5开发。
      750px的设计稿,在iphone6开发。

    2. 做页面,量出来多少写多少。
      body, html { height : 100%; }
      (1)整个盒子高度100%,设置成弹性盒,主轴垂直向下
      (2)main部分高度不确定,所以剩余高度都给mainflex:1;由于main内容很多,所以还要添加overflow-x:hidden;从而overflow-y:auto;(可以省略),这一部分可以垂直滚动。

    rem布局

    1. 新建html及对应的css

    2. 引入meta:vp

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" id="vp"/>
    
    1. 引入设备缩放比代码(五句),将id名添加到meta标签
    <script type="text/javascript">
        // 把尺寸放大N倍(N是window.devicePixelRatio)
        var wd = document.documentElement.clientWidth*window.devicePixelRatio/10;
        //物理像素*设备像素比=真实像素
        document.getElementsByTagName("html")[0].style.fontSize = wd + "px";
        // 把屏幕的倍率缩小到N分之一(N是window.devicePixelRatio)
        var scale = 1/window.devicePixelRatio;
        var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
        document.getElementById("vp").content = mstr;
    </script>
    
    1. 一般拿到640px的设计稿,在iphone5开发
      750px的设计稿,在iphone6开发,注意查看根部字体大小。

    2. 做页面,量出来多少写多少。把单位直接写成rem。(可以通过插件转换,插件里面pxrem的值写成:你的开发平台的根部字体大小)
      (1)整个盒子高度100%,设置成弹性盒,主轴垂直向下
      (2)main部分高度不确定,所以剩余高度都给mainflex:1;由于main内容很多,所以还要添加overflow-x:hidden;从而overflow-y:auto;(可以省略),这一部分可以垂直滚动。

    展开全文
  • 百分比布局

    千次阅读 2019-02-28 17:37:15
    今天使用的是:Android Percent Support Library 百分比布局兼容库: 如何使用百分比布局 1.添加依赖 dependencies { implementation 'com.android.support:percent:27.0.2' } 我的studio是6.0一下,所以将...

    今天使用的是:Android Percent Support Library  百分比布局兼容库:

    如何使用百分比布局

    1.添加依赖

    dependencies { 
    implementation 'com.android.support:percent:27.0.2'
    }

    我的studio是6.0一下,所以将implemention改为compile。有的时候添加studio可能会报错,这个时候看一下自己的 compileSdkVersion,因为我的是26,所以需要修改一下

    compile 'com.android.support:percent:26.0.0-alpha1'

    接下来在函数库里面我们主要用到两个类:

    • PercentRelativeLayout
    • PercentFrameLayout
    • 通过名字就可以看出,这是继承自FrameLayoutRelativeLayout两个容器类;  

    支持的属性有:

    • app:layout_heightPercent:用百分比表示高度
    • app:layout_widthPercent:用百分比表示宽度
    • app:layout_marginPercent:用百分比表示View之间的间隔
    • app:layout_marginLeftPercent:用百分比表示左边间隔
    • app:layout_marginRight:用百分比表示右边间隔
    • app:layout_marginTopPercent:用百分比表示顶部间隔
    • app:layout_marginBottomPercent:用百分比表示底部间隔
    • app:layout_marginStartPercent:用百分比表示距离第一个View之间的距离
    • app:layout_marginEndPercent:用百分比表示距离最后一个View之间的距离
    • app:layout_aspectRatio:用百分比表示View的宽高比

    这几个是重要的属性:

    • app:layout_aspectRatio="50%"
      app:layout_heightPercent="70%"
      app:layout_widthPercent="100%"
      app:layout_marginStartPercent="10%"
      app:layout_marginEndPercent="10%"


    接下来就是实际操作:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <TextView
            android:id="@+id/row_one_item_one"
            android:layout_alignParentTop="true"
            android:background="#7700ff00"
            android:gravity="center"
            android:text="w:70%,h:20%"
            app:layout_heightPercent="20%"
            app:layout_widthPercent="70%"
            />
    
        <TextView
            android:id="@+id/row_one_item_two"
            android:background="#396190"
            android:layout_alignParentRight="true"
            android:gravity="center"
            android:text="w:30%,h:20%"
            app:layout_heightPercent="20%"
            app:layout_widthPercent="30%"
            />
    
        <ImageView
            android:id="@+id/row_two_item_one"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_below="@+id/row_one_item_one"
            android:background="#d89695"
            android:scaleType="centerCrop"
            android:src="@drawable/image_car"
            app:layout_heightPercent="70%" />
    
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_below="@id/row_two_item_one"
            android:background="#770000ff"
            android:gravity="center"
            android:text="width:100%,height:10%"
            app:layout_heightPercent="10%"
            app:layout_widthPercent="100%" />
    
    </android.support.percent.PercentRelativeLayout>

    效果图:

     

    实现原理:

    系统初始化布局都是通过LayoutInflater来实现的,比如在setContentView里面。LayoutParams在平时使用还是比较多的,其作用就是让父View决定如何摆放自己以及自己的宽高。当我们把child view写到布局里面,那么child view的LayoutParams由ViewGroup的generateDefaultLayoutParams来设置

    下面就是LayoutInflater为子View赋值LayoutParams的关键代码:

    void rInflate(XmlPullParser parser, View parent, final AttributeSet attrs,
        boolean finishInflate, boolean inheritContext) {
        //...
        while (((type = parser.next()) != XmlPullParser.END_TAG ||
            parser.getDepth() > depth) && type != XmlPullParser.END_DOCUMENT) {
    
            //...
            final View view = createViewFromTag(parent, name, attrs, inheritContext);
            final ViewGroup viewGroup = (ViewGroup) parent;
            final ViewGroup.LayoutParams params = viewGroup.generateLayoutParams(attrs);
            rInflate(parser, view, attrs, true, true);
            viewGroup.addView(view, params);
        //...
    }

    PercentRelativeLayout所以就实现了generateLayoutParams的方法,并且返回的是继承的RelativeLayout.LayoutParams,这样就保留了RelativeLayout原来属性。并且generateLayoutParams的方法参数是AttributeSet,里面就包含了我们声明的PercentLayout的属性值,例如layout_widthPercent等等。

    PercentRelativeLayout.LayoutParams在构造方法就通过PercentLayoutHelper对AttributeSet进行解析,解析的结果保存在自定义的数据结构PercentLayoutHelper.PercentLayoutInfo,里面包括了在概述里面说的所有属性。

    private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;
    
    public LayoutParams(Context c, AttributeSet attrs) {
        super(c, attrs);
        mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);
    }
    

    另外,我们知道所有的LayoutParams都是继承ViewGoup.LayoutParams,里面有个方法是用来初始化View两个layout_width,layout_height:

    protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {
        width = a.getLayoutDimension(widthAttr, "layout_width");
        height = a.getLayoutDimension(heightAttr, "layout_height");
    }
    

    如果我们没有在布局文件里面声明这两个属性,那么在LayoutInflater初始化的就会抛UnsupportedOperationException。由于使用了百分比的属性,所以这个属性就可以不需要,为了让其不抛异常,必须重写这个方法。

    PercentLayoutHelper#fetchWidthAndHeight就是让其在没有值的情况下让LayoutParams的width和height的值都为0。

    @Override
    protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {
        PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);
    }
    

    初始化布局的时候已经把所有需要的数据都保持在了PercentLayoutInfo里面,接下来就到了我们熟悉的三大流程了:onMeasure->onLayout->onDraw,由于是ViewGroup,所以只需要关注前面两个即可。先来看onMeasure:

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mHelper.handleMeasuredStateTooSmall()) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }
    

    adjustChildren的主要工作就是遍历所有的child view,通过child view的PercentLayoutHelper.LayoutParams的宽高百分比转换为实际的占用的像素宽高。并保存在对应child view的LayoutParams里,然后再调用RelativeLayout原有的onMeasure,就可以实现宽高的百分比转换。

    我们在前面读书笔记中View的工作原理measure的过程里面有提到,有时候我们在测量View的时候,如果父View最大能够给我们的空间小于我们需要的空间,就会给测量结果的高两位加上相应的状态表示MEASURED_STATE_TOO_SMALL。

    如果出现了这种情况,并且为layout_width和layout_height设置了wrap_content,就需要调用handleMeasuredStateTooSmall来处理,将宽或者高重新按照wrap_content的属性来测量。

    然后就到了onLayout的阶段,基本什么也没做。如果在child view里面设置了layout_width,layout_height等属性,那么在onMeasure阶段就会调用adjustChildren将他们都保存起来,等onLayout结束之后再把他们给还原回去。

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mHelper.restoreOriginalParams();
    }

     

    展开全文
  • CSS百分比布局

    千次阅读 2018-01-07 22:21:41
    百分比是一种相对于包含块的计量单位。 首先知道百分比的宽度: 目标元素宽度/父级元素宽度=百分比宽度 在说到百分比是前,先简单了解下基本的单位 英寸(inch) :in 1 in=2.54cm 厘米(centimeter):cm 毫米...

    百分比是一种相对于包含块的计量单位。

    首先知道百分比的宽度:
    目标元素宽度/父级元素宽度=百分比宽度

    在说到百分比是前,先简单了解下基本的单位

    • 英寸(inch) :in 1 in=2.54cm
    • 厘米(centimeter):cm
    • 毫米(millimeter):mm
    • 磅(point):pt 1pt=1/72 in
    • 皮卡(pica):pc 1pc==12 pt
    • 像素(pixel unit):px 1px=0.75 pt
    • 相对长度单位(相对于当前对象内文本的字体尺寸):em 1em=16px
    • CSS3新增的一个相对单位root em: rem 1rem=16px

      接下来就是关于CSS中常用属性的百分比

      width基于父级的width
      height基于父级的height
      margin(top,right,bottom,left)基于父级的width
      padding(top,right,bottom,left)基于父级的width
      left,top,right,bottom基于父元素的width,height,width,height
      font-size基于继承得到的font-size
      line-height基于当前字体的font-size
      transform(left, top)基于自身的left, top

    百分比的demo

    <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                .box{
                    position: relative;
                    margin-top: 10%;
                    width: 100px;
                    height: 100px;
                    padding: 15px;
                    border: 4px solid yellow;
                    background: red;
                }
                .box>.absolute-div{
                    z-index: 1;
                    position: absolute;
                    top: 100%;
                    left: 100%;
                    width: 10%;
                    height: 10%;
                    padding: 10%;
                    border: 4px solid blue;
                    background: white;
                }
                .box>.relative-div{
                    z-index: 1;
                    position: relative;
                    top: 100%;
                    left: 100%;
                    width: 10%;
                    height: 10%;
                    padding: 10%;
                    border: 4px solid blue;
                    background: white;
                }
            </style>
    
    <div class="box">
                <div class="relative-div"></div>
            </div>
            <div class="box">
                <div class="absolute-div"></div>
            </div>

    父盒子盒模型与相对定位的子盒子的盒模型(relative):
    这里写图片描述这里写图片描述这里写图片描述

    父盒子盒模型与相对定位的子盒子的盒模型(absolute):
    这里写图片描述这里写图片描述这里写图片描述

    展开全文
  • Android 百分比布局库(percent-support-lib) 解析与扩展

    万次阅读 多人点赞 2015-07-01 14:39:48
    Google终于开始支持百分比的方式布局了,瞬间脉动回来,啊咧咧。对于这种历史性的时刻,不出篇博客难以表达我内心的激动。,本文分为3个部分: PercentRelativeLayout、PercentFrameLayout的使用、对上述控件源码...
  • HTML CSS实现百分比布局

    千次阅读 2019-09-07 19:39:04
    HTML CSS实现百分比布局HTML代码CSS代码实现效果媒体查询...这种情况下,使用百分比布局无疑是一种很好的选择。 但是这种方式实现的是间隔固定、item宽度可变。有时候也会遇到item宽度固定,间距可变的情况,但是这...
  • 关于使用百分比布局导致布局设定失效的记录 背景:个人现在在UI布局的时候喜欢使用百分比布局,虽然它在计算上有些复杂,也有可能在返工的时候有些麻烦,但我们仍然可以在一定的范围内使用它解决布局适配的问题。 ...
  • 详解百分比布局问题!

    千次阅读 2018-04-23 19:10:22
    (出于项目进行部分百分比布局开发需求的总结)在所有的布局,固定布局,以及所谓的响应式等,更多的都是在关注宽度。宽度,宽度,宽度!无论是什么布局,想高度还原设计稿,首要考虑的就是宽度问题。尤其是在响应式...
  • 移动端页面布局:百分比布局、rem布局 1 弹性盒布局(百分比布局) 例如,拉勾网、天猫首页。 好处:充分发挥大手机的优势——显示内容越多;缺点:屏幕过大,间距过大,比例失调。 特点: - 顶部与底部的bar...
  • Android 增强版百分比布局库 为了适配而扩展

    万次阅读 多人点赞 2015-07-06 12:58:07
    转载请标明出处: ... 本文出自:【张鸿洋的博客】 ...上周一我们发布了Android 百分比布局库(percent-support-lib) 解析与扩展中对percent-support这个库进行了解析和添加了PercentLinearLayout的支持。
  • 百分比布局(流式布局) 百分比是一种相对于包含块的计量单位。利用对属性设置百分比来适配不同屏幕,注意这里的百分比是相对于父元素; 1. 究竟相对于谁的百分比? 有父元素则相对于父元素的宽度,无父元素则相...
  • 百分比布局实现 前提

    2018-12-23 10:52:59
    百分比布局是一种比较容易实现等比例缩放实现多分辨率显示的一种布局方式。要想实现百分比布局,就必须对他的父容器进行有效约束,下面就是约束代码: &lt;style type="text/css"&gt;  *{  ...
  • 百分比布局 在这种布局中,我们不再使用wrap_content等方式来指定控件的大小,而是允许直接指定控件在布局中所占的百分比,这样的话就可以轻松实现平分布局甚至是任意比例分割布局的效果了。我们需要在项目的build....
  • 基于Android Studio 3.4.2百分比布局在添加依赖时报错的问题 最近我在学习郭神的《第一行代码》(第二版),在学习使用百分布局的内容时,在添加百分比布局库的依赖时发生了报错。按照书上的内容,添加依赖的代码...
  • Android Support库百分比布局

    千次阅读 热门讨论 2015-07-01 12:15:09
    之前写过一篇屏幕适配的文章Android 屏幕适配最佳实践,里面提到了类似百分比布局的东西,但是该方法缺点很明显,就会增加很多无用的数据,导致apk包变大。而谷歌的support库中,增加了一个叫做percent库,该库在如...
  • 支持相对布局、线性布局、帧布局,笔者看来更像是FrameLayout 、LinearLayout、RelativeLayout三者的结合体,并且比这三者更强大的是实现了百分比布局,大家都知道安卓碎片严重,使用百分比适配,那么将彻底解决适配...
  • 某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。 实战效果图 实战代码 &lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;...百分比布局&lt;/title&a
  • 1 前沿android 推出了百分比布局,有了这个布局我们按照百分比来分配屏幕。大家是不是听了很激动?下面我们来慢慢讲解。2 控件介绍2.1 控件介绍我们来看一下这几个百分比控件:1. PercentRelativeLayout 2. ...
  • 以下面的HTML5代码为例来学学习页面的百分比布局: <div class="comic"> <img src="fate.png" alt="Fate"> <h1>Fate</h1> </div> <div class="comic"> <img src="hulk....
  • 利用百分比和js实现H5页面自适应纯属菜鸟对H5的看法,希望各位大佬多多指教如何实现,利用百分比布局和js动态获取宽高屏幕宽高自适应弹窗模块(就是模态框,原生js,css给需要的人用)还有一些小组件的原始js和css及...
1 2 3 4 5 ... 20
收藏数 44,173
精华内容 17,669
关键字:

百分比布局