问题
In my application I have following layout which uses the new circular positioning property of its inner ConstraintLayout. I think it is pretty good because it does not use fixed dp values for any view size except the circleRadius.
And exactly that is my problem: My circleRadius should also be dynamic but accordingly to the documentation it only takes dimensions. So I need is a dimension relative to the constraintCircle size. Is that possible?
<?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>
Note that this layout is only used in my onboarding screen so it only has to work in portrait mode. Do you have any ideas how to solve this problem or would you recommend a complete other layout without ConstraintLayout? If so how would you design the circle property?
If you also have other ideas how to optimize this layout please let me know. I'm not really good at designing responsive layout that works on all screens...
回答1:
I suggest that you abandon circular positioning for this particular layout but stick with ConstraintLayout. Here is a way to make it work for you by constraining the views that are positioned in a circle around the center icon to the edges of the icon's ImageView and using bias. As the device scales, so will the layout and the icons will keep their relative placement.
Here is how the two layouts look on two different devices:
I have simplified the layout for this demo by removing the RelativeLayout and ViewPager. The concept will still work with these reintroduced.
XML Layout
<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>
来源：https://stackoverflow.com/questions/49232415/dynamic-circleradius-in-constraintlayout