首页 > 系统 > Android > 正文

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

2019-12-12 04:29:42
字体:
来源:转载
供稿:网友

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表