Question

我想实现这些要点（第一张图片）：

Toolbar身高必须是屏幕高度的35％
ImageView的中心必须放在Toolbar的底部（如图所示）
ImageView的宽度必须是屏幕宽度的33％
ImageView的比例必须为1：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"
        tools:context="io.inov.nepalwaterapp.UserProfileActivity">

        <android.support.constraint.Guideline
            android:id="@+id/guidelineToolbarHeight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent=".35" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/colorPrimary"
            android:theme="@style/ThemeOverlay.MyApp.ActionBar"
            app:layout_constraintBottom_toBottomOf="@id/guidelineToolbarHeight"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent">

        </android.support.v7.widget.Toolbar>

<android.support.constraint.Guideline
            android:id="@+id/guidelineImageStart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent=".33" />

        <android.support.constraint.Guideline
            android:id="@+id/guidelineImageEnd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent=".66" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:src="@drawable/avatar_diver"
            app:layout_constraintDimensionRatio="h,1:1"
            app:layout_constraintBottom_toBottomOf="@id/toolbar"
            app:layout_constraintLeft_toLeftOf="@id/guidelineImageStart"
            app:layout_constraintRight_toRightOf="@id/guidelineImageEnd"
            app:layout_constraintTop_toBottomOf="@id/toolbar" />

    </android.support.constraint.ConstraintLayout>

上述代码的结果是：

请帮我找到问题。

感谢。

Answer 1

看起来您遇到的问题是尺寸比率没有生效，因为图像视图的高度为0dp，并且您将图像视图的顶部和底部约束到底部工具栏并强制高度为零。恕我直言，这应该有效，但事实并非如此，所以这是一个解决方法。

在高度的70％处定义第二个水平指南（请参阅下面的XML中的guidelineToolbarHeight2），并在父顶部（实际上是工具栏的顶部）和此新指南之间约束图像视图。这会将图像正确定位在工具栏的底部。我认为其他一切都还可以。

[我更喜欢的第二种选择是将图像视图的高度设置为像100000dp这样大的高度。它只需要比你想要的宽度大。]

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.Guideline
        android:id="@+id/guidelineToolbarHeight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".35" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineToolbarHeight2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".70" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="@id/guidelineToolbarHeight"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </android.support.v7.widget.Toolbar>

    <android.support.constraint.Guideline
        android:id="@+id/guidelineImageStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".33" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineImageEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".66" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/avatar_diver"
        app:layout_constraintBottom_toTopOf="@id/guidelineToolbarHeight2"
        app:layout_constraintDimensionRatio="W,1:1"
        app:layout_constraintLeft_toLeftOf="@id/guidelineImageStart"
        app:layout_constraintRight_toRightOf="@id/guidelineImageEnd"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

这是一个较短的版本，但结果是一样的：

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        app:layout_constraintHeight_percent="0.35"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/avatar_diver"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintDimensionRatio="H,1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/toolbar"
        app:layout_constraintWidth_percent="0.33" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.70" />

</android.support.constraint.ConstraintLayout>

Answer 2

这是解决方案：

<?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">

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#019AE8"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".35"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".70" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".33"
        tools:src="@drawable/ic_user" />

</android.support.constraint.ConstraintLayout>

说明：您的工具栏占据了35％的高度，并且您不能对垂直偏差使用负值，因此..我添加了参考线以取得与工具栏相同的高度，并将其移动到底部并增加了35％->这样总计两个视图的高度等于70％。现在，我们可以将imageView限制在工具栏的顶部和指南的底部。这样我们的imageView居中。即使在横向模式下也可以使用。

Answer 3

如果您想支持多种屏幕尺寸，那么我认为您必须以编程方式执行此操作。我稍后会讨论原因。

我的设备是小米米A1，分辨率为1080：1920。因此长宽比为16：9。我将首先讨论该设备的解决方案。

我们的目标是将ImageView的中心与guidelineToolbarHeight对齐，该中心位于屏幕高度的35％处。现在，如果我们可以绘制另一个指南（guidelineImageTop）来设置ImageView的顶部与之对齐，那么我们的问题就会得到解决。问题是，我们应该绘制屏幕高度的百分比guidelineImageTop。

当我们ImageView的高度等于宽度时，让我们从计算宽度开始。

width = 33% of 1080 = 356.4
height = width = 356.4
halfHeight = height/2 = 178.2

我们的guidelineImageTop应该halfHeight以上guidelineToolbarHeight。

guidelineToolbarHeights position in pixel = 35% of 1920 = 672
guidelineImageTops position in pixel = 672 - 178.2 = 493.8
Imagine, x% of 1920 = 493.8
x = 25.7

因此，我们的guidelineImageTop应该是屏幕高度的25％。我编辑了你的代码，如下所示：

<?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"
tools:context="me.mazid.test.MainActivity">

<android.support.constraint.Guideline
    android:id="@+id/guidelineToolbarHeight"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".35" />

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/colorPrimary"
    android:theme="@style/ThemeOverlay.MyApp.ActionBar"
    app:layout_constraintBottom_toBottomOf="@id/guidelineToolbarHeight"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">

</android.support.v7.widget.Toolbar>

<android.support.constraint.Guideline
    android:id="@+id/guidelineImageStart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent=".33" />

<android.support.constraint.Guideline
    android:id="@+id/guidelineImageEnd"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent=".66" />

<android.support.constraint.Guideline
    android:id="@+id/guidelineImageTop"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".25" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:src="@drawable/avatar_diver"
    app:layout_constraintDimensionRatio="h,1:1"
    app:layout_constraintBottom_toBottomOf="@id/toolbar"
    app:layout_constraintLeft_toLeftOf="@id/guidelineImageStart"
    app:layout_constraintRight_toRightOf="@id/guidelineImageEnd"
    app:layout_constraintTop_toTopOf="@id/guidelineImageTop" />

<强>确认：

如果以横向模式旋转设备，此解决方案将无法使用。因为宽高比会改变。
要支持具有不同宽高比的多个设备，您可能必须计算设备高度的百分比并以编程方式定位guidelineImageTop。

Answer 4

目前无法直接使用ConstraintLayout实现您想要实现的目标。您必须在Java代码中计算图像最终目标。请遵循以下代码：

XML :

 <?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.support.constraint.Guideline
        android:id="@+id/guidelineToolbarHeight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".35" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineToolbarHeight2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".35" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="@id/guidelineToolbarHeight"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </android.support.v7.widget.Toolbar>

    <android.support.constraint.Guideline
        android:id="@+id/guidelineImageStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".33" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineImageEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".66" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="false"
        android:cropToPadding="false"
        android:src="@mipmap/ic_launcher_round"
        app:layout_constraintBottom_toBottomOf="@id/toolbar"
        app:layout_constraintTop_toBottomOf="@id/guidelineToolbarHeight2"
        app:layout_constraintDimensionRatio="h,1:1"
        app:layout_constraintLeft_toLeftOf="@id/guidelineImageStart"
        app:layout_constraintRight_toRightOf="@id/guidelineImageEnd" />

</android.support.constraint.ConstraintLayout>

Java Code :

import android.os.Bundle;
import android.support.constraint.ConstraintLayout;
import android.support.constraint.Guideline;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.ViewTreeObserver;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    private ImageView iv;
    private int imageHeight, screenHeight;
    private Guideline guideLine;
    private ConstraintLayout.LayoutParams params;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        iv = findViewById(R.id.imageView);

        guideLine = findViewById(R.id.guidelineToolbarHeight2);
        params = (ConstraintLayout.LayoutParams) guideLine.getLayoutParams();

        //Get Display Height
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        screenHeight = displayMetrics.heightPixels;

        //Get ImageView Current Height
        ViewTreeObserver vto = iv.getViewTreeObserver();
        vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            public boolean onPreDraw() {
                iv.getViewTreeObserver().removeOnPreDrawListener(this);
                imageHeight = iv.getMeasuredHeight();

                //getting screen height where guideline will be placed
                float predictedGuidelinePlacementHeight = ((screenHeight * 35) / 100) - (imageHeight/2); // 35 is your guideline percentage for toolbar

                //change guideline constraint percentage
                params.guidePercent = ((predictedGuidelinePlacementHeight * 100) / screenHeight) / 100;
                guideLine.setLayoutParams(params);

                return true;
            }
        });




    }
}

Answer 5

＆＃34; 1.1.0-beta3＆＃34; ConstraintLayout的发布允许使用百分比维度和更多很酷的功能。

只需设置＆＃34; layout_constraintHeight_default＆＃34;属于＆＃34;百分比＆＃34; （使用百分比单位），并使用＆＃34; layout_constraintHeight_percent＆＃34;设置百分比。（宽度相关属性也可用）

这是解决方案

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent=".35"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Space
        android:id="@+id/space"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"
        app:layout_constraintBottom_toBottomOf="@+id/toolbar" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="@+id/space"
        app:layout_constraintTop_toTopOf="@+id/space"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent=".33" />

</android.support.constraint.ConstraintLayout>

正如您所看到的，我必须添加Space窗口小部件并将其高度设置为200dp，因为现在百分比尺寸在居中于另一个窗口小部件边缘时会折叠。

ConstraintLayout：在工具栏上重叠ImageView并根据GuideLine的宽度设置图像高度

我想实现这些要点（第一张图片）：

我的代码是：

上述代码的结果是：

5 个答案: