Question

我想使用带有2行的constraintlayout绘制4个圆圈，每行有2个圆圈，每个圆圈之间有10dp的边距。该片段放在coordinatorlayout下的viewpager中。这是片段的xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/margin_medium"
    android:fillViewport="true">

    <android.support.constraint.ConstraintLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent">

      <View
          android:id="@+id/summary_circle_1"
          android:background="@drawable/shape_circle_shadow"
          android:layout_marginRight="10dp"
          android:layout_marginBottom="10dp"
          android:layout_width="0dp"
          android:layout_height="0dp"
          local:layout_constraintHorizontal_weight="1"
          local:layout_constraintDimensionRatio="H,1:1"
          local:layout_constraintTop_toTopOf="parent"
          local:layout_constraintLeft_toLeftOf="parent"
          local:layout_constraintRight_toLeftOf="@+id/summary_circle_2"
            />
      <View
          android:id="@+id/summary_circle_2"
          android:background="@drawable/shape_circle_shadow"
          android:layout_width="0dp"
          android:layout_height="0dp"
          local:layout_constraintHorizontal_weight="1"
          local:layout_constraintDimensionRatio="H,1:1"
          local:layout_constraintTop_toTopOf="parent"
          local:layout_constraintLeft_toRightOf="@+id/summary_circle_1"
          local:layout_constraintRight_toRightOf="parent"
            />
      <View
          android:id="@+id/summary_circle_3"
          android:background="@drawable/shape_circle_shadow"
          android:layout_marginRight="10dp"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_weight="1"
          local:layout_constraintDimensionRatio="H,1:1"
          local:layout_constraintTop_toBottomOf="@+id/summary_circle_1"
          local:layout_constraintLeft_toLeftOf="parent"
          local:layout_constraintRight_toRightOf="@+id/summary_circle_4"
            />
       <View
          android:id="@+id/summary_circle_4"
          android:background="@drawable/shape_circle_shadow"
          android:layout_width="0dp"
          android:layout_height="0dp"
          local:layout_constraintHorizontal_weight="1"
          local:layout_constraintDimensionRatio="H,1:1"
          local:layout_constraintTop_toTopOf="@+id/summary_circle_3"
          local:layout_constraintLeft_toRightOf="@+id/summary_circle_3"
          local:layout_constraintRight_toRightOf="parent"
            />         


      <TextView
        android:id="@+id/summary_text_1"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:text="text1"
        local:layout_constraintTop_toTopOf="parent"
        local:layout_constraintLeft_toLeftOf="parent"
        local:layout_constraintRight_toLeftOf="@+id/summary_text_2"
        />

      <TextView
        android:id="@+id/summary_text_2"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="text2"
        local:layout_constraintTop_toTopOf="parent"
        local:layout_constraintLeft_toRightOf="@+id/summary_text_1"
        local:layout_constraintRight_toRightOf="parent"
        />

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text3"
        local:layout_constraintTop_toBottomOf="@+id/summary_text_1"
        local:layout_constraintLeft_toLeftOf="parent"
        />



    </android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>

与使用textview执行类似效果不同，无论我使用layout_weight还是layout_constraintHorizontal_weight，都无法分发圆圈空间。如果我修改了第二个圆圈的大小，第一个圆圈将占用剩余的可用空间。一旦我指定了0dp的宽度以匹配约束，第一个占用全部，第二个消失。

在第一行，我只有一个全屏宽度的圆圈，而第二行有一个半圆宽屏宽度＆amp;一个小圆圈。利润也消失了。

另一个问题是片段无法滚动。这就是为什么我在第二排只有半圈。

如何使用可以滚动的constraintlayout将此节目制作为2 x 2相等大小的圆圈？

Answer 1

试试这个。这可能会有所帮助

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="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:padding="5dp"
    android:fillViewport="true">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:id="@+id/summary_circle_1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/shape_circle_shadow"
            local:layout_constraintBottom_toTopOf="@+id/summary_circle_3"
            local:layout_constraintEnd_toStartOf="@+id/summary_circle_2"
            local:layout_constraintHorizontal_bias="0.5"
            local:layout_constraintStart_toStartOf="parent"
            local:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@+id/summary_circle_2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/shape_circle_shadow"
            local:layout_constraintBottom_toTopOf="@+id/summary_circle_4"
            local:layout_constraintEnd_toEndOf="parent"
            local:layout_constraintHorizontal_bias="0.5"
            local:layout_constraintStart_toEndOf="@+id/summary_circle_1"
            local:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@+id/summary_circle_3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/shape_circle_shadow"
            local:layout_constraintBottom_toBottomOf="parent"
            local:layout_constraintEnd_toStartOf="@+id/summary_circle_4"
            local:layout_constraintHorizontal_bias="0.5"
            local:layout_constraintStart_toStartOf="parent"
            local:layout_constraintTop_toBottomOf="@+id/summary_circle_1" />

        <View
            android:id="@+id/summary_circle_4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/shape_circle_shadow"
            local:layout_constraintBottom_toBottomOf="parent"
            local:layout_constraintEnd_toEndOf="parent"
            local:layout_constraintHorizontal_bias="0.5"
            local:layout_constraintStart_toEndOf="@+id/summary_circle_3"
            local:layout_constraintTop_toBottomOf="@+id/summary_circle_2" />


        <TextView
            android:id="@+id/summary_text_1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_weight="1"
            android:text="text1"
            local:layout_constraintLeft_toLeftOf="parent"
            local:layout_constraintRight_toLeftOf="@+id/summary_text_2"
            local:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/summary_text_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="text2"
            local:layout_constraintLeft_toRightOf="@+id/summary_text_1"
            local:layout_constraintRight_toRightOf="parent"
            local:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text3"
            local:layout_constraintLeft_toLeftOf="parent"
            local:layout_constraintTop_toBottomOf="@+id/summary_text_1" />


    </android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>

带有2 x 2个圆圈的ConstraintLayout

1 个答案: