ConstraintLayout按钮的中心和大小为ViewPager的1/3

Question

我使用的是ConstraintLayout，我想在ViewPager的中心显示按钮，但宽度和高度都是本页面的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而不使用代码。

UPDATE

按钮添加到容易明白我想要什么。

Answer 1

这里是你可以在不增加这么多的按钮，也没有指导方针做什么。

下面的代码：

<?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作为容器可以导致按钮隐藏，当片段将是可见的。

Answer 2

您可以在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>