最近研究Material Design,觉得它的各种联动效果挺赞,比如CollapsingToolbarLayout的使用,使得屏幕上下滑动时标题栏收缩与展开的效果就很棒,就做了些demo练习使用。结果就遇到了不少奇怪问题。比如这个有关WebView的问题:
WebView加载javaScript脚本,结果内容显示不出来,只有给WebView设置了很大的layout_margin并且向上滑动的时候才能显示出来。
具体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"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="16dp"
app:collapsedTitleTextAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"
app:expandedTitleTextAppearance="@style/Base.TextAppearance.AppCompat.Headline"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/news_detail_header_image"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<WebView
android:id="@+id/webview"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:onClick="checkin"
android:src="@drawable/fav_normal"
app:fabSize="mini"
app:borderWidth="0dp"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
尝试了各种方法,比如去掉app:layout_behavior="@string/appbar_scrolling_view_behavior" 这句,结果是显示出来了,但是标题栏却被覆盖住了,最后在stackoverflow上找到了解决方案。那就是把com.android.support:design:升级到22.2.1及以上,问题解决。