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

2023年3月28日 188次阅读

大家好,我正在尝试使用不同的图像和文本(都在片段内托管)创建一个“教程”(就像AirBnb应用程序中的这个),并由FrameLayout中的(Fragment)ViewPager管理.

作为上面的示例,我还想在屏幕底部显示两个按钮,我的问题是包含ViewPager的FrameLayout会占用所有可用空间,从而隐藏包含按钮的LinearLayout.

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

以下是一些片段,活动的xml布局以及FragmentViewPager显示的每个子片段：

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>

以及用于实例化片段并使用info填充视图的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);
    }
}
/...
}

一切正常,也显示当前页面的点,但按钮根本不显示.这是我的应用结果：

谢谢.

最佳答案 您需要更改布局的行为.首先,将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>
点赞