布局无法在其他设备上正确显示

Question

我创建了一个应用，其中我采用线性布局，并在其中放置了2张cardview。该布局在我的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>

Answer 1

以上答案将解决您的问题
但是，如果您不想使用constraint layout并使用其他布局，例如relative或linear布局，那么我建议为此使用多个dimen文件

它将创建具有相同名称的文件夹

Answer 2

  

您的解决方案在这里：

在这种情况下，您可以使用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>

Answer 3

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>

Answer 4

就像我想的那样，您使用固定大小的视图。要尽可能地使布局自然缩放而不考虑设备屏幕的大小，请使用match_parent或wrap_content。我大多数时候都只使用imageviews来固定大小，以防止图像被拉伸。

尽可能使用constraintlayout。迄今为止最好的布局。我不再使用relativelayout。如果需要制作2个并排视图以具有相同的大小，则tablerow就足够了。我认为这不是最好的做法，因为这不是Google想要做的平面布局，但这是我现在唯一知道的事情。

对于cardviews，您可以将它们放在tablerow上。将tablerow的{​​{1}}设置为2，然后将weightSum的{​​{1}}设置为1。

对于cardview，请使用标准尺寸。我通常将layoutWeight用于我需要的任何填充。另外，如果您真的喜欢设计或想提高您对Android设计的了解（请使用设计编辑器，使用padding可以使您的生活更轻松），请阅读this。我不会在其中应用所有内容，因为我不知道该怎么做，但是很高兴知道一件事或2。

这就是我要如何安排您的布局。

8dp

正如我所说，我不知道该如何遵循Google的平面布局准则。如果有人知道，请随时编辑我的答案。为了我自己的利益。

Answer 5

尝试使用这样的结构（使用图像元素而不是textview，因为您的要求必须使用layout_weight attr）：-

this.currentPage$
  .subscribe(
    (page: number = 1) => {

     // Can use "busy" this way:
     this.busy = this.getAlerts(page)
        .pipe(
          map((response: HttpResponse<Alert[]>) => 
            response.results
          )
        )
        .subscribe(
          (alerts: Alert[]) => { ... },
          (error: any) => { ... }
        );
    },
    (error: any) => { ... }
  );