Question

在我的应用程序中，我有以下布局，它使用内部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的情况下使用完整的其他布局？如果是这样，您将如何设计圆形属性？

如果您还有其他想法如何优化此布局，请告诉我们。我并不擅长设计适用于所有屏幕的响应式布局......

Answer 1

我建议您放弃针对此特定布局的循环定位，但坚持使用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中的动态circleRadius

1 个答案: