Макет не отображается должным образом на разных устройствах - PullRequest
Новая
       47

Макет не отображается должным образом на разных устройствах

0 голосов
/ 13 октября 2018

Я создал приложение, в котором я беру линейный макет и помещаю в него 2 карты.Макет выглядит идеально на моем устройстве 1080p, но он не отображается должным образом на устройствах с более низким разрешением.Вот скриншоты приложения с отсутствующим контентом на устройстве с низким разрешением.Я использовал sp и dp для текста и полей, но все еще проблема.Что-то мне не хватает? 

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:padding="2dp">
            <android.support.v7.widget.CardView
                android:layout_width="175dp"
                android:layout_height="200dp"
                android:id="@+id/time_table"
                android:layout_margin="10dp">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:padding="10dp"
                    android:background="@color/purple"
                    android:gravity="center">

                    <ImageView
                        android:layout_width="75dp"
                        android:layout_height="75dp"
                        android:src="@drawable/ic_time_table_black_24dp"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="#fff"
                        android:padding="5dp"
                        android:textStyle="bold"
                        android:fontFamily="serif"
                        android:text="Time Table"/>

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="2dp"
                        android:background="#ffffff"
                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:padding="5dp"
                        android:textColor="#fff"
                        android:text="Check your time table here.."/>

                </LinearLayout>

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

With full resolution

with Low resolution

Ответы [ 5 ]

0 голосов
/ 13 октября 2018

Как я и думал, вы использовали фиксированные размеры для своих видов.Чтобы максимально увеличить масштаб макета независимо от размера экрана устройства, используйте match_parent или wrap_content.Только imageviews - это то, что я большую часть времени помещаю в фиксированные размеры, чтобы предотвратить растяжение изображения.

Используйте constraintlayout как можно больше.Это лучший макет на сегодняшний день.Я больше не пользуюсь relativelayout.Если вам нужно сделать 2 вида рядом друг с другом, чтобы иметь одинаковые размеры, достаточно tablerow.Я не думаю, что это лучшее, что нужно сделать, потому что это не то, чего хочет Google, но это единственное, что я знаю прямо сейчас.

Для cardviews вы можете поместить их наtablerow.Установите tablerow 'weightSum на 2, затем установите cardview' * layoutWeight на 1.

Для padding используйте для него стандартный размер.Я в основном использую 8dp для любого заполнения, которое мне нужно.Кроме того, если вам действительно нравится дизайн или вы хотите улучшить свои знания о проектировании для Android (пожалуйста, используйте редактор дизайна, это облегчит вашу жизнь при использовании constraintlayout), прочитайте this .Я не применяю там все, потому что я не знаю, как это сделать, но приятно знать что-то или 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">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="2">

        <android.support.constraint.ConstraintLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#910FF5">

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:gravity="center"
                android:text="Time Table"
                android:textColor="@android:color/white"
                android:textSize="24sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView3" />

            <View
                android:id="@+id/view2"
                android:layout_width="wrap_content"
                android:layout_height="5dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:background="#ffffff"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView4" />

            <TextView
                android:id="@+id/textView6"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginBottom="8dp"
                android:gravity="center"
                android:text="Check your time table here"
                android:textColor="@android:color/white"
                android:textSize="24sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/view2" />
        </android.support.constraint.ConstraintLayout>

        <android.support.constraint.ConstraintLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#910FF5">

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/textView5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:gravity="center"
                android:text="Time Table"
                android:textColor="@android:color/white"
                android:textSize="24sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView4" />

            <View
                android:id="@+id/view3"
                android:layout_width="wrap_content"
                android:layout_height="5dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:background="#ffffff"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView5" />

            <TextView
                android:id="@+id/textView7"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginBottom="8dp"
                android:gravity="center"
                android:text="Check your time table here"
                android:textColor="@android:color/white"
                android:textSize="24sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/view3" />
        </android.support.constraint.ConstraintLayout>
    </TableRow>

</android.support.constraint.ConstraintLayout>

Как я уже сказал, я не знаю, как заставить это следовать правилам плоской компоновки Google.Если кто-то знает, как, пожалуйста, не стесняйтесь редактировать мой ответ.Для моего же блага.

0 голосов
/ 13 октября 2018

imagview, textview нужно изображение и текст может изменить его должно работать 

 <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="2">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:weightSum="2">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#123455"
                android:gravity="center"
                android:orientation="vertical"
                android:padding="10dp">

                <ImageView
                    android:layout_width="75dp"
                    android:layout_height="75dp"
                    android:src="@drawable/ic_message" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:padding="5dp"
                    android:text="Time Table"
                    android:textColor="#fff"
                    android:textStyle="bold" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#ffffff" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="Check your time table here.."
                    android:textColor="#fff" />


            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="8dp"
                android:layout_weight="1"
                android:background="#123455"
                android:gravity="center"
                android:orientation="vertical"
                android:padding="10dp">

                <ImageView
                    android:layout_width="75dp"
                    android:layout_height="75dp"
                    android:src="@drawable/ic_message" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:padding="5dp"
                    android:text="Time Table"
                    android:textColor="#fff"
                    android:textStyle="bold" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#ffffff" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="Check your time table here.."
                    android:textColor="#fff" />


            </LinearLayout>


        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:weightSum="2">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#123455"
                android:gravity="center"
                android:orientation="vertical"
                android:padding="10dp">

                <ImageView
                    android:layout_width="75dp"
                    android:layout_height="75dp"
                    android:src="@drawable/ic_message" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:padding="5dp"
                    android:text="Time Table"
                    android:textColor="#fff"
                    android:textStyle="bold" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#ffffff" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="Check your time table here.."
                    android:textColor="#fff" />


            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="8dp"
                android:layout_weight="1"
                android:background="#123455"
                android:gravity="center"

                android:orientation="vertical"
                android:padding="10dp">

                <ImageView
                    android:layout_width="75dp"
                    android:layout_height="75dp"
                    android:src="@drawable/ic_message" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:padding="5dp"
                    android:text="Time Table"
                    android:textColor="#fff"
                    android:textStyle="bold" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#ffffff" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="Check your time table here.."
                    android:textColor="#fff" />


            </LinearLayout>


        </LinearLayout>

    </LinearLayout>
0 голосов
/ 13 октября 2018

ответ выше поможет решить вашу проблему
Но если вы не хотите использовать constraint layout и использовать другой макет, такой как relative или linear, то я бы порекомендовал использовать многомерный файл для этого
image 1

он создаст папки с тем же именем
image 2

0 голосов
/ 13 октября 2018

Ваше решение здесь:

В этом случае вы можете использовать layout_weight для поддержки макета. 

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="2dp">

    <android.support.v7.widget.CardView
        android:id="@+id/time_table"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="200dp"
                android:background="@color/colorPrimary"
                android:gravity="center"
                android:layout_weight="1"
                android:orientation="vertical"
                android:padding="10dp">

                <ImageView
                    android:layout_width="75dp"
                    android:layout_height="75dp"
                    android:src="@drawable/ic_edit" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="serif"
                    android:padding="5dp"
                    android:text="Time Table"
                    android:textColor="#fff"
                    android:textStyle="bold" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#ffffff" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="Check your time table here.."
                    android:textColor="#fff" />

            </LinearLayout>

        </LinearLayout>

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

    <LinearLayout>
0 голосов
/ 13 октября 2018

попробуйте использовать такую ​​структуру (используйте элемент изображения вместо textview, поскольку ваше требование должно использовать layout_weight attr): - 

            <android.support.v7.widget.FitWindowsLinearLayout
            android:id="@+id/ediv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white_p"

            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

            <TextView
                android:id="@+id/txt"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@color/white_p"
                android:gravity="center"

                android:text="@string/ftxt"
                android:textColor="@color/black"

                />

            <android.support.constraint.ConstraintLayout
                android:id="@+id/ebar"
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/black"
                tools:layout_editor_absoluteX="92dp">

            </android.support.constraint.ConstraintLayout>

            <TextView
                android:id="@+id/ctxt"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@color/white_p"
                android:gravity="center"
                android:text="@string/c_txt"
                android:textColor="@color/black" />
            </android.support.v7.widget.FitWindowsLinearLayout>
...