Android 百分比布局详解及实例代码

Android 百分比布局

1.引入:compile 'com.android.support:percent:24.0.0'

2.点开源码可以看到,主要有两个布局类PercentFrameLayout和PercentRelativeLayout,一个工具类PercentLayoutHelper。

3.点开布局类比如PercentRelativeLayout的源码,可以看到实现的很简单。

public class PercentRelativeLayout extends RelativeLayout {
  private final PercentLayoutHelper mHelper = new PercentLayoutHelper(this);

  /**省略若干行构造方法之类的代码**/

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    //重点在这

    mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    if (mHelper.handleMeasuredStateTooSmall()) {
      super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
  }

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

  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);
    }

     /**省略若干行构造方法之类的代码**/

    @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);
    }
  }
}

就是在onMeasure和onLayout里面调用了PercentLayoutHelper 的一些方法,另外在里面定义了自己的LayoutParams ,而这个LayoutParams 也相当简单。

这里关键的一行代码是在onMeasure方法里面,mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);通过PercentLayoutHelper 的adjustChildren 遍历子view来设置 子view的宽高,宽高在PercentLayoutHelper 的内部类PercentLayoutInfo通过在布局文件中设置的值计算好了。

public void adjustChildren(int widthMeasureSpec, int heightMeasureSpec) {

    // Calculate available space, accounting for host's paddings
    int widthHint = View.MeasureSpec.getSize(widthMeasureSpec) - mHost.getPaddingLeft()
        - mHost.getPaddingRight();
    int heightHint = View.MeasureSpec.getSize(heightMeasureSpec) - mHost.getPaddingTop()
        - mHost.getPaddingBottom();
    for (int i = 0, N = mHost.getChildCount(); i < N; i++) {

      //遍历子view来设置 子view的宽高

      View view = mHost.getChildAt(i);
      ViewGroup.LayoutParams params = view.getLayoutParams();
      if (DEBUG) {
        Log.d(TAG, "should adjust " + view + " " + params);
      }
      if (params instanceof PercentLayoutParams) {
        PercentLayoutInfo info =
            ((PercentLayoutParams) params).getPercentLayoutInfo();

        if (info != null) {
          if (params instanceof ViewGroup.MarginLayoutParams) {
            info.fillMarginLayoutParams(view, (ViewGroup.MarginLayoutParams) params,
                widthHint, heightHint);
          } else {
            info.fillLayoutParams(params, widthHint, heightHint);
          }
        }
      }
    }
  }

4.布局中的使用方法:以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"
  android:background="@color/background_color"
  >

  <TextView
    android:id="@+id/mian_tab_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textColor="@color/back_green"
    android:textSize="15sp"
    android:text="name"
    />

  <ImageView
    app:layout_widthPercent="50%"
    app:layout_heightPercent="50%"
    android:src="@drawable/ic_launcher_icon"
    android:scaleType="fitXY"
    android:layout_below="@+id/mian_tab_name"
    android:background="@color/black"
    />

</android.support.percent.PercentRelativeLayout>

引入xmlns:app的命名空间,然后app:layout_widthPercent="50%"就可以设置宽高的百分比了。相当简单 。

5.不过在使用的过程中,可能会有一些其他的需求,比如app:layout_widthPercent="50%",app:layout_heightPercent="50%"都是相对于屏幕的宽高的,假如要显示一张正方形的图片,以宽的50%为准呢?这个时候就可以这样写了:

<ImageView
    app:layout_widthPercent="50%"
    app:layout_aspectRatio="100%"
    android:src="@drawable/ic_launcher_icon"
    android:scaleType="fitXY"
    android:layout_below="@+id/mian_tab_name"
    android:background="@color/CS_black"
    />

使用layout_aspectRatio属性,设置app:layout_aspectRatio="100%",layout_aspectRatio就是宽高比。这个时候就不要设置app:layout_heightPercent属性了。在PercentLayoutHelper 里面, 源代码如下:

public void fillLayoutParams(ViewGroup.LayoutParams params, int widthHint,
        int heightHint) {
      // Preserve the original layout params, so we can restore them after the measure step.
      mPreservedParams.width = params.width;
      mPreservedParams.height = params.height;

      // We assume that width/height set to 0 means that value was unset. This might not
      // necessarily be true, as the user might explicitly set it to 0. However, we use this
      // information only for the aspect ratio. If the user set the aspect ratio attribute,
      // it means they accept or soon discover that it will be disregarded.
      final boolean widthNotSet =
          (mPreservedParams.mIsWidthComputedFromAspectRatio
              || mPreservedParams.width == 0) && (widthPercent < 0);
      final boolean heightNotSet =
          (mPreservedParams.mIsHeightComputedFromAspectRatio
              || mPreservedParams.height == 0) && (heightPercent < 0);

      if (widthPercent >= 0) {
        params.width = (int) (widthHint * widthPercent);
      }

      if (heightPercent >= 0) {
        params.height = (int) (heightHint * heightPercent);
      }

      //这一段代码是关键,如果aspectRatio >=0,aspectRatio是宽高比

      if (aspectRatio >= 0) {
        if (widthNotSet) {

           //如果宽没有设置,就以高为准

          params.width = (int) (params.height * aspectRatio);
          // Keep track that we've filled the width based on the height and aspect ratio.
          mPreservedParams.mIsWidthComputedFromAspectRatio = true;
        }
        if (heightNotSet) {

          //如果高没有设置,就以宽为准

          params.height = (int) (params.width / aspectRatio);
          // Keep track that we've filled the height based on the width and aspect ratio.
          mPreservedParams.mIsHeightComputedFromAspectRatio = true;
        }
      }

      if (DEBUG) {
        Log.d(TAG, "after fillLayoutParams: (" + params.width + ", " + params.height + ")");
      }
    }

6.另外,假如我们要定义自己的PercentLinearLayout,基本可以直接改一下名字,继承自LinearLayout就好了:public class PercentLinearLayout extends LinearLayout ,在仿照PercentRelativeLayout里面的LayoutParams定义一个自己的LayoutParams就好了。

不过官方为什么没有直接提供一个PercentLinearLayout 类,而只提供了两个PercentFrameLayout和PercentRelativeLayout呢?或许是由于LinearLayout 本身就有权重属性,自带百分比效果了。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

(0)

相关推荐

  • Android编程开发实现带进度条和百分比的多线程下载

    本文实例讲述了Android编程开发实现带进度条和百分比的多线程下载.分享给大家供大家参考,具体如下: 继上一篇<java多线程下载实例详解>之后,可以将它移植到我们的安卓中来,下面是具体实现源码: DownActivity.java: package com.example.downloads; import java.io.File; import java.io.IOException; import java.io.RandomAccessFile; import java.net.H

  • Android 游戏引擎libgdx 资源加载进度百分比显示案例分析

    因为案例比较简单,所以简单用AndroidApplication -> Game -> Stage 搭建框架 一.主入口,无特殊 复制代码 代码如下: public class App extends AndroidApplication { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //初始化Demo initialize(new Demo()

  • Android自定义View圆形百分比控件(一)

    做一个自定义View的小练习,效果如下 只需要画一个圆.一个圆弧.一个百分比文本,添加一个点击事件,传入百分比重绘 1.在res/values文件夹下新建attrs.xml文件,编写自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CirclePercentView" > <attr nam

  • android球形水波百分比控件代码

    本文主要介绍的是一个球形水波的百分比控件,市面上有各种形形色色的百分比控件,我一直觉得水波是最炫的,UI给了我这个机会,然而网上搜了一大堆,不是太复杂,代码太多(反正我是调不出效果来),就是有瑕疵的,所以只好自己写了,这里开源出来,方便大家.有什么问题或者建议大家留言指出. 先看效果,这里动态图不好截取,就贴张静态的 对于水波百分比控件实现方法有如下几种 - 画好水波形状的bitmap,利用属性动画进行平移 - 利用曲线精确绘制目标水波 - 利用大范围曲线与容器做交集 第一种比较烦,网上有这种思

  • Android 百分比布局详解及实例代码

    Android 百分比布局 1.引入:compile 'com.android.support:percent:24.0.0' 2.点开源码可以看到,主要有两个布局类PercentFrameLayout和PercentRelativeLayout,一个工具类PercentLayoutHelper. 3.点开布局类比如PercentRelativeLayout的源码,可以看到实现的很简单. public class PercentRelativeLayout extends RelativeLay

  • Android LayoutInflater加载布局详解及实例代码

    Android  LayoutInflater加载布局详解 对于有一定Android开发经验的同学来说,一定使用过LayoutInflater.inflater()来加载布局文件,但并不一定去深究过它的原理,比如 1.LayoutInflater为什么可以加载layout文件? 2.加载layout文件之后,又是怎么变成供我们使用的View的? 3.我们定义View的时候,如果需要在布局中使用,则必须实现带AttributeSet参数的构造方法,这又是为什么呢? 既然在这篇文章提出来,那说明这三

  • Android  LayoutInflater加载布局详解及实例代码

    Android  LayoutInflater加载布局详解 对于有一定Android开发经验的同学来说,一定使用过LayoutInflater.inflater()来加载布局文件,但并不一定去深究过它的原理,比如 1.LayoutInflater为什么可以加载layout文件? 2.加载layout文件之后,又是怎么变成供我们使用的View的? 3.我们定义View的时候,如果需要在布局中使用,则必须实现带AttributeSet参数的构造方法,这又是为什么呢? 既然在这篇文章提出来,那说明这三

  • android 通知Notification详解及实例代码

    android Notification实例详解 1.使用Builder模式来创建 2.必须要设置一个smallIcon,还可以设置setTicker 3.可以设置 setContentTitle,setContentInfo,setContentText,setWhen 4.可以设置setDefaults(闪屏,声音,震动),通过Notification设置flags(能不能被清除) 5.发送需要获取一个NotificationManager(getSystemService来获取);noti

  • Android 文件选择器详解及实例代码

    本文给大家讲解下Android文件选择器的使用.实际上就是获取用户在SD卡中选择的文件或文件夹的路径,这很像C#中的OpenFileDialog控件. 此实例的实现过程很简单,这样可以让大家快速的熟悉Android文件选择器,提高开发效率. 网上曾经见到过一个关于文件选择器的实例,很多人都看过,本实例是根据它修改而成的,但更容易理解,效率也更高,另外,本实例有自己的特点:   1.监听了用户按下Back键的事件,使其返回上一层目录.        2.针对不同的文件类型(文件vs文件夹 , 目标

  • Android Listview中显示不同的视图布局详解及实例代码

    Android Listview中显示不同的视图布局 1. 使用场景 在重写ListView的BaseAdapter时,我们常常在getView()方法中复用convertView,以提高性能.convertView在Item为单一的同种类型布局时,能够回收并重用,但是多个Item布局类型不同时,convertView的回收和重用会出现问题.比如有些行为纯文本,有些行则是图文混排,这里纯文本行为一类布局,图文混排的行为第二类布局.单一类型的ListView很简单,下面着重介绍一下ListView

  • Android GPS定位详解及实例代码

    GPS定位是智能手机上一个比较有意思的功能,LBS等服务都有效的利用了GPS定位功能.本文就跟大家分享下Android开发中的GPS定位知识.      一.Android基础知识准备 1.Activity类 每一种移动开发环境都有自己的基类.如J2ME应用程序的基类是midlets,BREW的基类是applets,而Android程序的基类是Activity.这个activity为我们提供了对移动操作系统的基本功能和事件的访问.这个类包含了基本的构造方法,键盘处理,挂起来恢复功能,以及其他底层

  • Android 图片选择详解及实例代码

     Android 图片选择 可以达到的效果: 1.第一个图片的位置放照相机,点击打开照相机 2.其余的是显示全部存储的图片,点击一次是查看大图,长按则是每张图片出现一个checkBox,可以进行选择 下面是实例效果图 MainActivity 类 public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener, AdapterView.OnItemLongClickLis

  • Android ListView position详解及实例代码

    我们在使用ListView的时候,一般都会为ListView添加一个响应事件android.widget.AdapterView.OnItemClickListener.对OnItemClickListener的position和id参数,我相信有些人在这上面走了些弯路. 在使用listview的时候,我们经常会在listview的监听事件中,例如OnItemClickListener(onItemClick)中,或listview的adapter中(getView.getItem.getIte

  • Android 消息机制详解及实例代码

    Android 消息机制 1.概述 Android应用启动时,会默认有一个主线程(UI线程),在这个线程中会关联一个消息队列(MessageQueue),所有的操作都会被封装成消息队列然后交给主线程处理.为了保证主线程不会退出,会将消息队列的操作放在一个死循环中,程序就相当于一直执行死循环,每循环一次,从其内部的消息队列中取出一个消息,然后回调相应的消息处理函数(handlerMessage),执行完成一个消息后则继续循环,若消息队列为空,线程则会阻塞等待.因此不会退出.如下图所示: Handl

随机推荐