Android Support库百分比布局

简介:

之前写过一篇屏幕适配的文章Android 屏幕适配最佳实践,里面提到了类似百分比布局的东西,可是该方法缺点非常明显,就会添加非常多没用的数据,导致apk包变大。

而谷歌的support库中,添加了一个叫做percent库。该库在如图文件夹下,假设没有,请使用sdk manager更新至最新

这里写图片描写叙述

在使用前,我们先看下这个库有哪些类

这里写图片描写叙述

非常明显里面有一个FrameLayout布局的子类和RelativeLayout布局的子类。此外另一个Helper类。这个Helper类主要是完毕百分比的測量工作。里面有一个接口PercentLayoutParams,假设我们自己要实现百分比布局,那么就要实现这个接口。

我们看下谷歌对外发布了什么自己定义属性

<?xml version="1.0" encoding="utf-8"?

> <resources> <declare-styleable name="PercentLayout_Layout"> <attr name="layout_widthPercent" format="fraction"/> <attr name="layout_heightPercent" format="fraction"/> <attr name="layout_marginPercent" format="fraction"/> <attr name="layout_marginLeftPercent" format="fraction"/> <attr name="layout_marginTopPercent" format="fraction"/> <attr name="layout_marginRightPercent" format="fraction"/> <attr name="layout_marginBottomPercent" format="fraction"/> <attr name="layout_marginStartPercent" format="fraction"/> <attr name="layout_marginEndPercent" format="fraction"/> </declare-styleable> </resources>

看到这些属性应该能直接明确这些属性的意思,其属性值类型为fraction。即小数,百分比。主要属性有宽度,高度占是百分比,外边距的百分比,当中Android MarginLeft与MarginStart的差别參考Android MarginLeft与MarginStart的差别。提取关键内容例如以下。

在写layout布局的时候,我们会发现有这样几个比較类似的属性: 
MarginStart MarginLeft 
MarginEnd MarginRight

这些属性的差别是什么? 依据api凝视,我们得知MarginStart指的是控件距离开头View部分的间距大小。MarginLeft则指的是控件距离左边View部分的间距大小,MarginEnd和MarginRight同理。

普通情况下,View開始部分就是左边,可是有的语言眼下为止还是依照从右往左的顺序来书写的,比如阿拉伯语。在Android 4.2系统之后,Google在Android中引入了RTL布局,更好了支持了由右到左文字布局的显示,为了更好的兼容RTL布局,google推荐使用MarginStart和MarginEnd来替代MarginLeft和MarginRight,这样应用能够在正常的屏幕和由右到左显示文字的屏幕上都保持一致的用户体验。

了解了这些后,我们開始使用PercentRelativeLayout

使用前添加库文件依赖

    compile 'com.android.support:percent:22.2.0'

開始编写布局文件。我们要实现的效果如图所看到的 
这里写图片描写叙述

即左边红色部分宽度占屏幕30%,高度占屏幕90%,右边宽度占屏幕70%。高度各占屏幕45%。

在不使用百分比布局之前。我们通常是使用LinearLayout的weight达到这样的效果,然而使用weight会添加布局的嵌套。会过度绘制。那么使用百分比布局会变成什么样的,无需布局嵌套,设置高度宽度百分比就可以。

<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"

    >

    <View
        android:id="@+id/left"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentBottom="true"
        android:background="#ff0000"
        app:layout_heightPercent="100%"
        app:layout_marginBottomPercent="10%"
        app:layout_widthPercent="30%"/>
    <View
        android:id="@+id/right_top"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentRight="true"
        android:background="#00ff00"
        app:layout_heightPercent="45%"
        app:layout_widthPercent="70%"/>
    <View
        android:id="@+id/right_bttom"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:background="#ffff00"
        app:layout_heightPercent="45%"
        app:layout_marginBottomPercent="10%"
        app:layout_widthPercent="70%"/>
</android.support.percent.PercentRelativeLayout>

我们要设置左边的布局宽度占30%,使用app:layout_widthPercent=”30%”,高度占90%,为了演示另一个属性的使用,这里不直接设置高度为90%,而是设置高度为100%,底边距为10%,即

android:layout_alignParentBottom="true"
app:layout_heightPercent="100%"
app:layout_marginBottomPercent="10%"

同理编写右边两个的布局。

正如文章开头看到的,这个库仅仅提供了两个百分比布局给我们使用,比較常见的线性布局并没有提供相应的百分比布局。

因此。我们想能不能自己实现一个呢,答案是肯定的。通过观察现有的两个百分比布局的代码。我们需呀继承原来的布局。即LinearLayout。编写相应的构造方法调用父类。声明一个PercentLayoutHelper对象辅助完毕百分比測量。此外还须要重写onMeasure和onLayout方法,以及一个 
实现了PercentLayoutHelper.PercentLayoutParams接口的继承原来布局的LayoutParams的LayoutParams。

那么我们新建一个叫PercentLinearLayout的继承LinearLayout的类,实现其构造方法。以及声明一个final的PercentLayoutHelper 对象。


public class PercentLinearLayout extends LinearLayout {
    private final PercentLayoutHelper mHelper = new PercentLayoutHelper(this);

    public PercentLinearLayout(Context context) {
        super(context);
    }

    public PercentLinearLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public PercentLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

仿造现有的两个百分比布局实现内部类LayoutParams ,这一步直接复制代码改动一下就可以,记得一定要继承自android.widget.LinearLayout.LayoutParams。

   public static class LayoutParams extends android.widget.LinearLayout.LayoutParams implements PercentLayoutHelper.PercentLayoutParams {
        private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;

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

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

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

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

        public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo() {
            return this.mPercentLayoutInfo;
        }

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

此外,还要重写一个生成LayoutParams 的方法generateLayoutParams,返回我们的内部类。

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new PercentLinearLayout.LayoutParams(this.getContext(), attrs);
    }

然后又一次onLayout和onMeasure方法就可以,这一步也不须要自己实现,直接复制代码就可以。

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

    }

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

就这样,完毕了百分比线性布局,我们进行使用下。完毕以下的效果,任意发挥的涂鸦。

这里写图片描写叙述

主要是红色部分,从上到下,高度各为父容器的20%,30%,30%。宽度各为父容器的30%,50%,40。当中第三个靠右边布局,右边距为父容器的20%。同一时候有上边距为父容器的10%,看代码更直接

<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">


    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#00ff00"
        app:layout_heightPercent="30%"
        app:layout_widthPercent="50%"></View>

    <cn.edu.zafu.percentlayout.PercentLinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="100%"
        android:background="#ff0000"
        android:layout_alignParentBottom="true"
        app:layout_marginBottomPercent="10%"
        android:orientation="vertical"
        >

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#ff0ff0"
            app:layout_heightPercent="20%"
            app:layout_widthPercent="30%"/>
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#dedff0"
            app:layout_heightPercent="30%"
            app:layout_widthPercent="50%"
            app:layout_marginTopPercent="10%"
            app:layout_marginLeftPercent="10%"
            />
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#1254f0"
            android:layout_gravity="right"
            app:layout_heightPercent="30%"
            app:layout_widthPercent="40%"
            app:layout_marginTopPercent="10%"
            app:layout_marginRightPercent="20%"
            />
    </cn.edu.zafu.percentlayout.PercentLinearLayout>

</android.support.percent.PercentRelativeLayout>

怎么样,是不是轻轻松松就实现了百分比布局,很多其它内容自行挖掘,以下上源代码 
http://download.csdn.net/detail/sbsujjbcy/8853673

eclipse可用的库请见下载链接,将该项目导入eclipse中去,依赖该项目就可以使用百分比布局. 
http://download.csdn.net/detail/sbsujjbcy/8857747








本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5252908.html,如需转载请自行联系原作者

相关文章
|
3月前
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
|
5月前
|
移动开发 监控 前端开发
构建高效Android应用:从优化布局到提升性能
【7月更文挑战第60天】在移动开发领域,一个流畅且响应迅速的应用程序是用户留存的关键。针对Android平台,开发者面临的挑战包括多样化的设备兼容性和性能优化。本文将深入探讨如何通过改进布局设计、内存管理和多线程处理来构建高效的Android应用。我们将剖析布局优化的细节,并讨论最新的Android性能提升策略,以帮助开发者创建更快速、更流畅的用户体验。
81 10
|
3月前
|
安全 Java 网络安全
Android远程连接和登录FTPS服务代码(commons.net库)
Android远程连接和登录FTPS服务代码(commons.net库)
48 1
|
3月前
|
Linux API 开发工具
FFmpeg开发笔记(五十九)Linux编译ijkplayer的Android平台so库
ijkplayer是由B站研发的移动端播放器,基于FFmpeg 3.4,支持Android和iOS。其源码托管于GitHub,截至2024年9月15日,获得了3.24万星标和0.81万分支,尽管已停止更新6年。本文档介绍了如何在Linux环境下编译ijkplayer的so库,以便在较新的开发环境中使用。首先需安装编译工具并调整/tmp分区大小,接着下载并安装Android SDK和NDK,最后下载ijkplayer源码并编译。详细步骤包括环境准备、工具安装及库编译等。更多FFmpeg开发知识可参考相关书籍。
125 0
FFmpeg开发笔记(五十九)Linux编译ijkplayer的Android平台so库
|
3月前
|
Ubuntu Shell API
Ubuntu 64系统编译android arm64-v8a 的openssl静态库libssl.a和libcrypto.a
Ubuntu 64系统编译android arm64-v8a 的openssl静态库libssl.a和libcrypto.a
|
5月前
|
编解码 测试技术 Android开发
Android经典实战之用 CameraX 库实现高质量的照片和视频拍摄功能
本文详细介绍了如何利用CameraX库实现高质量的照片及视频拍摄功能,包括添加依赖、初始化、权限请求、配置预览与捕获等关键步骤。此外,还特别针对不同分辨率和帧率的视频拍摄提供了性能优化策略,确保应用既高效又稳定。
552 1
Android经典实战之用 CameraX 库实现高质量的照片和视频拍摄功能
|
3月前
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
212 0
|
5月前
|
监控 Java API
Android经典实战之OkDownload:一个经典强大的文件下载开源库,支持断点续传
本文介绍的 OkDownload 是一个专为 Android 设计的开源下载框架,支持多线程下载、断点续传和任务队列管理等功能,具备可靠性、灵活性和高性能特点。它提供了多种配置选项和监听器,便于开发者集成和扩展。尽管已多年未更新,但依然适用于大多数文件下载需求。
476 1
|
5月前
|
编解码 Android开发
【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手
本文介绍了Android Studio中使用ConstraintLayout布局的方法,通过创建布局文件、设置控件约束等步骤,快速上手UI设计,并提供了一个TV Launcher界面布局的绘制示例。
87 1
|
5月前
|
API Android开发
Android项目架构设计问题之选择和使用合适的UI库如何解决
Android项目架构设计问题之选择和使用合适的UI库如何解决
62 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等