首页 \ 问答 \ CoordinatorLayout + CollapsingToolbarLayout在状态栏下方滚动(CoordinatorLayout + CollapsingToolbarLayout scrolling underneath the status bar)

CoordinatorLayout + CollapsingToolbarLayout在状态栏下方滚动(CoordinatorLayout + CollapsingToolbarLayout scrolling underneath the status bar)

我的布局有一个奇怪的问题。 我有一个带有CollapsingToolBarLayoutCoordinatorLayout 。 我有一个透明的状态栏,以更好地显示顶部的图像。 因此我在此ImageView上设置了fitsSystemWindow 。 我现在遇到的问题是,当工具栏完全折叠时,工具栏的顶部会滚动到系统状态栏后面。 有没有办法防止这种行为?

以下是截图:

完全开放

几乎关闭

完全崩溃了

这是我的布局:

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/coordinatorLayout">
<android.support.design.widget.AppBarLayout
    android:id="@+id/main_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/main_collapsing"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="140dp"
        app:expandedTitleMarginBottom="90dp"
        app:expandedTitleMarginEnd="64dp"
        android:fitsSystemWindows="true">
        <ImageView
            app:layout_collapseMode="parallax"
            android:id="@+id/icon"
            android:transitionName="pic"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/missing_album_art"
            android:tint="#AA000000"
            android:fitsSystemWindows="true"/>
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="20dp"
            app:layout_collapseMode="parallax">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:padding="20dp"
                android:orientation="horizontal">
                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:id="@+id/smallicon"/>
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:layout_gravity="bottom"
                    android:padding="20dp">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/artist"
                        android:ellipsize="end"
                        android:singleLine="true"
                        android:textSize="24sp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="end"
                        android:singleLine="true"
                        android:id="@+id/date"/>
                </LinearLayout>
            </LinearLayout>
        </FrameLayout>
        <android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:id="@+id/list"
    android:dividerHeight="2dp"
    android:transitionName="bottom">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>

此外,我在创建活动时稍微调整了布局参数:

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

I have an odd problem with my layouts. I have a CoordinatorLayout with a CollapsingToolBarLayout in it. I have a transparent status bar to better display the image in the top. Thus I have fitsSystemWindow set on this ImageView. The problem I now have is that when the Toolbar is fully collapsed, the top part of the toolbar scrolls behind the system status bar. Is there a way to prevent this behavior?

Here are the screenshots:

Fully open

Almost closed

fully collapsed

Here is my layout:

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/coordinatorLayout">
<android.support.design.widget.AppBarLayout
    android:id="@+id/main_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/main_collapsing"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="140dp"
        app:expandedTitleMarginBottom="90dp"
        app:expandedTitleMarginEnd="64dp"
        android:fitsSystemWindows="true">
        <ImageView
            app:layout_collapseMode="parallax"
            android:id="@+id/icon"
            android:transitionName="pic"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/missing_album_art"
            android:tint="#AA000000"
            android:fitsSystemWindows="true"/>
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="20dp"
            app:layout_collapseMode="parallax">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:padding="20dp"
                android:orientation="horizontal">
                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:id="@+id/smallicon"/>
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:layout_gravity="bottom"
                    android:padding="20dp">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/artist"
                        android:ellipsize="end"
                        android:singleLine="true"
                        android:textSize="24sp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="end"
                        android:singleLine="true"
                        android:id="@+id/date"/>
                </LinearLayout>
            </LinearLayout>
        </FrameLayout>
        <android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:id="@+id/list"
    android:dividerHeight="2dp"
    android:transitionName="bottom">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>

Also, I tweak the layout parameters a bit when creating the activity:

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

原文:https://stackoverflow.com/questions/37163511
更新时间:2022-11-03 19:11

最满意答案

要使占位符正常工作,您需要将一个空选项添加到选择列表中,如下所示:

<select class="select2" style="width:100%" id="selectme">
    <option value=""></option>
    <option value="oldest">Person 1</option>
    <option value="oldest">Person 2</option>
    <option value="oldest">Person 3</option>
</select>

FIDDLE DEMO


For placeholders to work properly you need a empty option to be added to the select list like:

<select class="select2" style="width:100%" id="selectme">
    <option value=""></option>
    <option value="oldest">Person 1</option>
    <option value="oldest">Person 2</option>
    <option value="oldest">Person 3</option>
</select>

FIDDLE DEMO

相关问答

更多
  • 因为你的$(this)表明它是一个select元素。 你需要找到它的兄弟.select2-container ,这是UI上显示的内容。 在这个兄弟姐妹中找到.select2-selection__placeholder并改变它的颜色。 所以使用此代码。 $(this).siblings('.select2-container').find('.select2-selection__placeholder').css('color', 'red'); Since your $(this) shows tha ...
  • 如果你想从数组中选择一些选项,你的html应该包含该选项。 例如,如果您想设置“印象”被选中,请将您的html更改为以下内容: 如果你想为你的选项提供一些value ,你应该改变你的数组是一个对象数组。 有关更多详情,请查看此链接。 If you want have some option to be selected from array, your html sho ...
  • 您必须将select2定义为 $("#customers_select").select2({ placeholder: "Select a customer", initSelection: function(element, callback) { } }); 要重置select2 $("#customers_select").select2("val", ""); You must define the select2 as $("#c ...
  • 不知道是什么原因造成你的问题,因为它应该工作正常。 但是这里的一个小技巧可以让你得到你想要的东西。 只需将原始select元素的值设置为empty并trigger其更改event 。 例如: $("#reset").on('click', function(e){ $("#select").val('').trigger('change'); }); Updated Pen HERE Not sure what is causing you the problem here, because it ...
  • 要使占位符正常工作,您需要将一个空选项添加到选择列表中,如下所示: ... 你应该使用$('#my_super_selector')。 试一试,让我知道! 干杯! Can you include your ...

相关文章

更多

最新问答

更多
  • python的访问器方法有哪些
  • 使用Zend Framework 2中的JOIN sql检索数据(Retrieve data using JOIN sql in Zend Framework 2)
  • 透明度错误IE11(Transparency bug IE11)
  • linux的基本操作命令。。。
  • 响应navi重叠h1和nav上的h1链接不起作用(Responsive navi overlaps h1 and navi links on h1 isn't working)
  • 在C中读取文件:“r”和“a +”标志的不同行为(Reading a File in C: different behavior for “r” and “a+” flags)
  • NFC提供什么样的带宽?(What Kind of Bandwidth does NFC Provide?)
  • 元素上的盒子阴影行为(box-shadow behaviour on elements)
  • Laravel检查是否存在记录(Laravel Checking If a Record Exists)
  • 设置base64图像的大小javascript - angularjs(set size of a base64 image javascript - angularjs)
  • 想学Linux 运维 深圳有哪个培训机构好一点
  • 为什么有时不需要在lambda中捕获一个常量变量?(Why is a const variable sometimes not required to be captured in a lambda?)
  • 在Framework 3.5中使用服务器标签<%=%>设置Visible属性(Set Visible property with server tag <%= %> in Framework 3.5)
  • AdoNetAppender中的log4net连接类型无效(log4net connection type invalid in AdoNetAppender)
  • 错误:发送后无法设置标题。(Error: Can't set headers after they are sent. authentication system)
  • 等待EC2实例重启(Wait for an EC2 instance to reboot)
  • 如何在红宝石中使用正则表达式?(How to do this in regex in ruby?)
  • 使用鼠标在OpenGL GLUT中绘制多边形(Draw a polygon in OpenGL GLUT with mouse)
  • 江民杀毒软件的KSysnon.sys模块是什么东西?
  • 处理器在传递到add_xpath()或add_value()时调用了什么顺序?(What order are processors called when passed into add_xpath() or add_value()?)
  • sp_updatestats是否导致SQL Server 2005中无法访问表?(Does sp_updatestats cause tables to be inaccessible in SQL Server 2005?)
  • 如何创建一个可以与持续运行的服务交互的CLI,类似于MySQL的shell?(How to create a CLI that can interact with a continuously running service, similar to MySQL's shell?)
  • AESGCM解密失败的MAC(AESGCM decryption failing with MAC)
  • SQL查询,其中字段不包含$ x(SQL Query Where Field DOES NOT Contain $x)
  • PerSession与PerCall(PerSession vs. PerCall)
  • C#:有两个构造函数的对象:如何限制哪些属性设置在一起?(C#: Object having two constructors: how to limit which properties are set together?)
  • 平衡一个精灵(Balancing a sprite)
  • n2cms Asp.net在“文件”菜单上给出错误(文件管理器)(n2cms Asp.net give error on Files menu (File Manager))
  • Zurb Foundation 4 - 嵌套网格对齐问题(Zurb Foundation 4 - Nested grid alignment issues)
  • 湖北京山哪里有修平板计算机的