Equally spaced four images using constraint layout

前端未结

关注

 4  439

i want to equally spaced four images using constraint layout...i have used guidelines but it is giving me a lot of space between the images and right corner images are going

相关标签:

4条回答

傲寒

2021-01-15 05:59

Not sure about your exact requirement from question, but I can see that you need to display 4 squares with equal width & height across devices.

You don't need to use guideline for both vertical and horizontal but instead to distribute it vertically you can use barrier to align them properly.

Check out code below:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <androidx.viewpager.widget.ViewPager
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        app:layout_constraintBottom_toTopOf="@id/image_divider"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/vertical_divider"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".5" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/image_divider"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="top"
        app:constraint_referenced_ids="view1, view2" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/horizontal_divider"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="top"
        app:constraint_referenced_ids="view3, view4" />
    
    <View
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@id/horizontal_divider"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toStartOf="@id/vertical_divider"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="@android:color/holo_orange_light"
        app:layout_constraintBottom_toTopOf="@id/horizontal_divider"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/vertical_divider" />

    <View
        android:id="@+id/view3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toStartOf="@id/vertical_divider"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:id="@+id/view4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/vertical_divider" />
</androidx.constraintlayout.widget.ConstraintLayout>

Output:

(This will be consistent across different screen sizes)

Here, vertical guideline is used to distribute views evenly on horizontal direction while barrier is used to align two views in vertical direction.

Dimension ratio is used to make square consistent with 0dp as height & width.

Edit: O.P. seeks for solution on arranging entire view hierarchy with square boxes at bottom, given below is complete code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:title="@string/app_name"
            app:titleTextColor="#ffffff"
            tools:ignore="MissingConstraints" />

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewpagerhome"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="4dp"
            app:layout_constraintBottom_toTopOf="@id/image_divider"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/toolbar"
            tools:ignore="NotSibling" />

        <com.viewpagerindicator.CirclePageIndicator
            android:id="@+id/indicator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="-30dp"
            android:layout_marginBottom="-3dp"
            android:gravity="bottom"
            android:padding="10dip"
            app:centered="true"
            app:fillColor="@color/colorPrimary"
            app:layout_constraintBottom_toBottomOf="@id/viewpagerhome"
            app:layout_constraintEnd_toEndOf="@id/viewpagerhome"
            app:layout_constraintStart_toStartOf="@id/viewpagerhome"
            app:pageColor="#FFFFFF"
            app:snap="false" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/vertical_divider"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent=".5" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/image_divider"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="top"
            app:constraint_referenced_ids="view1, view2" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/horizontal_divider"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="top"
            app:constraint_referenced_ids="view3, view4" />

        <View
            android:id="@+id/view1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="4dp"
            android:background="@drawable/tableicon"
            app:layout_constraintBottom_toTopOf="@id/horizontal_divider"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@id/vertical_divider"
            app:layout_constraintStart_toStartOf="parent" />

        <View
            android:id="@+id/view2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="4dp"
            android:background="@drawable/sofaicon"
            app:layout_constraintBottom_toTopOf="@id/horizontal_divider"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/vertical_divider" />

        <View
            android:id="@+id/view3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="4dp"
            android:background="@drawable/chairsicon"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@id/vertical_divider"
            app:layout_constraintStart_toStartOf="parent" />

        <View
            android:id="@+id/view4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="4dp"
            android:background="@drawable/cupboardicon"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/vertical_divider" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/transparent"
        app:headerLayout="@layout/nav_header_main"
        app:itemBackground="@drawable/drawer_item_bg"
        app:itemIconTint="#ffffff"
        app:itemTextColor="#ffffff"
        app:menu="@menu/menu" />

</androidx.drawerlayout.widget.DrawerLayout>

0 讨论(0)

梦如初夏

2021-01-15 06:18

you can test below code :

  <androidx.constraintlayout.widget.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="wrap_content"
    android:layout_gravity="bottom"
    android:gravity="bottom"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.50" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.50" />


    <Button
        android:id="@+id/image2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="5dp"
        android:background="@drawable/ic_launcher_background"
        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/image3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        android:background="@drawable/ic_launcher_background"
        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline_vertical"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/image4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        android:background="@drawable/ic_launcher_background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/guideline_horizontal" />

    <Button
        android:id="@+id/buttonMiddle"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline_vertical"
        app:layout_constraintTop_toTopOf="@+id/guideline_horizontal" />

</androidx.constraintlayout.widget.ConstraintLayout>

0 讨论(0)

轻奢々

2021-01-15 06:23

Remove guideline, you can set this view giving height ratio and fit the view in with like this,

<androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ffffff"
            android:orientation="vertical">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                app:title="@string/app_name"
                app:titleTextColor="#ffffff"
                tools:ignore="MissingConstraints" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guideline50"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="0.5" />

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/cvcxv"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_below="@id/toolbar"
                android:background="@color/colorBlackNormal"
                app:layout_constraintBottom_toTopOf="@id/guideline50"
                app:layout_constraintTop_toBottomOf="@id/toolbar"
                tools:ignore="MissingConstraints">

                <androidx.viewpager.widget.ViewPager
                    android:id="@+id/viewpagerhome"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    tools:ignore="MissingConstraints" />

                <com.viewpagerindicator.CirclePageIndicator
                    android:id="@+id/indicator"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="-30dp"
                    android:layout_marginBottom="-3dp"
                    android:gravity="bottom"
                    android:padding="10dip"
                    app:centered="true"
                    app:fillColor="@color/colorPrimary"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:pageColor="#FFFFFF"
                    app:snap="false"
                    tools:ignore="MissingConstraints" />
            </androidx.constraintlayout.widget.ConstraintLayout>
    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="bottom"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:gravity="bottom"
            android:orientation="vertical"
            app:layout_constraintTop_toBottomOf="@id/cvcxv"
            app:layout_constraintBottom_toBottomOf="parent">
    
            <Button
                android:id="@+id/image1"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginEnd="4dp"
                android:layout_marginRight="4dp"
                android:background="@drawable/chairsicon"
                app:layout_constraintDimensionRatio="h,1:1"
                app:layout_constraintEnd_toStartOf="@id/image2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
    
            <Button
                android:id="@+id/image2"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="4dp"
                android:layout_marginLeft="4dp"
                android:background="@drawable/chairsicon"
                app:layout_constraintDimensionRatio="h,1:1"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/image1"
                app:layout_constraintTop_toTopOf="parent" />
    
            <Button
                android:id="@+id/image3"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="4dp"
                android:layout_marginRight="4dp"
                android:background="@drawable/chairsicon"
                app:layout_constraintDimensionRatio="h,1:1"
                app:layout_constraintEnd_toStartOf="@id/image4"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/image1" />
    
            <Button
                android:id="@+id/image4"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="4dp"
                android:layout_marginLeft="4dp"
                android:layout_marginTop="8dp"
                android:background="@drawable/chairsicon"
                app:layout_constraintDimensionRatio="h,1:1"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/image3"
                app:layout_constraintTop_toBottomOf="@id/image2" />
    
        </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

It will give the desired result in all devices

0 讨论(0)

不思量自难忘°

2021-01-15 06:24

check if this works with you.

<androidx.drawerlayout.widget.DrawerLayout
    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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/holder"
        android:layout_width="match_parent"
        android:background="#000000"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:background="#ffffff"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <androidx.appcompat.widget.Toolbar
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:id="@+id/toolbar"
                app:titleTextColor="#ffffff"
                app:title="@string/app_name"
                android:background="@color/colorPrimary"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"/>
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:id="@+id/cvcxv"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toTopOf="@id/images_container"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_below="@id/toolbar"
                app:layout_constraintTop_toBottomOf="@id/toolbar"
                >
                <androidx.viewpager.widget.ViewPager
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    android:id="@+id/viewpagerhome"
                    tools:ignore="MissingConstraints" />

                <com.viewpagerindicator.CirclePageIndicator
                    android:id="@+id/indicator"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="-30dp"
                    android:layout_marginBottom="-3dp"
                    android:gravity="bottom"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    android:padding="10dip"
                    app:centered="true"
                    app:fillColor="@color/colorPrimary"
                    app:pageColor="#FFFFFF"
                    app:snap="false"
                    />
            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/images_container"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintHeight_percent="0.5"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent">

                <Button
                    android:id="@+id/image1"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_marginStart="4dp"
                    android:layout_marginTop="4dp"
                    android:layout_marginEnd="2dp"
                    android:background="@drawable/lake"
                    app:layout_constraintBottom_toTopOf="@+id/image3"
                    app:layout_constraintEnd_toStartOf="@+id/image2"
                    app:layout_constraintHeight_percent="0.48"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintWidth_percent="0.48" />

                <Button
                    android:id="@+id/image2"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_marginStart="2dp"
                    android:layout_marginTop="4dp"
                    android:layout_marginEnd="4dp"
                    android:background="@drawable/test"
                    app:layout_constraintBottom_toTopOf="@+id/image4"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHeight_percent="0.48"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toEndOf="@+id/image1"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintWidth_percent="0.48" />

                <Button
                    android:id="@+id/image3"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:background="@drawable/test"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/image4"
                    app:layout_constraintHeight_percent="0.48"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image1"
                    app:layout_constraintWidth_percent="0.48" />

                <Button
                    android:id="@+id/image4"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:background="@drawable/lake"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHeight_percent="0.48"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toEndOf="@+id/image3"
                    app:layout_constraintTop_toBottomOf="@+id/image2"
                    app:layout_constraintWidth_percent="0.48" />

            </androidx.constraintlayout.widget.ConstraintLayout>



        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>


    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"
        android:layout_gravity="start"
        app:itemTextColor="#ffffff"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/menu"
        app:itemIconTint="#ffffff"
        app:itemBackground="@drawable/drawer_item_bg"
        />


</androidx.drawerlayout.widget.DrawerLayout>

0 讨论(0)