Блог

Главная - Вопросы по программированию - Линейное описание Android не выглядит одинаково на реальном устройстве

Линейное описание Android не выглядит одинаково на реальном устройстве

#android #android-layout #android-linearlayout

#Android #android-layout #android-linearlayout

Вопрос:

Я создаю пользовательскую цифровую панель для приложения Android. Я использовал несколько горизонтальных LinearLayout для этого.

Вот код, относящийся к этой части activity :

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="67dp">

    <ImageView
        android:id="@ id/digit1"
        android:layout_width="117dp"
        android:layout_height="67dp"
        app:srcCompat="@drawable/rsz_untitled_3" />

    <ImageView
        android:id="@ id/digit2"
        android:layout_width="118dp"
        android:layout_height="67dp"
        app:srcCompat="@drawable/digit_2" />

    <ImageView
        android:id="@ id/digit3"
        android:layout_width="100dp"
        android:layout_height="67dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/digit_3" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="70dp">

    <ImageView
        android:id="@ id/digit4"
        android:layout_width="117dp"
        android:layout_height="67dp"
        app:srcCompat="@drawable/digit_4" />

    <ImageView
        android:id="@ id/digit5"
        android:layout_width="118dp"
        android:layout_height="67dp"
        app:srcCompat="@drawable/digit_5" />

    <ImageView
        android:id="@ id/digit6"
        android:layout_width="100dp"
        android:layout_height="67dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/digit_6" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="64dp">

    <ImageView
        android:id="@ id/digit7"
        android:layout_width="117dp"
        android:layout_height="67dp"
        app:srcCompat="@drawable/digit_7" />

    <ImageView
        android:id="@ id/digit8"
        android:layout_width="118dp"
        android:layout_height="67dp"
        app:srcCompat="@drawable/digit_8" />

    <ImageView
        android:id="@ id/digit9"
        android:layout_width="100dp"
        android:layout_height="67dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/digit_9" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="64dp">

    <ImageView
        android:id="@ id/digitvoid"
        android:layout_width="117dp"
        android:layout_height="67dp" />

    <ImageView
        android:id="@ id/digit0"
        android:layout_width="118dp"
        android:layout_height="67dp"
        app:srcCompat="@drawable/digit_0" />

    <ImageView
        android:id="@ id/digitdelete"
        android:layout_width="100dp"
        android:layout_height="67dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/digit_delete" />

</LinearLayout>

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

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

Здесь вы можете увидеть, как это выглядит в Android Studio и как это выглядит на реальном устройстве. Я не понимаю, почему это происходит. Я использую dp (которые, насколько я понимаю, должны быть динамическими пикселями), поэтому они должны хорошо масштабироваться на каждом устройстве.

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

1. попробуйте использовать ConstraintLayout , чтобы решить эту проблему просто

2. просто укажите all <ImageView> width = 0dp

Ответ №1:

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

Если вы хотите использовать, LinearLayout вы, вероятно, захотите использовать атрибуты android:layout_weight и android:weightSum , чтобы придать вашим представлениям некоторый размер относительно вашего экрана. Вы можете сделать это, и это будет работать, но все вложенные представления, скорее всего, повлияют на производительность ваших макетов.

Если вам нужен макет, который будет реагировать на любой размер экрана, вы можете использовать ConstraintLayout с цепочками, вот пример:

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

<Button
    android:id="@ id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="1"
    app:layout_constraintBottom_toBottomOf="@ id/button10"
    app:layout_constraintEnd_toStartOf="@ id/button10"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@ id/button10" />

<Button
    android:id="@ id/button2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="0"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@ id/button11"
    app:layout_constraintStart_toEndOf="@ id/button5"
    app:layout_constraintTop_toBottomOf="@ id/button4" />

<Button
    android:id="@ id/button11"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="x"
    app:layout_constraintBottom_toBottomOf="@ id/button2"
    app:layout_constraintEnd_toEndOf="@ id/button3"
    app:layout_constraintStart_toEndOf="@ id/button4"
    app:layout_constraintTop_toTopOf="@ id/button2" />

<Button
    android:id="@ id/button3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="8"
    app:layout_constraintBottom_toBottomOf="@ id/button4"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@ id/button4"
    app:layout_constraintTop_toTopOf="@ id/button4" />

<Button
    android:id="@ id/button4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="8"
    app:layout_constraintBottom_toTopOf="@ id/button2"
    app:layout_constraintEnd_toStartOf="@ id/button3"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@ id/button5"
    app:layout_constraintTop_toBottomOf="@ id/button7" />

<Button
    android:id="@ id/button5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="7"
    app:layout_constraintBottom_toBottomOf="@ id/button4"
    app:layout_constraintEnd_toStartOf="@ id/button4"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@ id/button4" />

<Button
    android:id="@ id/button6"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="6"
    app:layout_constraintBottom_toBottomOf="@ id/button7"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@ id/button7"
    app:layout_constraintTop_toTopOf="@ id/button7" />

<Button
    android:id="@ id/button7"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="5"
    app:layout_constraintBottom_toTopOf="@ id/button4"
    app:layout_constraintEnd_toStartOf="@ id/button6"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@ id/button8"
    app:layout_constraintTop_toBottomOf="@ id/button10" />

<Button
    android:id="@ id/button8"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="4"
    app:layout_constraintBottom_toBottomOf="@ id/button7"
    app:layout_constraintEnd_toStartOf="@ id/button7"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@ id/button7" />

<Button
    android:id="@ id/button9"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="3"
    app:layout_constraintBottom_toBottomOf="@ id/button10"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@ id/button10"
    app:layout_constraintTop_toTopOf="@ id/button10" />

<Button
    android:id="@ id/button10"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="2"
    app:layout_constraintBottom_toTopOf="@ id/button7"
    app:layout_constraintEnd_toStartOf="@ id/button9"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@ id/button"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_chainStyle="packed" />
 </android.support.constraint.ConstraintLayout>

Это будет выглядеть следующим образом:

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

Ответ №2:

Очевидно, вы делаете это для третьей строки:

 android:layout_weight="1"

И это вызывает проблемы — если ваш экран недостаточно широк, чтобы следовать вашей инструкции по ширине, вы указываете, что все кнопки не одинаковы, поэтому следует изменить размер только последних кнопок.

Ответ №3:

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

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="67dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@ id/digit1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/rsz_untitled_3" />

        <ImageView
            android:id="@ id/digit2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/digit_2" />

        <ImageView
            android:id="@ id/digit3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/digit_3" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@ id/digit4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/digit_4" />

        <ImageView
            android:id="@ id/digit5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/digit_5" />

        <ImageView
            android:id="@ id/digit6"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/digit_6" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@ id/digit7"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/digit_7" />

        <ImageView
            android:id="@ id/digit8"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/digit_8" />

        <ImageView
            android:id="@ id/digit9"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/digit_9" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@ id/digitvoid"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <ImageView
            android:id="@ id/digit0"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/digit_0" />

        <ImageView
            android:id="@ id/digitdelete"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/digit_delete" />
    </LinearLayout>
</LinearLayout>

Ответ №4:

Пожалуйста, проверьте приведенный ниже код. Это может решить вашу проблему. Если вы столкнетесь с какой-либо проблемой, пожалуйста, дайте мне знать в разделе комментариев.

Используйте свои собственные чертежи и ресурсы.

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="67dp">

        <ImageView
            android:id="@ id/digit1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/add_more_icon" />

        <ImageView
            android:id="@ id/digit2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/add_more_icon" />

        <ImageView
            android:id="@ id/digit3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/add_more_icon" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="67dp">

        <ImageView
            android:id="@ id/digit4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/add_more_icon" />

        <ImageView
            android:id="@ id/digit5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/add_more_icon" />

        <ImageView
            android:id="@ id/digit6"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/add_more_icon" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="67dp">

        <ImageView
            android:id="@ id/digit7"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/add_more_icon" />

        <ImageView
            android:id="@ id/digit8"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/add_more_icon" />

        <ImageView
            android:id="@ id/digit9"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/add_more_icon" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="67dp">

        <ImageView
            android:id="@ id/digitvoid"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <ImageView
            android:id="@ id/digit0"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/add_more_icon" />

        <ImageView
            android:id="@ id/digitdelete"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/add_more_icon" />

    </LinearLayout>
</LinearLayout>

Пожалуйста, подтвердите ответ, если он будет работать для вас. Спасибо!

Ответ №5:

пожалуйста, замените ваши 4 LinearLayout на это :

   <LinearLayout
    android:orientation="horizontal"
    android:weightSum="3"
    android:layout_weight="0.2"
    android:layout_width="match_parent"
    android:layout_height="0dip">

    <ImageView
        android:layout_weight="1"
        android:id="@ id/digit1"
        android:layout_width="0dip"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/rsz_untitled_3" />

    <ImageView
        android:id="@ id/digit2"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/digit_2" />

    <ImageView
        android:id="@ id/digit3"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/digit_3" />

</LinearLayout>

<LinearLayout
    android:orientation="horizontal"
    android:weightSum="3"
    android:layout_weight="0.2"
    android:layout_width="match_parent"
    android:layout_height="0dip">

    <ImageView
        android:id="@ id/digit4"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/digit_4" />

    <ImageView
        android:id="@ id/digit5"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/digit_5" />

    <ImageView
        android:id="@ id/digit6"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/digit_6" />

</LinearLayout>

<LinearLayout
    android:orientation="horizontal"
    android:weightSum="3"
    android:layout_weight="0.2"
    android:layout_width="match_parent"
    android:layout_height="0dip">

    <ImageView
        android:id="@ id/digit7"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/digit_7" />

    <ImageView
        android:id="@ id/digit8"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/digit_8" />

    <ImageView
        android:id="@ id/digit9"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/digit_9" />

</LinearLayout>

<LinearLayout
    android:orientation="horizontal"
    android:weightSum="3"
    android:layout_weight="0.2"
    android:layout_width="match_parent"
    android:layout_height="0dip">

    <ImageView
        android:id="@ id/digitvoid"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="match_parent" />

    <ImageView
        android:id="@ id/digit0"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/digit_0" />

    <ImageView
        android:id="@ id/digitdelete"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/digit_delete" />

</LinearLayout>

и добавьте в родительский макет эти два атрибута :

 android:orientation="vertical"
android:weightSum="1.0"

ПРИМЕЧАНИЕ :
Если вы хотите уменьшить высоту квадрата, просто уменьшите значение : android:layout_weight="0.2" до android:layout_weight="0.15"

Ответ №6:

попробуйте это 

 <LinearLayout 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="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:padding="2dp">

        <ImageView
            android:id="@ id/digit1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            app:srcCompat="@drawable/rsz_untitled_3" />

        <ImageView
            android:id="@ id/digit2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            app:srcCompat="@drawable/digit_2" />

        <ImageView
            android:id="@ id/digit3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            app:srcCompat="@drawable/digit_3" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:padding="2dp">

        <ImageView
            android:id="@ id/digit4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            app:srcCompat="@drawable/digit_4" />

        <ImageView
            android:id="@ id/digit5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            app:srcCompat="@drawable/digit_5" />

        <ImageView
            android:id="@ id/digit6"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            app:srcCompat="@drawable/digit_6" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:padding="2dp">

        <ImageView
            android:id="@ id/digit7"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            app:srcCompat="@drawable/digit_7" />

        <ImageView
            android:id="@ id/digit8"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            app:srcCompat="@drawable/digit_8" />

        <ImageView
            android:id="@ id/digit9"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            app:srcCompat="@drawable/digit_9" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:padding="2dp">

        <ImageView
            android:id="@ id/digitvoid"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:layout_weight="1" />

        <ImageView
            android:id="@ id/digit0"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            app:srcCompat="@drawable/digit_0" />

        <ImageView
            android:id="@ id/digitdelete"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="5dp"
            app:srcCompat="@drawable/digit_delete" />

    </LinearLayout>
</LinearLayout>