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

Theodosia ·

更新时间:2024-11-14

· 662 次阅读

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 本身就有权重属性，自带百分比效果了。

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

您可能感兴趣的文章:android Activity线性布局和表格布局实例讲解android 线性布局LinearLayout实例代码Android UI组件LinearLayout线性布局详解Android布局之LinearLayout线性布局Android RecyclerView线性布局详解(1)Android自定义View圆形百分比控件（一）Android中使用achartengine生成图表的具体方法一个酷炫的Android图表制作框架Android实现轻量线性与百分比图表的方法

布局百分比 Android

1024 个赞