ConstraintLayout中的动态circleRadius
Dynamic circleRadius in ConstraintLayout
在我的应用程序中，我有以下布局，它使用其内部 ConstraintLayout 的新 circular positioning 属性。我认为它非常好，因为它不对除 circleRadius.
以外的任何视图大小使用固定的 dp 值
这正是我的问题：我的 circleRadius 也应该是动态的，但根据文档，它只需要维度。所以我需要的是相对于 constraintCircle 尺寸的尺寸。这可能吗？
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
tools:context="com.cilenco.ui.activities.OnboardingActivity"
tools:theme="@style/AppTheme.Onboarding">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_above="@id/dividor" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:paddingStart="@dimen/spacing_normal"
android:paddingEnd="@dimen/spacing_normal"
android:layout_above="@id/dividor">
<ImageView
android:id="@+id/icon"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
android:adjustViewBounds="true"
android:contentDescription="@string/empty"
android:cropToPadding="true"
android:paddingLeft="72dp"
android:paddingRight="72dp"
android:paddingBottom="72dp"
android:paddingTop="60dp"
android:tint="@color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="visible"/>
<ImageView
android:id="@+id/icon_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
android:contentDescription="@string/empty"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintCircle="@id/icon"
app:layout_constraintCircleRadius="160dp"
app:layout_constraintCircleAngle="250" />
<ImageView
android:id="@+id/icon_bottom_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
android:contentDescription="@string/empty"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintCircle="@id/icon"
app:layout_constraintCircleRadius="165dp"
app:layout_constraintCircleAngle="205" />
<ImageView
android:id="@+id/icon_bottom_right"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
android:contentDescription="@string/empty"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintCircle="@id/icon"
app:layout_constraintCircleRadius="165dp"
app:layout_constraintCircleAngle="155" />
<ImageView
android:id="@+id/icon_right"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
android:contentDescription="@string/empty"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintCircle="@id/icon"
app:layout_constraintCircleRadius="160dp"
app:layout_constraintCircleAngle="110" />
</android.support.constraint.ConstraintLayout>
<View
android:id="@+id/dividor"
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha="0.4"
android:background="@color/color_primary_dark"
android:layout_above="@id/tabDots" />
<android.support.design.widget.TabLayout
android:id="@+id/tabDots"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/color_primary"
app:tabBackground="@drawable/tab_selector"
android:layout_alignParentBottom="true"
app:tabIndicatorHeight="0dp"
app:tabGravity="center" />
<TextView
android:id="@+id/skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/skip"
android:padding="@dimen/spacing_normal"
android:textAllCaps="true"
android:textColor="@android:color/white"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_gravity="center_vertical"
android:layout_toStartOf="@+id/next"
android:background="?selectableItemBackground" />
<TextView
android:id="@+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next"
android:padding="@dimen/spacing_normal"
android:textAllCaps="true"
android:textColor="@android:color/white"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_gravity="center_vertical"
android:background="?selectableItemBackground" />
</RelativeLayout>
请注意，此布局仅用于我的入职屏幕，因此它只能在纵向模式下工作。您对如何解决此问题有任何想法，或者您会推荐一个没有 ConstraintLayout 的完整其他布局吗？如果是你会如何设计圆属性?
如果您对如何优化此布局还有其他想法，请告诉我。我不太擅长设计适用于所有屏幕的响应式布局...
我建议您放弃此特定布局的循环定位，但坚持使用 ConstraintLayout。这是一种通过将位于中心图标周围的圆圈中的视图限制在图标 ImageView 的边缘并使用偏差来使其为您工作的方法。随着设备的缩放，布局和图标将保持其相对位置。
以下是两种布局在两种不同设备上的外观：
我通过删除 RelativeLayout 和 ViewPager 简化了此演示的布局。这个概念仍然适用于重新引入的这些。
XML布局
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/dividor"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#d7d1d1"
android:paddingEnd="@dimen/spacing_normal"
android:paddingStart="@dimen/spacing_normal">
<ImageView
android:id="@+id/icon"
android:layout_width="match_parent"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:paddingBottom="72dp"
android:paddingLeft="72dp"
android:paddingRight="72dp"
android:paddingTop="60dp"
android:tint="@color/colorPrimaryDark"
android:visibility="visible"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.12"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription"
tools:src="@drawable/ic_launcher_foreground" />
<ImageView
android:id="@+id/icon_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintBottom_toTopOf="@+id/icon_bottom_left"
app:layout_constraintEnd_toEndOf="@+id/icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/icon"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
tools:src="@drawable/ic_launcher_foreground"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/icon_bottom_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintBottom_toBottomOf="@id/icon"
app:layout_constraintEnd_toEndOf="@id/icon"
app:layout_constraintHorizontal_bias="0.28"
app:layout_constraintStart_toStartOf="@id/icon"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
tools:src="@drawable/ic_launcher_foreground"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/icon_bottom_right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintBottom_toBottomOf="@+id/icon_bottom_left"
app:layout_constraintEnd_toEndOf="@+id/icon"
app:layout_constraintHorizontal_bias="0.73"
app:layout_constraintStart_toStartOf="@id/icon"
app:layout_constraintWidth_percent="0.20"
tools:src="@drawable/ic_launcher_foreground"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/icon_right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintBottom_toBottomOf="@+id/icon_left"
app:layout_constraintEnd_toEndOf="@+id/icon"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="@+id/icon"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
tools:src="@drawable/ic_launcher_foreground"
tools:ignore="ContentDescription" />
</android.support.constraint.ConstraintLayout>
在我的应用程序中，我有以下布局，它使用其内部 ConstraintLayout 的新 circular positioning 属性。我认为它非常好，因为它不对除 circleRadius.
这正是我的问题：我的 circleRadius 也应该是动态的，但根据文档，它只需要维度。所以我需要的是相对于 constraintCircle 尺寸的尺寸。这可能吗？
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
tools:context="com.cilenco.ui.activities.OnboardingActivity"
tools:theme="@style/AppTheme.Onboarding">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_above="@id/dividor" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:paddingStart="@dimen/spacing_normal"
android:paddingEnd="@dimen/spacing_normal"
android:layout_above="@id/dividor">
<ImageView
android:id="@+id/icon"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
android:adjustViewBounds="true"
android:contentDescription="@string/empty"
android:cropToPadding="true"
android:paddingLeft="72dp"
android:paddingRight="72dp"
android:paddingBottom="72dp"
android:paddingTop="60dp"
android:tint="@color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="visible"/>
<ImageView
android:id="@+id/icon_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
android:contentDescription="@string/empty"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintCircle="@id/icon"
app:layout_constraintCircleRadius="160dp"
app:layout_constraintCircleAngle="250" />
<ImageView
android:id="@+id/icon_bottom_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
android:contentDescription="@string/empty"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintCircle="@id/icon"
app:layout_constraintCircleRadius="165dp"
app:layout_constraintCircleAngle="205" />
<ImageView
android:id="@+id/icon_bottom_right"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
android:contentDescription="@string/empty"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintCircle="@id/icon"
app:layout_constraintCircleRadius="165dp"
app:layout_constraintCircleAngle="155" />
<ImageView
android:id="@+id/icon_right"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
android:contentDescription="@string/empty"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintCircle="@id/icon"
app:layout_constraintCircleRadius="160dp"
app:layout_constraintCircleAngle="110" />
</android.support.constraint.ConstraintLayout>
<View
android:id="@+id/dividor"
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha="0.4"
android:background="@color/color_primary_dark"
android:layout_above="@id/tabDots" />
<android.support.design.widget.TabLayout
android:id="@+id/tabDots"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/color_primary"
app:tabBackground="@drawable/tab_selector"
android:layout_alignParentBottom="true"
app:tabIndicatorHeight="0dp"
app:tabGravity="center" />
<TextView
android:id="@+id/skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/skip"
android:padding="@dimen/spacing_normal"
android:textAllCaps="true"
android:textColor="@android:color/white"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_gravity="center_vertical"
android:layout_toStartOf="@+id/next"
android:background="?selectableItemBackground" />
<TextView
android:id="@+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next"
android:padding="@dimen/spacing_normal"
android:textAllCaps="true"
android:textColor="@android:color/white"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_gravity="center_vertical"
android:background="?selectableItemBackground" />
</RelativeLayout>
请注意，此布局仅用于我的入职屏幕，因此它只能在纵向模式下工作。您对如何解决此问题有任何想法，或者您会推荐一个没有 ConstraintLayout 的完整其他布局吗？如果是你会如何设计圆属性?
如果您对如何优化此布局还有其他想法，请告诉我。我不太擅长设计适用于所有屏幕的响应式布局...
我建议您放弃此特定布局的循环定位，但坚持使用 ConstraintLayout。这是一种通过将位于中心图标周围的圆圈中的视图限制在图标 ImageView 的边缘并使用偏差来使其为您工作的方法。随着设备的缩放，布局和图标将保持其相对位置。
以下是两种布局在两种不同设备上的外观：
我通过删除 RelativeLayout 和 ViewPager 简化了此演示的布局。这个概念仍然适用于重新引入的这些。
XML布局
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/dividor"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#d7d1d1"
android:paddingEnd="@dimen/spacing_normal"
android:paddingStart="@dimen/spacing_normal">
<ImageView
android:id="@+id/icon"
android:layout_width="match_parent"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:paddingBottom="72dp"
android:paddingLeft="72dp"
android:paddingRight="72dp"
android:paddingTop="60dp"
android:tint="@color/colorPrimaryDark"
android:visibility="visible"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.12"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription"
tools:src="@drawable/ic_launcher_foreground" />
<ImageView
android:id="@+id/icon_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintBottom_toTopOf="@+id/icon_bottom_left"
app:layout_constraintEnd_toEndOf="@+id/icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/icon"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
tools:src="@drawable/ic_launcher_foreground"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/icon_bottom_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintBottom_toBottomOf="@id/icon"
app:layout_constraintEnd_toEndOf="@id/icon"
app:layout_constraintHorizontal_bias="0.28"
app:layout_constraintStart_toStartOf="@id/icon"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
tools:src="@drawable/ic_launcher_foreground"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/icon_bottom_right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintBottom_toBottomOf="@+id/icon_bottom_left"
app:layout_constraintEnd_toEndOf="@+id/icon"
app:layout_constraintHorizontal_bias="0.73"
app:layout_constraintStart_toStartOf="@id/icon"
app:layout_constraintWidth_percent="0.20"
tools:src="@drawable/ic_launcher_foreground"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/icon_right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:adjustViewBounds="true"
android:padding="@dimen/spacing_normal"
app:layout_constraintBottom_toBottomOf="@+id/icon_left"
app:layout_constraintEnd_toEndOf="@+id/icon"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="@+id/icon"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.20"
tools:src="@drawable/ic_launcher_foreground"
tools:ignore="ContentDescription" />
</android.support.constraint.ConstraintLayout>