Блог

Главная - Вопросы по программированию - Элементы не будут правильно центрироваться в Constraintlayout Android Studio

Элементы не будут правильно центрироваться в Constraintlayout Android Studio

#java #android #android-constraintlayout

#java #Android #android-constraintlayout

Вопрос:

У меня есть заставка, подобная этой:

но если я открою свое приложение, оно будет отображаться следующим образом:

введите описание изображения здесь

Это мой XML-макет:

 <?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/holo_red_light"
tools:context=".SplashScreen">

<ImageView
    android:id="@ id/splash_icon"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_marginTop="160dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    app:srcCompat="@mipmap/ic_concas_icon" />

<TextView
    android:id="@ id/splash_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="28dp"
    android:text="GO Tools"
    android:textColor="@android:color/white"
    android:textSize="48sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="@ id/splash_icon"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@ id/splash_icon"
    app:layout_constraintTop_toBottomOf="@ id/splash_icon" />

<ProgressBar
    android:id="@ id/splash_progress"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="136dp"
    app:layout_constraintEnd_toEndOf="@ id/splash_icon"
    app:layout_constraintHorizontal_bias="0.506"
    app:layout_constraintStart_toStartOf="@ id/splash_icon"
    app:layout_constraintTop_toBottomOf="@ id/splash_icon" />

<TextView
    android:id="@ id/splash_status"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="204dp"
    android:text="STATUS"
    android:textAlignment="center"
    android:textColor="@android:color/white"
    android:textSize="18sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="@ id/splash_icon"
    app:layout_constraintHorizontal_bias="0.508"
    app:layout_constraintStart_toStartOf="@ id/splash_icon"
    app:layout_constraintTop_toBottomOf="@ id/splash_icon" />

Мне нужно, чтобы элементы размещались правильно, как в Android Studio preview, но если я запускаю свое приложение, оно все равно не работает. Кто-нибудь знает, как это сделать? Большое вам спасибо!

РЕДАКТИРОВАТЬ: Изображение не будет загружено, но оно правильно настроено.

Ответ №1:

Похоже, что ваш макет в порядке, но если вы хотите, чтобы ваше изображение было немного ближе к верхней части экрана, вам нужно его изменить, теперь вы указываете, что ваше изображение должно быть центрировано по центру вашего экрана, чтобы все остальные ваши виды были размещены ниже вашего изображения. Хорошим решением было бы добавить направляющую и ограничить ваше изображение направляющей, а не верхней частью экрана (таким образом, ваше изображение будет размещено немного выше, и это изменит внешний вид вашего макета)

Например:

    <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@ id/splash_icon"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="8dp"
        android:background="@color/buttonColor"
        app:layout_constraintBottom_toTopOf="@ id/guideline3"
        app:layout_constraintHorizontal_bias="0.488"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@ id/guideline3" />

    <TextView
        android:id="@ id/splash_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="28dp"
        android:layout_marginBottom="8dp"
        android:background="@color/buttonColor"
        android:text="GO Tools"
        android:textColor="@android:color/white"
        android:textSize="48sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@ id/splash_progress"
        app:layout_constraintEnd_toEndOf="@ id/splash_icon"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@ id/splash_icon"
        app:layout_constraintTop_toBottomOf="@ id/splash_icon" />

    <ProgressBar
        android:id="@ id/splash_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="136dp"
        android:layout_marginBottom="8dp"
        android:background="@color/buttonColor"
        app:layout_constraintBottom_toTopOf="@ id/splash_status"
        app:layout_constraintEnd_toEndOf="@ id/splash_icon"
        app:layout_constraintHorizontal_bias="0.506"
        app:layout_constraintStart_toStartOf="@ id/splash_icon"
        app:layout_constraintTop_toBottomOf="@ id/splash_icon" />

    <TextView
        android:id="@ id/splash_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="204dp"
        android:layout_marginBottom="8dp"
        android:background="@color/buttonColor"
        android:text="STATUS"
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@ id/splash_icon"
        app:layout_constraintHorizontal_bias="0.508"
        app:layout_constraintStart_toStartOf="@ id/splash_icon"
        app:layout_constraintTop_toBottomOf="@ id/splash_icon" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@ id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Редактировать: это может сработать на вашем телефоне, но я только что заметил, что вы используете фиксированный размер для своих представлений — постарайтесь избежать этого, потому что у разных телефонов разные размеры телефонов

Комментарии:

1. Возможно ли указать размерность с символом percentage%?

2. Размерность чего?

3. Размер элементов, и, если возможно, с % позиции на дисплее.

4. Есть много способов добиться этого — один из способов — использовать барьер / направляющие и разместить их на определенном проценте экрана (например, на 10 процентах экрана и указать вашим представлениям ограничение на направляющие). Это действительно тема , которую стоит прочитать, потому что есть много примеров

Ответ №2:

Ваш макет слишком сильно зависит от размера экрана, ограничивая ваши представления друг другом и полагаясь на различные поля и вертикальные смещения, чтобы заставить его работать в конструкторе. В результате, когда вы переходите к другому размеру экрана, макет работает не так, как вы предполагаете.

Взгляните на ConstraintLayout цепочки, чтобы найти способ сгруппировать ваши виджеты так, чтобы они располагались по центру для всех размеров экрана. Я думаю, что CHAIN_PACKED цепочка — это то, что вам нужно.