我的应用内容在横向模式下被截断

Posted 2023-04-19

技术标签:

【中文标题】我的应用内容在横向模式下被截断【英文标题】：Content of my app cutting off in landscape mode 【发布时间】：2021-08-30 00:15:01 【问题描述】：

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

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
tools:context=".MainActivity"
android:background="@color/black">
<TextView
    android:id="@+id/toptitle"
    android:text="Try Our Mouthwatering Pani-Puri"
    android:layout_
    android:layout_
    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_
    android:layout_
    android:scaleType="centerCrop"
    android:src="@drawable/panipuri"
    android:layout_below="@id/toptitle"/>
<TextView
    android:id="@+id/detail"
    android:layout_
    android:layout_
    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_
    android:layout_
    android:layout_margin="35dp"
    android:src="@drawable/ocation"/>
<TextView
    android:id="@+id/location"
    android:layout_
    android:layout_
    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_
    android:layout_
    android:layout_marginLeft="35dp"
    android:layout_marginRight="35sp"
    android:src="@drawable/imgicon"/>
<TextView
    android:id="@+id/timing"
    android:layout_
    android:layout_
    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_
    android:layout_
    android:layout_margin="35sp"
    android:src="@drawable/description"/>
<TextView
    android:id="@+id/des"
    android:layout_
    android:layout_
    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_
    android:layout_
    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

【问题讨论】：

schemas.android.com/apk/res/android" android:id="@+id/ScrollView01" android:layout_ android:layout_> ----- -- 这里是你的相对布局代码 ------ 【参考方案1】：

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

<ScrollView> *CONTENT* </ScrollView>

似乎没有足够的空间来容纳这一切。您可能还想考虑为更适合的水平配置添加不同的布局文件

【讨论】：

【参考方案2】：

欢迎您***。

为了获得更好的用户体验，您应该为横向创建单独的布局。这很容易：

创建一个与 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_
    android:layout_
    tools:context=".MainActivity"
    android:background="@color/black">
   <TextView
       android:id="@+id/toptitle"
       android:text="Try Our Mouthwatering Pani-Puri"
       android:layout_
       android:layout_
       android:layout_centerHorizontal="true"
       android:textSize="25sp"
       android:fontFamily="cursive"
       android:textColor="@color/white"
       />
   <ImageView
       android:id="@+id/image"
       android:layout_
       android:layout_
       android:scaleType="centerCrop"
       android:src="@drawable/panipuri"
       android:layout_below="@id/toptitle"
       android:layout_margin="8dp"/>
   <TextView
       android:id="@+id/detail"
       android:layout_
       android:layout_
       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_
       android:layout_
       android:layout_margin="35dp"
       android:src="@drawable/ocation"/>
   <TextView
       android:id="@+id/location"
       android:layout_
       android:layout_
       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_
       android:layout_
       android:layout_marginLeft="35dp"
       android:layout_marginRight="35sp"
       android:src="@drawable/imgicon"/>
   <TextView
       android:id="@+id/timing"
       android:layout_
       android:layout_
       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_
       android:layout_
       android:layout_margin="35sp"
       android:src="@drawable/description"/>
   <TextView
       android:id="@+id/des"
       android:layout_
       android:layout_
       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_
       android:layout_
       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

快乐编码

【讨论】：

【参考方案3】：

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

【讨论】：

以上是关于我的应用内容在横向模式下被截断的主要内容，如果未能解决你的问题，请参考以下文章

iOS 版 Safari 上垂直弹性框中的最后一个元素在横向模式下被裁剪

iPad 横向模式视图大小不正确

横向调整内容 UITableviewcell 的大小

强制视图仅支持横向模式

UIActionSheet 在横向模式下无法正确显示

如何在 iOS 8 上修复横向导航栏项目的高度？