我的应用程序的内容在横向模式下被切断

Question

我是 android 开发的初学者。我制作了一个单屏应用程序，但应用程序的内容在横向模式下被切断。这是一个非常简单的应用程序，可以显示商店的详细信息。该应用程序在纵向模式下运行得非常好，但是当我将其切换到横向模式时，一些文本视图消失了。我不知道出了什么问题。这是代码：

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="@color/black">
<TextView
    android:id="@+id/toptitle"
    android:text="Try Our Mouthwatering Pani-Puri"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="30dp"
    android:paddingBottom="20dp"
    android:layout_centerHorizontal="true"
    android:textSize="25sp"
    android:fontFamily="cursive"
    android:textColor="@color/white"
    />
<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    android:src="@drawable/panipuri"
    android:layout_below="@id/toptitle"/>
<TextView
    android:id="@+id/detail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/white"
    android:layout_below="@id/image"
    android:text="Details"
    android:layout_centerHorizontal="true"
    android:textSize="20dp"
    android:paddingTop="20dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"

    />
<ImageView
    android:id="@+id/icon"
    android:layout_below="@id/detail"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_margin="35dp"
    android:src="@drawable/ocation"/>
<TextView
    android:id="@+id/location"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/icon"
    android:text="Nahar chowk, Sipahi tola, Near Durga Mandir,Purnia"
    android:layout_below="@id/detail"
    android:textColor="@color/white"
    android:paddingTop="35sp"
    android:textSize="15sp"
    android:paddingRight="15dp"
    android:fontFamily="monospace"/>
<ImageView
    android:id="@+id/watch"
    android:layout_below="@id/icon"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_marginLeft="35dp"
    android:layout_marginRight="35sp"
    android:src="@drawable/imgicon"/>
<TextView
    android:id="@+id/timing"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/watch"
    android:text="Operates between 9 AM to 11 PM"
    android:layout_below="@id/location"
    android:textColor="@color/white"
    android:paddingTop="35sp"
    android:paddingRight="15dp"
    android:textSize="15dp"
    android:fontFamily="monospace"/>
<ImageView
    android:id="@+id/description"
    android:layout_below="@id/timing"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_margin="35sp"
    android:src="@drawable/description"/>
<TextView
    android:id="@+id/des"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/description"
    android:layout_below="@id/timing"
    android:textSize="15sp"
    android:textColor="@color/white"
    android:paddingTop="35sp"
    android:fontFamily="monospace"
    android:text="Home Delivery available\nRs 10 for 8 pieces.\n"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Contact us:+91-6277665544 "
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:textColor="@color/white"
    android:textSize="16sp"
    android:layout_margin="10dp"
    android:background="@color/purple_500"/>
   </RelativeLayout>

portrait mode screenshot landscape mode screenshot

Answer 1

您是否尝试过将布局包装在 ScrollView 中？这可能会有所帮助。你在使用重量吗？喜欢

<ScrollView> *CONTENT* </ScrollView>

似乎 space 不足以容纳所有内容。您可能还想考虑为更适合的水平配置添加不同的布局文件

Answer 2

我建议您重新考虑 landscape 的更好布局。您肯定不想在这里使用 ScrollView 。例如：将 Details 和 Contact us 放在图像的右侧。将您想要的 portrait 布局放入 layout 文件夹，将 layout-land 放入 landscape .

Answer 3

欢迎您 Whosebug。

为了更好的用户体验，您应该为横向创建一个单独的布局。这很简单：

创建一个与 layout 文件夹平行的文件夹，名称为 layout-land。
将布局文件（原始布局文件）复制到 layout-land 文件夹中。
修改视图（即尺寸、位置等）以适应景观模式

是这样的： res/layout-land/activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@color/black">
   <TextView
       android:id="@+id/toptitle"
       android:text="Try Our Mouthwatering Pani-Puri"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:textSize="25sp"
       android:fontFamily="cursive"
       android:textColor="@color/white"
       />
   <ImageView
       android:id="@+id/image"
       android:layout_width="250dp"
       android:layout_height="250dp"
       android:scaleType="centerCrop"
       android:src="@drawable/panipuri"
       android:layout_below="@id/toptitle"
       android:layout_margin="8dp"/>
   <TextView
       android:id="@+id/detail"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textColor="@color/white"
       android:layout_toEndOf="@id/image"
       android:layout_alignParentEnd="true"
       android:layout_alignTop="@id/image"
       android:gravity="center"
       android:text="Details"
       android:textSize="20sp"
       android:paddingTop="8dp"
       android:paddingLeft="8dp"
       android:paddingRight="8dp"

       />
   <ImageView
       android:id="@+id/icon"
       android:layout_below="@id/detail"
       android:layout_alignStart="@id/detail"
       android:layout_width="30dp"
       android:layout_height="30dp"
       android:layout_margin="35dp"
       android:src="@drawable/ocation"/>
   <TextView
       android:id="@+id/location"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_toRightOf="@id/icon"
       android:text="Nahar chowk, Sipahi tola, Near Durga Mandir,Purnia"
       android:layout_below="@id/detail"
       android:textColor="@color/white"
       android:paddingTop="35sp"
       android:textSize="15sp"
       android:paddingRight="15dp"
       android:fontFamily="monospace"/>
   <ImageView
       android:id="@+id/watch"
       android:layout_below="@id/icon"
       android:layout_alignStart="@id/detail"
       android:layout_width="30dp"
       android:layout_height="30dp"
       android:layout_marginLeft="35dp"
       android:layout_marginRight="35sp"
       android:src="@drawable/imgicon"/>
   <TextView
       android:id="@+id/timing"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_toRightOf="@id/watch"
       android:text="Operates between 9 AM to 11 PM"
       android:layout_below="@id/location"
       android:textColor="@color/white"
       android:paddingTop="35sp"
       android:paddingRight="15dp"
       android:textSize="15sp"
       android:fontFamily="monospace"/>
   <ImageView
       android:id="@+id/description"
       android:layout_below="@id/timing"
       android:layout_alignStart="@id/detail"
       android:layout_width="30dp"
       android:layout_height="30dp"
       android:layout_margin="35sp"
       android:src="@drawable/description"/>
   <TextView
       android:id="@+id/des"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_toRightOf="@id/description"
       android:layout_below="@id/timing"
       android:textSize="15sp"
       android:textColor="@color/white"
       android:paddingTop="35sp"
       android:fontFamily="monospace"
       android:text="Home Delivery available\nRs 10 for 8 pieces.\n"/>
   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Contact us:+91-6277665544 "
       android:layout_alignParentBottom="true"
       android:layout_centerHorizontal="true"
       android:textColor="@color/white"
       android:textSize="16sp"
       android:layout_margin="16dp"
       android:background="@color/purple_500"/>
</RelativeLayout>

你应该在 sp 中使用 textSize 值。

如果您希望在您的应用中包含最新的 UI 元素。你应该试试 ConstraintLayout

快乐编码

我的应用程序的内容在横向模式下被切断

Content of my app cutting off in landscape mode

xml

android

android-layout

android-studio

android-relativelayout