如何在 Android 中以百分比为文本视图设置布局文件？

Question

我从 android 开发开始，想知道如何使小部件准确地适合我的 android 画布。这是图片。 我的目标是根据百分比填充小部件。

例如 FIRST FIRST 一个小部件 - 文本视图的宽度和高度应为 50%。下一个小部件 - 文本视图的宽度和高度应为 50%。

屏幕的下半部分 - 右侧应该有三个文本视图 - 每个文本视图应该有 1/3 的高度，高度应该是 50%。我该怎么做？

在底部，我想放置滑块。这是UI设计的屏幕截图。



这是我糟糕的尝试。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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="com.tune2wizard.modernartui.MainActivity" >

    <TextView
        android:id="@+id/textViewLabel"
        android:layout_width="fill_parent"
        android:layout_height="25dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_gravity="top|start"
        android:background="#ff0000ff"
        android:textColor="#ffffffff"
        android:text="Modern Art UI" />

    <LinearLayout
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_below="@+id/name">

     <TextView
        android:id="@+id/textFirstFirst"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0000ff"
        android:textColor="#ffffffff"
        android:text=" HELLO FIRST FIRST" />

    </LinearLayout>
</RelativeLayout>

Answer 1

阅读“layout_weight”参数，你会明白的。我也是从 Coursera 开始的，祝你好运）

• http://developer.android.com/guide/topics/ui/layout/linear.html
• Android Layout Weight
• Linear Layout and weight in Android
• What does android:layout_weight mean?

对于边框，请检查“layout_margin”...

Answer 2

您必须将所有子视图放在LinearLayout 而不是RelativeLayout。因此，您可以使用weight 参数根据您的规范来适应视图。

例如，要强制视图适应屏幕的一半，您将其宽度设置为 0，将其重量设置为 1，然后将另一个视图放在宽度为 0 和重量为 1 的一侧。

Answer 3

您可以使用带有“权重”的嵌套线性布局，例如：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <View
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"/>

    <LinearLayout android:orientation="horizontal"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:layout_above="@+id/slider">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".5"
                android:background="@android:color/holo_blue_light"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".5"
                android:background="@android:color/holo_purple"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".33"
                android:background="@android:color/holo_red_dark"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".33"
                android:background="@android:color/white"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".33"
                android:background="@android:color/holo_blue_dark"/>

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

Answer 4

这样的事情可以解决问题：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">


  <LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="#9b59b6"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#95a5a6" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#f39c12" />
  </LinearLayout>

  <LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="2"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#9b59b6" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#fffff" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#e74c3c" />

  </LinearLayout>
</LinearLayout>