Android FrameLayout 托管 viewPager 会占用所有可用空间。

Question

大家好，我正在尝试创建一个类似AirBnb应用程序的“教程”，其中包含不同的图像和文本（均托管在Fragment内），并由FrameLayout中的（Fragment）ViewPager管理。

与上面的示例一样，我还想在屏幕底部显示两个按钮，但我的问题是包含ViewPager的FrameLayout会消耗所有可用空间，因此隐藏了包含按钮的LinearLayout。

这是一个奇怪的情况，因为布局非常简单，我尝试了不同的方法，但都没有解决我的问题。我检查了布局的根元素是否为fill_parent模式，并且还检查了所有其他布局是否避免超出其所需空间以显示其信息的增长。

以下是一些代码片段，用于每个由FragmentViewPager显示的子Fragment的xml布局：

activity-tutorial.xml（我已经尝试使用LinearLayout作为根元素而不是RelativeLayout，但没有任何变化）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<FrameLayout
    android:id="@+id/pager_framelayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/tutorial_pager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/circle_indicator"
        android:padding="@dimen/general_padding"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:background="@null" 
        android:layout_gravity="bottom" />
</FrameLayout>

<LinearLayout 
    android:id="@+id/buttons_bottom_layout"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:orientation="horizontal"
    android:weightSum="100"
    android:layout_below="@id/pager_framelayout">

    <Button 
        android:id="@+id/sign_up_btn"
        android:padding="@dimen/general_padding"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_weight="50"
        android:text="Sign UP" />

    <Button 
        android:id="@+id/login_btn"
        android:padding="@dimen/general_padding"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_weight="50"
        android:text="Login" />
</LinearLayout>
</RelativeLayout>

fragment_tutorial_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >

<ImageView 
    android:id="@+id/tutorial_screen_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"/>

<TextView 
    android:id="@+id/tutorial_screen_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="@dimen/general_padding"
    android:background="@null"
    android:layout_gravity="bottom"/>
</FrameLayout>

以下是实例化片段并使用信息填充视图的Java代码：

TutorialScreenFragment.java

{ //...
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    // Identify and set fields!
    ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.subfragment_tutorial_screen, container, false);
    image = (ImageView) rootView.findViewById(R.id.tutorial_screen_image);
    title = (TextView) rootView.findViewById(R.id.tutorial_screen_title);
    return rootView;
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    // Populate fields with info!
    if (TutorialActivity.class.isInstance(getActivity())) {
        title.setText(titleResId);
        // Call Glide to load image
        Glide.with(this)
        .load(imageResId)
        .centerCrop()
        .placeholder(R.drawable.image_placeholder)
        .into(image);
    }
}
/...
}

一切都运行良好，并且显示当前页面的点，但按钮根本没有显示。这是我的应用程序结果:

感谢。

- fiipi

Answer 1

您需要更改布局的行为。首先，将您的LinearLayout与父视图底部对齐。然后将您的FrameLayout放置在LinearLayout的上方。就像这样：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<FrameLayout
    android:id="@+id/pager_framelayout"
    android:layout_width="fill_parent"
    android:layout_above="@+id/buttons_bottom_layout"
    android:layout_height="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/tutorial_pager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/circle_indicator"
        android:padding="@dimen/general_padding"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:background="@null" 
        android:layout_gravity="bottom" />
</FrameLayout>

<LinearLayout 
    android:id="@+id/buttons_bottom_layout"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:orientation="horizontal"
    android:weightSum="100"
    android:layout_alignParentBottom="true">

    <Button 
        android:id="@+id/sign_up_btn"
        android:padding="@dimen/general_padding"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_weight="50"
        android:text="Sign UP" />

    <Button 
        android:id="@+id/login_btn"
        android:padding="@dimen/general_padding"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_weight="50"
        android:text="Login" />
</LinearLayout>
</RelativeLayout>

- romtsn

---

我不得不使用android:layout_alignParentBottom="true"，但它运行良好！太棒了！谢谢！你知道为什么会发生这种情况吗？有没有在线资源可以解释这种情况？再次感谢。 - fiipi

没错，应该是 android:layout_alightParentBottom="true"，是我的错误。你的 ViewPager 是全屏的，所以底部按钮在 ViewPager 下面，也就是超出了屏幕。 - romtsn