百分比布局 (翻译,体验)解决布局问题,又一种体验

转载请注明出处:王亟亟的大牛之路

我们过去经常使用传统的RelativeLayout,LinearLayout,FrameLayout.以及一些较新的诸如可拉伸的CollapsingToolbarLayout等等都已经多多少少的在项目中使用,早前就已经知晓了百分比布局percent,但是一直没想到去看,去试验相关的内容,正好今天想到了就写一篇关于他的(貌似是本周的第一篇)

安利下自己的整合库:https://github.com/ddwhan0123/Useful-Open-Source-Android,快来fork,star!!!



废话不多,先贴一下试验的效果:(看上去比传统的样子差不多,别心急,看下去)

在具体贴代码之前,先加以解释,毕竟是官方控件,例子都不需要加太多,让大家理解更重要

这篇主要讲的是RelativeLayout的演化版 PercentRelativeLayout 再顺道提一提一个自定义的PercentLinearLayout

看字面意思大家就很容易理解,一个是百分比的相对布局,一个就是百分比的线性布局。(接下来的例子我们拿的是官方的PercentRelativeLayout做一系列的演示)

问题一,怎么引用?

 <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">
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
 </android.support.percent.PercentFrameLayout>

直接像引用正常RelativeLayout控件一样往里面一丢,具体的百分比行为在子控件里操作。乍一看就比较清楚,和通常的配置的区别在于 layout_width或者layout_height来控制空间的尺寸而是使用 app:layout_widthPercent=”50%”和 app:layout_heightPercent=”50%”这样的标签来控制大小,大小的具体数值由%决定,当然这里的占比取决于容器父控件的%大小。

那么既然有新标签,那就来介绍下

//长度和宽度在上面已经做出了解释,这里补充一句,如果百分比设定的值太小,并且你仍然设置了layout_width/height="wrap_content"的话,他的尺寸会变成"wrap_content"大小

app:layout_widthPercent

app:layout_heightPercent

//下面这些就是一些间距的设置,跟RelativeLayout类似只是用%作为尺寸大小,其他并没有区别
app:layout_marginPercent

app:layout_marginLeftPercent

app:layout_marginTopPercent

app:layout_marginRightPercent

app:layout_marginBottomPercent

app:layout_marginStartPercent

app:layout_marginEndPercent

//如果你想让你的控件成一定比例的形式诸如16:9你可以设置如下,这将使画面比例16:9(1.78:1)
 app:layout_aspectRatio="178%"

详细内容可以看:https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

OK,我们来简单的读下源码,再贴例子代码就收工!

整个类本身代码并不太多,也就100行不到,读起来还算轻松,Go

public class PercentRelativeLayout extends RelativeLayout

跟之前预想的一样他是继承于RelativeLayout

在文章的一开始官方有介绍到

If a layout wants to support percentage based dimensions and use this helper class, its LayoutParams subclass must implement this interface.

所以PercentRelativeLayout的一系列实现都与PercentLayoutHelper相关

 private final PercentLayoutHelper mHelper = new PercentLayoutHelper(this);

在源码的开始,就获取了这个Helper的实例用于调用。

//返回默认的布局参数
 @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
    }

//生成布局参数
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new LayoutParams(getContext(), attrs);
    }

//尺寸操作,一层一层向里传递
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mHelper.handleMeasuredStateTooSmall()) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }

//位置操作,都是mHelper给与相应实现
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mHelper.restoreOriginalParams();
    }

内部类,用于给PercentRelativeLayout做布局实现,因为单继承多实现的原则,只能构建一个LayoutParams作为PercentRelativeLayout的实现。

  public static class LayoutParams extends RelativeLayout.LayoutParams
            implements PercentLayoutHelper.PercentLayoutParams {
        private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;

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

        public LayoutParams(int width, int height) {
            super(width, height);
        }

        public LayoutParams(ViewGroup.LayoutParams source) {
            super(source);
        }

        public LayoutParams(MarginLayoutParams source) {
            super(source);
        }

        @Override
        public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo() {
            if (mPercentLayoutInfo == null) {
                mPercentLayoutInfo = new PercentLayoutHelper.PercentLayoutInfo();
            }

            return mPercentLayoutInfo;
        }

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

我们再贴下实现的XML

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="wjj.com.percentdemo.MainActivity">

    <ImageView
        android:id="@+id/a1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:background="@drawable/a1"
        app:layout_heightPercent="30%"
        app:layout_widthPercent="70%" />
    <ImageView
        android:id="@+id/a3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@id/a1"
        android:background="@drawable/a3"
        app:layout_heightPercent="28%"
        app:layout_widthPercent="60%" />

    <ImageView
        android:id="@+id/a2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@id/a1"
        android:layout_toRightOf="@+id/a3"
        android:background="@drawable/a2"
        app:layout_heightPercent="28%"
        app:layout_widthPercent="40%" />

    <ImageView
        android:id="@+id/a4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/a4"
        app:layout_heightPercent="25%"
        app:layout_widthPercent="25%" />

  <ImageView
      android:layout_below="@id/a2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/a5"
      app:layout_heightPercent="35%"
      android:layout_centerHorizontal="true"
      app:layout_widthPercent="35%"
      android:layout_alignParentBottom="true"/>

</android.support.percent.PercentRelativeLayout>

这里再补充下:

最低版本android 2.1 也就是 7 (现在4.0以下的还有吗?再退一步,4.3以下的还有吗?)

源码地址:https://github.com/ddwhan0123/BlogSample/tree/master/PercentDemo

下载地址:https://github.com/ddwhan0123/BlogSample/blob/master/PercentDemo/PercentDemo.zip?raw=true

PercentLinearLayout,这个类,网上抠来的不知道作者,这里也声明下0,0

时间: 2024-11-05 16:05:14

百分比布局 (翻译,体验)解决布局问题,又一种体验的相关文章

ie、firefox、chrome中关于style=&quot;display:block&quot; 引发的页面布局错乱的解决办法

ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:block" 导致页面布局错乱 对table中tr 不显示时,添加style="display:none",ie.chrome.firefox等都没有问题.但是如果想要显示某个tr,就不能使用style="display:block"了,因为,在ie下,可以正常

Android实习札记(11)---妙用include解决布局重用问题

Android实习札记(11)---妙用include解决布局重用问题 --转载请注明出处:coder-pig 如果你已经知道include是什么,只是想知道怎么用,使用示例如下: ①布局文件引入layout  <include android:id="@+id/topbar" android:layout_width="match_parent" android:layout_height="wrap_content" layout=&q

Layout布局——翻译自developer.android.com

布局 布局定义了可见的ui结构,比如activity的UI或者app组件.你可以通过下面两种方法来生命布局. -         在xml文件中声明ui.Android提供了一套直接的xml词汇,对应view的类和子类.比如说组件和布局. -         在运行时构建布局元素.你的可以通过编程来在运行时创建布局对象,或者改变他们的属性. Android框架允许你使用一种或者集中方法来创建ui.例如你可以用xml声明app的默认的布局,包括在其中显示的元素和他们的属性.接下来你可以同哦过代码来

关于静态布局、自适应布局、流式布局、响应式布局、弹性布局的一些概念

一.静态布局(Static Layout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端.2.设计方法: PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅

细说移动端 经典的REM布局 与 新秀VW布局

和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局 实现单边边框1px 实现多边边框1px 实现边框圆角 实现容器固定纵横比 5. REM + VW布局 6. 对比选择 方案选择 食用方式 一.前言 说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等等. 而另一方面,还有一些 布局概念: 1. 静态布局 直

《Ext.net》布局以及Ext JS布局

今天主要对Ext.net布局和Ext js 布局的一个学习. Ext.Net布局概述 Ext.Net中的布局是对ExtJS布局的封装,可以用在panel控件,或者继承自panel的控件,例如window.form.gridpanel.treepanel等.首先来看一个简单的例子: <ext:Window runat="server" ID="win1" Title="Layout示例" Width="600" Heigh

布局的几种方式(静态布局、自适应布局、流式布局、响应式布局、弹性布局)

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. 2.设计方法 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查

布局方式以及一些布局常用方法

前端页面的布局方式常用到的大概有三种方式分别为普通文档流布局.浮动布局和绝对布局.下面将分别介绍着三类布局. a.普通布局:前端中用到的标签主要分为块级标签(display:blcok)和行级标签(display:inline).块级标签为必须占一行的标签元素,后面的元素必须在下一行显示:行级标签是显示时后面的行级元素紧跟着前一个行级标签显示.普通布局是在按照这些元素的特性进行界面的布局,从左到右,从上到下的顺序进行.另:普通元素的position为static. b.浮动布局:浮动布局包括左右

页面布局的几种方式(静态化布局,流式布局,自适应布局,响应式布局,弹性布局)

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. https://developers.google.com/search/mobile-sites/mobile-seo/respon