ConstraintLayout 按钮居中，大小为 ViewPager 的 1/3
ConstraintLayout button in centre and size as 1/3 of ViewPager
我正在使用 ConstraintLayout 并且我想在 ViewPager 的中心显示按钮，但是宽度和高度是这个 pager.I 使用的水平和垂直链的 1/3。并得到了下一个：
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="96dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toTopOf="@+id/send_button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="@id/view_pager"
app:layout_constraintRight_toLeftOf="@+id/button2" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintBottom_toBottomOf="@id/view_pager"
app:layout_constraintTop_toBottomOf="@id/button2"/>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintTop_toTopOf="@id/view_pager"
app:layout_constraintBottom_toTopOf="@id/button2"/>
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintVertical_weight="1"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/button4"
app:layout_constraintBottom_toTopOf="@id/button5"
app:layout_constraintLeft_toRightOf="@+id/button1"
app:layout_constraintRight_toLeftOf="@+id/button3" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/button2"
app:layout_constraintRight_toRightOf="@id/view_pager" />
<android.support.constraint.Guideline
android:id="@+id/vertical_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="@+id/send_button"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginBottom="@dimen/basic_keyline"
android:layout_marginEnd="@dimen/basic_keyline"
android:layout_marginLeft="8dp"
android:layout_marginRight="@dimen/basic_keyline"
android:layout_marginStart="8dp"
android:background="@color/colorAccent"
android:text="@string/send"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/vertical_guideline"
app:layout_constraintRight_toRightOf="parent" />
但我觉得这种做法太可怕了。也许有人知道更好的解决方案，请帮助我。我只想使用 xml 而不使用代码。
更新
添加了按钮以方便理解我想要什么。
您可以在 PageViewer 中插入一个 ConstraintLayout，这样您就可以使用 GuideLines 来约束 Button。
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="96dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toTopOf="@+id/send_button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.constraint.Guideline
android:id="@+id/left_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="@+id/right_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.67" />
<android.support.constraint.Guideline
android:id="@+id/top_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="@+id/bottom_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.67" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintTop_toBottomOf="@id/top_guideline"
app:layout_constraintBottom_toTopOf="@id/bottom_guideline"
app:layout_constraintLeft_toRightOf="@+id/left_guideline"
app:layout_constraintRight_toLeftOf="@+id/right_guideline" />
</android.support.constraint.ConstraintLayout>
下面是您无需添加那么多按钮也无需指南即可完成的操作。
代码如下：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:id="@+id/apbLay1"
tools:context="studios.brilliant.com.commutech.Home">
<android.support.constraint.ConstraintLayout
android:layout_marginBottom="152dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="0dp"
android:layout_width="0dp"
>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<Button
android:id="@+id/button2"
android:layout_width="0dp"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".333"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".333"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
这将为您提供所需的准确输出，您将获得所提供的屏幕截图中的信息。
.333 是父级的 33.3%，几乎等于 1/3。
额外的布局是为 viewpager 和按钮添加一个容器，因为使用 viewpager 作为容器会导致按钮在 fragment 可见时隐藏。
我正在使用 ConstraintLayout 并且我想在 ViewPager 的中心显示按钮，但是宽度和高度是这个 pager.I 使用的水平和垂直链的 1/3。并得到了下一个：
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="96dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toTopOf="@+id/send_button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="@id/view_pager"
app:layout_constraintRight_toLeftOf="@+id/button2" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintBottom_toBottomOf="@id/view_pager"
app:layout_constraintTop_toBottomOf="@id/button2"/>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintTop_toTopOf="@id/view_pager"
app:layout_constraintBottom_toTopOf="@id/button2"/>
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintVertical_weight="1"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@id/button4"
app:layout_constraintBottom_toTopOf="@id/button5"
app:layout_constraintLeft_toRightOf="@+id/button1"
app:layout_constraintRight_toLeftOf="@+id/button3" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/button2"
app:layout_constraintRight_toRightOf="@id/view_pager" />
<android.support.constraint.Guideline
android:id="@+id/vertical_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="@+id/send_button"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginBottom="@dimen/basic_keyline"
android:layout_marginEnd="@dimen/basic_keyline"
android:layout_marginLeft="8dp"
android:layout_marginRight="@dimen/basic_keyline"
android:layout_marginStart="8dp"
android:background="@color/colorAccent"
android:text="@string/send"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/vertical_guideline"
app:layout_constraintRight_toRightOf="parent" />
但我觉得这种做法太可怕了。也许有人知道更好的解决方案，请帮助我。我只想使用 xml 而不使用代码。
更新
添加了按钮以方便理解我想要什么。
您可以在 PageViewer 中插入一个 ConstraintLayout，这样您就可以使用 GuideLines 来约束 Button。
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="96dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toTopOf="@+id/send_button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.constraint.Guideline
android:id="@+id/left_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="@+id/right_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.67" />
<android.support.constraint.Guideline
android:id="@+id/top_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="@+id/bottom_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.67" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintTop_toBottomOf="@id/top_guideline"
app:layout_constraintBottom_toTopOf="@id/bottom_guideline"
app:layout_constraintLeft_toRightOf="@+id/left_guideline"
app:layout_constraintRight_toLeftOf="@+id/right_guideline" />
</android.support.constraint.ConstraintLayout>
下面是您无需添加那么多按钮也无需指南即可完成的操作。
代码如下：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:id="@+id/apbLay1"
tools:context="studios.brilliant.com.commutech.Home">
<android.support.constraint.ConstraintLayout
android:layout_marginBottom="152dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="0dp"
android:layout_width="0dp"
>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<Button
android:id="@+id/button2"
android:layout_width="0dp"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".333"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".333"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
这将为您提供所需的准确输出，您将获得所提供的屏幕截图中的信息。
.333 是父级的 33.3%，几乎等于 1/3。
额外的布局是为 viewpager 和按钮添加一个容器，因为使用 viewpager 作为容器会导致按钮在 fragment 可见时隐藏。