布局根据屏幕大小调整

Question

您好，我创建了一个布局，该布局应根据屏幕尺寸进行调整，但在一个屏幕尺寸较大的设备中，布局适合，但在另一个屏幕尺寸较小的设备上，布局从顶部的某些部分不适合底部可见且相同

预期

这是我的 xml 代码

post_item_container_home.xml

<RelativeLayout 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="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/Card_View"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="5dp"
        app:shapeAppearanceOverlay="@style/RoundedCornerHome"
        tools:ignore="ObsoleteLayoutParam">

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/imagePostHome"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:contentDescription="@string/todo"
            app:layout_constraintDimensionRatio="H,16:9"
            app:shapeAppearanceOverlay="@style/RoundedCornerHome" />

    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_below="@+id/Card_View"
        app:cardBackgroundColor="@color/grey"
        android:layout_marginStart="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="5dp"
        android:layout_marginBottom="10dp"
        android:background="@color/grey"
        app:shapeAppearanceOverlay="@style/RoundedCornerHome">


    </com.google.android.material.card.MaterialCardView>


</RelativeLayout>

fragment_home.xml

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="@color/black">


    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <include
            android:id="@+id/toolbar"
            layout="@layout/tool_bar" />
    </com.google.android.material.appbar.AppBarLayout>

    <TextView
        android:id="@+id/view_all_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/appBarLayout"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="20dp"
        android:layout_marginTop="10dp"
        android:text="@string/view_all"
        android:textColor="@color/white"
        android:textStyle="bold" />

    <!--    Horizontal RecyclerView-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/postRecyclerView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/view_all_text"
        android:background="@color/black"
        android:orientation="horizontal"
        android:overScrollMode="never"
        app:reverseLayout="true" />
    <!--    Vertical RecyclerView-->
    <!--    this the one which shows the data from post_item_container_home.xml-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerViewHome"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/postRecyclerView1"
        android:layout_marginBottom="10dp"
        android:orientation="vertical"
        android:overScrollMode="never"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmerEffect"
        android:layout_below="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <include layout="@layout/post_item_container_shimmer_home" />

        <include layout="@layout/post_item_container_shimmer_home" />


    </com.facebook.shimmer.ShimmerFrameLayout>
</RelativeLayout>

Answer 1

在 Android XML 中尽量不要为布局宽度或高度提供硬编码的 DP 值，除非有必要。

根据您的代码，它在MaterialCardView 内显示android:layout_height="500dp"，这对于小密度设备来说太大了。如果要使其全高，请尝试使用match_parent 作为MaterialCardView 的高度。

---

使用以下布局：post_item_container_home.xml

    <?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="match_parent"
        android:weightSum="5"
        android:orientation="vertical"
        >
    
        <com.google.android.material.card.MaterialCardView
            android:id="@+id/Card_View"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginStart="5dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="5dp"
            android:background="#000"
            android:layout_weight="4">
    
            <com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/imagePostHome"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                app:layout_constraintDimensionRatio="H,16:9"
                app:shapeAppearanceOverlay="@style/RoundedCornerHome" />
    
        </com.google.android.material.card.MaterialCardView>
    
        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_below="@+id/Card_View"
            app:cardBackgroundColor="@color/grabpay_blue"
            android:layout_marginStart="5dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="5dp"
            android:layout_marginBottom="10dp"
            android:background="@color/grey"
            app:shapeAppearanceOverlay="@style/RoundedCornerHome">
    
    
        </com.google.android.material.card.MaterialCardView>
    </LinearLayout>