【问题标题】:Android: Relative layout content goes below screenAndroid:相对布局内容位于屏幕下方
【发布时间】:2016-02-11 13:47:28
【问题描述】:

我是 android 新手,我只是想创建一个聊天客户端。然而,底部的内容只是离开屏幕。

布局文件:

chat_layout.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"
android:background="#e1e1e1"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/form"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:background="#91f1f1f1"
    android:orientation="horizontal"
    android:paddingBottom="2dp" >

    <ImageButton
        android:id="@+id/sendMessageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="@drawable/send_button"
        android:text="d" />
</LinearLayout>


</RelativeLayout>

activity_mail.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.marothiatechs.mchat.MainActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/appbar_padding_top"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme.PopupOverlay">

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />


</android.support.design.widget.CoordinatorLayout>

这在 Android Studio 的预览窗口中看起来不错。

但是,在我的设备上,图像按钮不可见。

但是当我将线性布局的“paddingBottom”增加为“200dp”时,按钮变得可见。

我在 SO 上发现了类似的问题,其中大多数建议使用 ScrollView。但我认为 ScrollView 在我的情况下是不必要的。有什么想法吗?

【问题讨论】:

  • 添加android:layout_alignParentBottom="true" android:layout_gravity="bottom"
  • 你能发布布局文件的全部内容吗?因为你在那里的东西似乎工作正常
  • 否决我的问题的人会解释原因吗?当我在我的设备上运行代码时,我遇到了一个真正的问题。在 Android Studio 上,它看起来不错。
  • @DalmaRacz - 这是完整的布局文件。我删除了 EditText 等以简化问题。
  • @IntelliJAmiya - 相对布局或线性布局

标签: android android-layout android-fragments


【解决方案1】:

试试这个-

在 LinearLayout 中使用 AppBarLayout 和 ViewPager。

  <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.marothiatechs.mchat.MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/appbar_padding_top"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme.PopupOverlay">

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</LinearLayout>

</android.support.design.widget.CoordinatorLayout>

【讨论】:

  • 非常感谢。有用。你能解释一下它起作用的原因吗?
  • (我英文不好,请调整)。 CoordinatorLayout 是一个父视图,它有 2 个子视图(AppBarLayout 和 ViewPager)。您已将 viewpager 高度设置为 matchparent。所以它的高度将等于 CoordinatorLayout 的高度。例如:CoordinatorLayout 高度为 500dp,现在 viewpager 高度变为 500dp,AppBarLayout 高度为“x”。现在总高度是(500+x)。这就是为什么图像被隐藏。现在在更新的 xml 中,CoordinatorLayout 只有一个孩子(LinearLayout)。 LinearLoyout 有 2 个孩子,所以它会根据他的父布局高度进行调整。我希望你明白了......
  • 哦。现在太明显了。谢谢
  • 帮助很大。
  • 但是layout_scrollFlagsToolbar 不起作用。
【解决方案2】:

您在实现RelativeLayout 时遇到了一些逻辑错误。首先,您不必在RelativeLayout 的情况下设置orientation。其次,您不必将整个表单封装在LinearLayout 中,因为您使用的是RelativeLayout,您可以将视图与其他视图相对排列。所以这里的布局应该是这样的。

<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"
    android:background="#e1e1e1">

    <ImageButton
        android:id="@+id/sendMessageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_vertical_margin"
        android:background="@drawable/ic_face_black_24dp"
        android:text="d" />
</RelativeLayout>

这里是你的activity_main.xml 修改。这是来自我的代码的工作版本。请根据需要进行修改。您可能需要更改 ID。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:id="@+id/container_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:elevation="0dp">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary"
                app:elevation="0dp"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.AppBarLayout>
    </android.support.design.widget.CoordinatorLayout>

</LinearLayout>

【讨论】:

  • 问题仍然存在。我复制粘贴了您的代码,但该按钮仍然不可见。但是,如果我将 android:paddingBottom="150dp" 添加到 ImageButton,按钮开始出现在屏幕上。
  • 问题可能出在我的 activity_main.xml 上吗?将该文件发布到我原来的问题中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-06-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-01-05
相关资源
最近更新 更多