在ConstraintLayout中的另一个ImageView之上的ImageView

时间:2018-08-22 05:59:38

标签: android android-constraintlayout

enter image description here

我正在使用ConstraintLayout来获取此结构。但是在最后一个图像中,加号图标imageview隐藏了一半。而且,在所有三个图像中,如果设置图像,则加号或叉号的一部分会被隐藏。我尝试设置elevationtranlationZ,但对我来说不起作用。

请帮助我解决此问题。

这是我的代码段。

<!-- Constraint Layout -->


  <android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingEnd="@dimen/_16dp"
                android:paddingStart="@dimen/_16dp"
                android:paddingTop="@dimen/_16dp"
                tools:ignore="ContentDescription">

                <!-- Profile Pic -->

                <ImageView
                    android:id="@+id/img_profilePic"
                    android:layout_width="@dimen/_80dp"
                    android:layout_height="@dimen/_80dp"
                    android:background="@color/bg_light_gray"
                    app:layout_constraintStart_toStartOf="parent" />

                <ImageView
                    android:id="@+id/img_profilePic_delete"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/icon_cross"
                    app:layout_constraintBottom_toBottomOf="@+id/img_profilePic"
                    app:layout_constraintEnd_toEndOf="@+id/img_profilePic"
                    app:layout_constraintStart_toEndOf="@+id/img_profilePic"
                    app:layout_constraintTop_toBottomOf="@+id/img_profilePic" />

                <!-- Gallery Pic 1 -->

                <ImageView
                    android:id="@+id/img_galleryPic1"
                    android:layout_width="@dimen/_80dp"
                    android:layout_height="@dimen/_80dp"
                    android:background="@color/bg_light_gray"
                    app:layout_constraintEnd_toStartOf="@+id/img_galleryPic2"
                    app:layout_constraintStart_toEndOf="@+id/img_profilePic" />

                <ImageView
                    android:id="@+id/img_galleryPic1_add"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/icon_add_circle"

                    app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic1"
                    app:layout_constraintEnd_toEndOf="@+id/img_galleryPic1"
                    app:layout_constraintStart_toEndOf="@+id/img_galleryPic1"
                    app:layout_constraintTop_toBottomOf="@+id/img_galleryPic1" />

                <ImageView
                    android:id="@+id/img_galleryPic1_delete"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/icon_cross"
                    android:visibility="gone"
                    app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic1"
                    app:layout_constraintEnd_toEndOf="@+id/img_galleryPic1"
                    app:layout_constraintStart_toEndOf="@+id/img_galleryPic1"
                    app:layout_constraintTop_toBottomOf="@+id/img_galleryPic1" />

                <!-- Gallery Pic 2 -->

                <ImageView
                    android:id="@+id/img_galleryPic2"
                    android:layout_width="@dimen/_80dp"
                    android:layout_height="@dimen/_80dp"
                    android:background="@color/bg_light_gray"
                    app:layout_constraintEnd_toEndOf="parent" />


                <ImageView
                    android:id="@+id/img_galleryPic2_add"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/icon_add_circle"
                    app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic2"
                    app:layout_constraintEnd_toEndOf="@+id/img_galleryPic2"
                    app:layout_constraintHorizontal_bias="1.0"
                    app:layout_constraintStart_toEndOf="@+id/img_galleryPic2"
                    app:layout_constraintTop_toBottomOf="@+id/img_galleryPic2" />

                <ImageView
                    android:id="@+id/img_galleryPic2_delete"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/icon_cross"
                    android:visibility="gone"
                    app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic2"
                    app:layout_constraintEnd_toEndOf="@+id/img_galleryPic2"
                    app:layout_constraintStart_toEndOf="@+id/img_galleryPic2"
                    app:layout_constraintTop_toBottomOf="@+id/img_galleryPic2" />


            </android.support.constraint.ConstraintLayout>

2 个答案:

答案 0 :(得分:1)

尝试此=>您必须为此设置适当的约束条件

将第0个画廊图像结束约束赋予第一个画廊图像的开始约束,将第2个画廊图像起始约束赋予第一个画廊图像的结束约束

您也可以使用链条

<android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingEnd="@dimen/_16dp"
            android:paddingStart="@dimen/_16dp"
            android:paddingTop="@dimen/_16dp"
            tools:ignore="ContentDescription">

            <!-- Profile Pic -->

            <ImageView
                android:id="@+id/img_profilePic"
                android:layout_width="@dimen/_80dp"
                android:layout_height="@dimen/_80dp"
                android:background="@color/bg_light_gray"
                app:layout_constraintEnd_toStartOf="@+id/img_galleryPic1"
                app:layout_constraintStart_toStartOf="parent" />

            <ImageView
                android:id="@+id/img_profilePic_delete"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon_cross"
                app:layout_constraintBottom_toBottomOf="@+id/img_profilePic"
                app:layout_constraintEnd_toEndOf="@+id/img_profilePic"
                app:layout_constraintStart_toEndOf="@+id/img_profilePic"
                app:layout_constraintTop_toBottomOf="@+id/img_profilePic" />

            <!-- Gallery Pic 1 -->

            <ImageView
                android:id="@+id/img_galleryPic1"
                android:layout_width="@dimen/_80dp"
                android:layout_height="@dimen/_80dp"
                android:background="@color/bg_light_gray"
                app:layout_constraintEnd_toStartOf="@+id/img_galleryPic2"
                app:layout_constraintStart_toEndOf="@+id/img_profilePic" />

            <ImageView
                android:id="@+id/img_galleryPic1_add"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon_add_circle"

                app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic1"
                app:layout_constraintEnd_toEndOf="@+id/img_galleryPic1"
                app:layout_constraintStart_toEndOf="@+id/img_galleryPic1"
                app:layout_constraintTop_toBottomOf="@+id/img_galleryPic1" />

            <ImageView
                android:id="@+id/img_galleryPic1_delete"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon_cross"
                android:visibility="gone"
                app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic1"
                app:layout_constraintEnd_toEndOf="@+id/img_galleryPic1"
                app:layout_constraintStart_toEndOf="@+id/img_galleryPic1"
                app:layout_constraintTop_toBottomOf="@+id/img_galleryPic1" />

            <!-- Gallery Pic 2 -->

            <ImageView
                android:id="@+id/img_galleryPic2"
                android:layout_width="@dimen/_80dp"
                android:layout_height="@dimen/_80dp"
                android:background="@color/bg_light_gray"
                app:layout_constraintStart_toEndOf="@+id/img_galleryPic1"
                app:layout_constraintEnd_toEndOf="parent" />


            <ImageView
                android:id="@+id/img_galleryPic2_add"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon_add_circle"
                app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic2"
                app:layout_constraintEnd_toEndOf="@+id/img_galleryPic2"
                app:layout_constraintHorizontal_bias="1.0"
                app:layout_constraintStart_toEndOf="@+id/img_galleryPic2"
                app:layout_constraintTop_toBottomOf="@+id/img_galleryPic2" />

            <ImageView
                android:id="@+id/img_galleryPic2_delete"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon_cross"
                android:visibility="gone"
                app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic2"
                app:layout_constraintEnd_toEndOf="@+id/img_galleryPic2"
                app:layout_constraintStart_toEndOf="@+id/img_galleryPic2"
                app:layout_constraintTop_toBottomOf="@+id/img_galleryPic2" />


        </android.support.constraint.ConstraintLayout>

答案 1 :(得分:0)

放置水平滚动视图

<HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingEnd="16dp"
        android:paddingStart="16dp"
        android:paddingTop="16dp"
        tools:ignore="ContentDescription">

        <!-- Profile Pic -->

        <ImageView
            android:id="@+id/img_profilePic"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@color/black"
            app:layout_constraintStart_toStartOf="parent" />

        <ImageView
            android:id="@+id/img_profilePic_delete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/call_cam_toggle_background"
            app:layout_constraintBottom_toBottomOf="@+id/img_profilePic"
            app:layout_constraintEnd_toEndOf="@+id/img_profilePic"
            app:layout_constraintStart_toEndOf="@+id/img_profilePic"
            app:layout_constraintTop_toBottomOf="@+id/img_profilePic" />

        <!-- Gallery Pic 1 -->

        <ImageView
            android:id="@+id/img_galleryPic1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@color/black"
            app:layout_constraintEnd_toStartOf="@+id/img_galleryPic2"
            app:layout_constraintStart_toEndOf="@+id/img_profilePic" />

        <ImageView
            android:id="@+id/img_galleryPic1_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/call_cam_toggle_background"

            app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic1"
            app:layout_constraintEnd_toEndOf="@+id/img_galleryPic1"
            app:layout_constraintStart_toEndOf="@+id/img_galleryPic1"
            app:layout_constraintTop_toBottomOf="@+id/img_galleryPic1" />

        <ImageView
            android:id="@+id/img_galleryPic1_delete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_cross"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic1"
            app:layout_constraintEnd_toEndOf="@+id/img_galleryPic1"
            app:layout_constraintStart_toEndOf="@+id/img_galleryPic1"
            app:layout_constraintTop_toBottomOf="@+id/img_galleryPic1" />

        <!-- Gallery Pic 2 -->

        <ImageView
            android:id="@+id/img_galleryPic2"
            android:layout_width="@dimen/_80dp"
            android:layout_height="@dimen/_80dp"
            android:background="@color/bg_light_gray"
            app:layout_constraintEnd_toEndOf="parent" />


        <ImageView
            android:id="@+id/img_galleryPic2_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_add_circle"
            app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic2"
            app:layout_constraintEnd_toEndOf="@+id/img_galleryPic2"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toEndOf="@+id/img_galleryPic2"
            app:layout_constraintTop_toBottomOf="@+id/img_galleryPic2" />

        <ImageView
            android:id="@+id/img_galleryPic2_delete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_cross"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic2"
            app:layout_constraintEnd_toEndOf="@+id/img_galleryPic2"
            app:layout_constraintStart_toEndOf="@+id/img_galleryPic2"
            app:layout_constraintTop_toBottomOf="@+id/img_galleryPic2" />


    </android.support.constraint.ConstraintLayout>
    </HorizontalScrollView>