如何使用Percentage for android layout?

时间:2015-08-26 17:44:07

标签: android android-view android-preferences android-styles

我们如何为android视图元素使用百分比值?像这样的东西

<TextView
        android:id="@+id/"
        android:layout_width="75%"
        android:layout_height="50%"/>

5 个答案:

答案 0 :(得分:47)

更新2018年:

PercentRelativeLayoutPercentFrameLayout已弃用。考虑使用ConstraintLayout

旧答案:

到目前为止,Android支持库限制了在何处使用它:

  1. RelativeLayout

    android.support.percent.PercentRelativeLayout
    
  2. FrameLayout

    android.support.percent.PercentFrameLayout
    
  3. 如何使用它?

    好吧,首先确保包含依赖关系   你的Android应用中的build.grade(Module: app)

    dependencies {
        compile 'com.android.support:percent:23.3.0'
    }
    

    然后导航到此示例中的xml布局(.MainActivity)

    <android.support.percent.PercentRelativeLayout
    
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:paddingBottom="@dimen/activity_vertical_margin"
      android:paddingLeft="@dimen/activity_horizontal_margin"
      android:paddingRight="@dimen/activity_horizontal_margin"
      android:paddingTop="@dimen/activity_vertical_margin"
      tools:context=".MainActivity">
    
    
      <Button
        android:id="@+id/button"
        android:text="Button"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        app:layout_widthPercent="30%"/>
    
      <Button    
        android:id="@+id/button2"
        android:text="Button 2"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button"
        app:layout_widthPercent="60%"/>
    
      <Button
        android:id="@+id/button3"
        android:text="Button 3"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        app:layout_widthPercent="90%"/>
    
    </android.support.percent.PercentRelativeLayout>
    

    有关详细信息,请查看here

答案 1 :(得分:13)

支持库只添加了百分比布局。

可以这样做

 <android.support.percent.PercentFrameLayout
     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">
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
 </android.support.percent.PercentFrameLayout>

https://developer.android.com/reference/android/support/percent/PercentFrameLayout.html

答案 2 :(得分:11)

您可以使用PercentRelativeLayout, 它是Design Support Library最近未记载的附加内容,它不仅可以指定彼此相对的元素,还可以指定可用空间的总百分比。

结构是

<android.support.percent.PercentRelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <ImageView
        android:id="@+id/imageview"
        android:layout_gravity="center"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        android:src="@mipmap/ic_launcher"
        android:background="#cecece"/>
    <TextView
        android:id="@+id/textview1"
        android:layout_below="@id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_marginStartPercent="25%"
        app:layout_marginEndPercent="25%"
        android:text="PercentRelativeLayout example"
        android:background="#bebebe"/>


</android.support.percent.PercentRelativeLayout>

百分比软件包提供的API支持在您的应用中添加和管理基于百分比的维度。

要使用,您需要将此库添加到your Gradle dependency列表:

dependencies {
    compile 'com.android.support:percent:22.2.0'
    // or compile 'com.android.support:percent:23.1.0'
}

出于演示目的,您可以访问Git android-percent-support-lib-sample

答案 3 :(得分:9)

在26.0.0中删除了PercentFrameLayoutPercentRelativeLayout,您需要使用ConstraintLayout调整TextView的百分比值。

ConstraintLayout是构建Android平台响应式用户界面的强大工具,您可以在此处找到更多详细信息Build a Responsive UI with ConstraintLayout

以下是使用ConstraintLayout调整TextView大小(w = 75%,h = 50%)的示例:

<android.support.constraint.ConstraintLayout
    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.support.constraint.Guideline
        android:id="@+id/ver_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.75"/>

    <android.support.constraint.Guideline
        android:id="@+id/hor_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="0dp"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:layout_marginTop="0dp"
        app:layout_constraintBottom_toTopOf="@+id/hor_guideline"
        app:layout_constraintEnd_toStartOf="@+id/ver_guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

不要忘记将constraint-layout依赖项添加到您的模块build.gradle文件

dependencies {
    ...
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    ...
}

或直接在Layout Editor中编辑您的布局,如下所示:

Layout Editor

因此,TextView宽度为父宽度的75%,高度为父高度的50%:

Image-1

Image-2

答案 4 :(得分:3)

您可以使用PercentRelativeLayout这是RelativeLayout的子类,支持基于百分比的维度和边距。

要使用,您需要将此库添加到Gradle dependency

dependencies {
    compile 'com.android.support:percent:23.1.0'
}

样本结构

<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">
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
</android.support.percent.PercentRelativeLayout>