覆盖viewpager内容的Android导航栏

     2023-04-18     101

关键词:

【中文标题】覆盖viewpager内容的Android导航栏【英文标题】:Android Navigation Bar covering viewpager content 【发布时间】:2015-08-27 22:23:51 【问题描述】:

我无法阻止系统导航栏掩盖我的内容!

我滚动到 recyclerview 的最底部,但它隐藏在导航栏后面。这是我的 XML 布局。

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/root"
android:layout_
android:layout_
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_
    android:layout_
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <include layout="@layout/toolbar"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_
        android:layout_ />

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

<android.support.v4.view.ViewPager
    android:fitsSystemWindows="true"
    android:id="@+id/viewpager"
    android:layout_
    android:layout_
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<com.melnykov.fab.FloatingActionButton
    android:id="@+id/fab"
    android:layout_
    android:layout_
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    app:fab_colorNormal="@color/accent"
    app:fab_colorPressed="@color/accent_dark" />

这是您在图片中看到的片段布局。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_
android:orientation="vertical"
android:padding="8dp">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_
    android:layout_
    android:scrollbars="vertical"/>

</FrameLayout>

我尝试将 android:fitsSystemWindows="true" 添加到我可以的每一块布局中,但这不起作用。其他线程提到添加从条形计算的边距,但这似乎不是正确的解决方案。我直接从 Google 的 CheesSquare 应用程序演示中获取了这个布局,该应用程序演示了 appbarlayout,它看起来工作正常。

【问题讨论】:

不,活动不是全屏的。这是一个标准的活动,没有特殊的标志或任何东西。 将合适的 margin_bottom 添加到您的 RecyclerView 或根视图。这应该可以解决您的问题。 这是一个很好的解决方法,但我正试图找到问题的根源。这似乎不是正常行为。 我也有确切的问题:( 你解决过这个问题吗? 【参考方案1】:

我想通了。在我的特殊情况下,我的每个片段都管理自己的工具栏实例。我在片段的 onViewCreated() 方法中调用 setSupportActionBar()。将此功能移至 onCreateView() 解决了它。

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) 
        View view = inflater.inflate(R.layout.fragment_my_account, container, false);
        setupToolbar((Toolbar) view.findViewById(R.id.toolbar));
        return view;
    

    private void setupToolbar(Toolbar toolbar) 
        toolbarController.registerToolbar(toolbar);
        toolbarController.setActivityTitle("My Account");
    

(registerToolbar() 在宿主活动中调用 setSupportActionBar())。

希望对大家有帮助!

【讨论】:

这里的toolbarController是什么? 天哪,这真的不简单【参考方案2】:

Viewpager 的片段根视图必须是RecyclerViewNestedScrollViewFrameLayout 不支持 CoordinatorLayout 的滚动行为,这就是它不能正常工作的原因。

如何修复 viewpager 的片段布局:不要将 RecyclerView 包裹在 FrameLayout 中。而是在根目录下声明 RecyclerView。您也可以在RecyclerView 上设置padding="8dp",只需使用android:clipToPadding="false"

【讨论】:

我在 CoordinatorLayout 中使用 Srcollview,遇到了类似的问题,可以解决【参考方案3】:

然后将 ViewPager 包装到 ConstraintLayout 中,设置为您的 viewpager:

app:layout_constraintBottom_toBottomOf="parent"

应该可以的

【讨论】:

【参考方案4】:

问题在于AppBarLayout 的使用。 CoordinatorLayout 是作为强大的FrameLayout 引入的,它基于定义的Behaviors 带来了漂亮的动画。如果我们想添加某种scroll动画,比如collapsing toolbar等,那么我们必须用AppBarLayout包裹我们的Toolbar,但是当我们想在CoordinatorLayout里面放置一个静态内容时,比如ViewPager 在你的情况下,那么我们根本不需要使用AppBarLayout

activity_main.xml:

<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:layout_
    android:layout_
    android:fitsSystemWindows="true"
    tools:context="com.mydemoci.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_
        android:layout_
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

    <include layout="@layout/content_main"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_
        android:layout_
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"/>

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

content_main.xml:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:background="#A1D490"

    // Remember CoordinatorLayout is a kind of FrameLayout,
    // so we have to provide top margin to make Toolbar visible
    android:layout_marginTop="?attr/actionBarSize"

    tools:context="com.mydemoci.MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:layout_
        android:layout_
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@color/colorAccent"
        android:text="Hello World"
        android:textSize="30sp"/>

</RelativeLayout>

【讨论】:

我认为您根本不应该添加 marginTop。对于更灵活的解决方案 - 使用选项卡或 collapsingtoolbarlayouts 处理应用栏布局,您应该将工具栏包装在 appbarlayout 中并使用 app:layout_behavior="@string/appbar_scrolling_view_behavior"【参考方案5】:

转到 style.xml 并删除这两项,或将它们的“true”值设置为“false”。

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

在我的例子中,问题是通过删除这两个主题样式值来解决的。

【讨论】:

【参考方案6】:

只需将边距底部添加到View Pager 为我修复它。

这是我的 activity_main.xml 中的代码

<android.support.v4.view.ViewPager
    android:id="@+id/main_viewPager"
    android:layout_
    android:layout_
    android:layout_marginBottom="55dp"/>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_
    android:layout_
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation" />

【讨论】:

【参考方案7】:

尝试替换你的gradle依赖

com.android.support:recyclerview-v7:22.0.+

com.android.support:recyclerview-v7:22.2.0 

com.android.support:recyclerview-v7:+

(不确定这是正确的符号)

【讨论】:

app的页面的底部导航设计

...置所有TextView的状态,然后选中点击的TextView二、RadioGroup+ViewPager实现我们只需重写RadioGroup的onCheckedChange,判断checkid即可知道点击的是哪个RadioButton,再给ViewPager设置监听,让底部导航栏和viewpager同步就行了。三、BottomNavigationView... 查看详情

android开发----生成android底部导航栏(代码片段)

...自动生成底部导航栏使用BottomNavigationActivity+Fragment+ViewPager实现底部导航栏文章目录Android利用androidstudio自动生成底部导航栏使用BottomNavigationActivity+Fragment+ViewPager实现底部导航栏1.新建项目,选择BottomNavigationActivity... 查看详情

推送视图控制器中的半透明导航栏覆盖?

】推送视图控制器中的半透明导航栏覆盖?【英文标题】:Translucentnavigationbaroverridesinpushedviewcontroller?【发布时间】:2017-04-0113:25:54【问题描述】:我有一个内容模糊的半透明导航栏。我想推送一个带有另一个半透明导航栏但没... 查看详情

使用导航组件来回导航时,ViewPager 的内容消失

】使用导航组件来回导航时,ViewPager的内容消失【英文标题】:ContentofViewPagerdisappearswhennavigatingbackandforthusingNavigationComponents【发布时间】:2019-09-0800:25:25【问题描述】:将导航迁移到新的Jetpack导航组件后,我发现在使用库来回... 查看详情

react-native bottomTabNavigator 被Android系统导航栏部分覆盖

】react-nativebottomTabNavigator被Android系统导航栏部分覆盖【英文标题】:react-nativebottomTabNavigatorispartiallycoveredbyAndroidsystemnavigationbar【发布时间】:2021-05-2601:06:01【问题描述】:我正在为即将到来的顶点项目学习react-native。我正在设... 查看详情

tablayout+viewpager制作简单导航栏(代码片段)

绑定viewpager此处主要说明tablayout的使用方法,viewpager绑定fragment的介绍在其他文章说明mBinding.tabsLayout.setupWithViewPager(mBinding.vpTabs);常见问题切记,一定要先绑定viewpage再添加tab,否则tab的标题无法正常显示出来setupwithviewpager会在后... 查看详情

叠加在内联导航栏之上

...提醒,然后在提醒之外点击以将其关闭。我希望深色背景覆盖也覆盖导航栏。这适用于默认的大文本样式导航栏,但是当我将其更改为内联导航栏时,深色背景不再覆盖导航。有解决办法吗?importSwiftUIstruc 查看详情

tablayout实现顶部导航(代码片段)

...式及解析我们在实现顶部导航的时候,可以有多种选择:ViewPagerIndicator+Fragment+ViewPagerActionBar+Fragment+ViewPager自定义一个View实现基于第一种需要和activity的主题相结合,对activity主题的限制比较高,第二种actionBar耦合也高,第三种... 查看详情

使用viewpager和fitssystemwindow控制状态栏(代码片段)

我有一个ViewPager与Fragments,其中包含全屏图像和一些底部对齐的控件。我想确保控件不会在fitsSystemWindow的半透明导航栏后面消失,但我似乎无法使它工作......当我在没有ViewPager的情况下使用相同的xml时它确实有效,所以看起来Vi... 查看详情

覆盖 Titanium 中导航栏的 always-top 属性

】覆盖Titanium中导航栏的always-top属性【英文标题】:Overridingthealways-toppropertyofthenavigationbarinTitanium【发布时间】:2012-06-0121:50:25【问题描述】:在iPhone版Titanium中,是否可以在导航栏上方显示某些内容-或者只是禁用导航栏的always-... 查看详情

导航栏后面的内容

...Bar【发布时间】:2016-06-1107:19:37【问题描述】:我在使用android5.0及更高版本时遇到问题。每当我将任何视图与父底部对齐时,内容都会隐藏在软导航按钮后面。以上是从AndroidStudio1.5创建新项目后生成的屏幕截图。我刚刚在片段... 查看详情

仿饿了么首页导航栏(viewpager)

1、需求分析在饿了么首页中我们能看到这样的布局(如下图)。红框内是一个可以左右滑动的页面,每一个页面类似于九宫格,都有可供点击图标。对于这样的布局,我在网上找了很久都没有找到相关的名称,所以我这里暂时... 查看详情

带有viewpager2 android的导航图

】带有viewpager2android的导航图【英文标题】:Navigationgraphwithviewpager2android【发布时间】:2022-01-2108:53:14【问题描述】:我的viewpager由2个片段组成,它们显示正确且工作正常。从viewpager的片段我想通过导航图移动到另一个片段这是... 查看详情

TabBarViewController 的导航栏覆盖来自导航控制器的导航栏

】TabBarViewController的导航栏覆盖来自导航控制器的导航栏【英文标题】:NavigationbarofTabBarViewControllercoversNavigationBarfromNavigationController【发布时间】:2018-12-0809:09:10【问题描述】:我正在尝试使用导航控制器中的导航栏,同时使用U... 查看详情

iOS 7 导航栏隐藏内容

...航栏(iOS7中的新巨人)我的内容是隐藏的。顶部导航栏覆盖它。如果我使用CGRect手动将其向下移动,它在iOS7中看起来不错,但现在iOS6看起来很糟糕(上面有 查看详情

bottomnavigationview结合viewpager

...p,在上一个项目开发中我们使用了Google的BottomNaviationView与ViewPager相结合搭建了UI框架,现项目已经完成,总结如下:使用BottomNaviationView需要添加依赖库:在appmoudle里面的build. 查看详情

android将app的内容延伸到状态栏/导航栏

...CSDN博客:http://blog.csdn.net/dahaohan/article/details/52175190看过Android的桌面应用都是介样的:如何让自己的应用也达到这般效果呢?这里就介绍几种常用的方法以及它们之间的区别。首先展示下此次demo的布局和初始状态:初始效果图如... 查看详情

androidviewpager+fragment实现导航栏(可以左右滑动)

...增标题的时候可以直接在list里添加RadioButton的id,简约了ViewPage滑动定位到相应的RadioButton和相应的Fragment,不用when每个id去判断。增加标题时也要add对应的Fragment继承FragmentStatePagerAdapter。当ViewPager中的Fragment数量相对较多时继承Fr... 查看详情