百分比布局的使用

今天有时间捣鼓了一下这个东西,和大家分享一下。

官方提供的包里,关于百分比布局有两个,如下:

就是PercentFrameLayout和PercentRelativeLayout,我们今天就来说说这两个百分比布局的使用吧。

1.添加依赖库

本文Demo使用Android Studio来完成,所以直接在Gradle文件中添加下面一行即可。

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

2.在布局文件中使用

<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/top_left"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:background="#ff44aacc"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="70%" />

    <View
        android:id="@+id/top_right"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/top_left"
        android:background="#ffe40000"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="30%" />

    <View
        android:id="@+id/bottom"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@+id/top_left"
        android:background="#ff00ff22"
        app:layout_heightPercent="80%" />
</android.support.percent.PercentRelativeLayout>
首先,使用百分比布局我们的根布局就得是百分比布局 android.support.percent. PercentRelativeLayout,我们在布局中添加了三个View,每个View显示不同的颜色。在使用百分比布局的时候, layout_widthlayout_height属性的值不会起作用。我们通过使用 app :layout_heightPercent= "20%" 和 app :layout_widthPercent= "70%"两个属性来设置控件的大小。

上面的代码中一共有三个View,第一个View的宽为屏幕宽度的70%,高为屏幕高度的20%,第二个View位于第一个View的右边,它的宽度为屏幕宽度的30%,高为屏幕高度的20%,第三个View依次类推,那么它的效果图如下:

是不是很简单呢?在百分比布局中,除了宽高我们可以用百分数来表示之外,margin我们也可以用百分比来表示,比如下面几个属性:

app:layout_marginStartPercent
app:layout_marginEndPercent
app:layout_marginTopPercent
app:layout_marginBottomPercent
我们可以将View的margin属性设置为百分数。除了这几个属性可以设置为百分数之外,还有一个值得关注的属性,叫做 layout_aspectRatio,这个叫做屏幕的宽高比,我们看下面一个布局文件:

<?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"
    android:background="#ff00ff22"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- not using aspectRatio here -->
    <View
        android:id="@+id/view1"
        android:background="#ff44aacc"
        android:layout_width="100dp"
        android:layout_height="200dp"/>

    <!-- using aspectRatio here -->
    <View
        android:layout_below="@id/view1"
        android:background="#ffe40000"
        android:layout_width="100dp"
        android:layout_toRightOf="@id/view1"
        android:layout_alignParentTop="true"
        android:layout_height="0dp"
        app:layout_aspectRatio="100%"/>

</android.support.percent.PercentRelativeLayout>
再看看效果图:

第一个View我们将其宽设置为100dp,高设置为200dp,第二个View我们将其宽设置为100dp,但是高设置为0dp,同时给它设置了layout_aspectRatio属性,这个属性的值为100%,表示View的宽高比为1:1,所以就看到上面的效果,如果我们将之设置为50%,表示宽高比为0.5:1,那么我们看到的效果将是这样的:

好了,最后我们再来看一个PercentFrameLayout布局的Demo:

代码如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/child1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="100%"
        app:layout_widthPercent="100%"
        android:contentDescription="Image"
        android:src="@drawable/Image052" />
    <TextView
        android:id="@+id/child2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child 2"
        android:textSize="24sp"
        android:layout_gravity="top|left" />
    <TextView
        android:textSize="24sp"
        android:id="@+id/child3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child 3"
        android:layout_gravity="top|right" />
</android.support.percent.PercentFrameLayout>

效果图如下:


转载于:https://www.cnblogs.com/lenve/p/5865915.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值