目录
难道不修改会报错?由于没有5.0以前的系统模拟器,过段时间回来测试一下。
1.概述
1.1 定义
CollapsingToolbarLayout(可折叠式标题栏)是一个作用于Toolbar基础之上的布局,可以让Toolbar的效果变得更加丰富,是由Design Support库提供的
CollapsingToolbarLayout不能独立存在,它被限定只能作为AppBarLayout的直接子布局来使用。而AppBarLayout又必须是CoordinateLayout的字布局。 CoordinateLayout需要配合支持嵌套滚动的控件才能直线折叠效果。
1.2 原理
CollapsingToolbarLayout在折叠之后就是一个普通的Toolbar。
2.案例
2.1 展示效果
1)初始未折叠效果:图片正常显示
2)向上滚动开始处于折叠状态的效果:图片发生错位偏移
3)折叠完成效果:图片隐藏不见
2.2 创建布局
在activity_main.xml中添加CollapsingToolbarLayout,为其设置属性和为子控件设置属性
<?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.support.design.widget.AppBarLayout android:id="@+id/appBar" android:layout_width="match_parent" android:layout_height="250dp"> <!-- 添加CollapsingToolbarLayout,为其设置属性 --> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:contentScrim="?attr/colorAccent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <!-- 添加图片,为其设置属性 --> <ImageView android:id="@+id/image_view" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/image_back" android:scaleType="centerCrop" app:layout_collapseMode="parallax"/> <!-- 添加标题栏,为其设置属性 --> <android.support.v7.widget.Toolbar android:id="@+id/toolbars" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <!-- 添加滚动NestedScrollView --> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="800dp" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:background="#555454"> <LinearLayout android:layout_width="match_parent" android:layout_height="800dp" android:orientation="vertical" android:layout_margin="15dp" android:background="#FFFFFF"> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:background="#303030" android:text="This is text!" android:textSize="20sp" android:textColor="#e70969"/> </LinearLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>
2.3 属性解析
在上面布局中,添加了很多属性,下面是解析:
app:contentScrim 用于指定CollapsingToolbarLayout在趋于折叠状态及折叠状态完成之后的背景色 app:layout_scrollFlags 用于指定CollapsingToolBarLayout随着滚动而显示的效果
scroll:表示CollapsingToolBarLayout会随着文字滚动而一起滚动
exitUntilCollapsed:表示CollapsingToolBarLayout随着滚动完成折叠之后就保留在界面上,
不再移除屏幕。
app:layout_collapseMode 用于指定当前控件在CollapsingToolBarLayout折叠过程中的折叠模式
这里ImageView指定成parallax,表示图片会在折叠过程中产生一定的错位偏移,视觉效果很好。
这里Toolbar指定成pin,表示在折叠过程中其位置始终保持不变。
2.4 业务处理
在MainActivity.java中可以对CollapsingToolbarLayout进行很多的设置
public class MainActivity_4 extends AppCompatActivity { private CollapsingToolbarLayout collapsingToolbarLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_4); Toolbar toolbar = findViewById(R.id.toolbars); setSupportActionBar(toolbar); collapsingToolbarLayout = findViewById(R.id.collapsing_toolbar); //设置标题 collapsingToolbarLayout.setTitle("hello world"); } }
2.5 优化:充分利用系统状态栏空间
在前面的效果展示图中,系统的状态栏存在与背景图的上方,感觉很丑。如何将系统状态栏和背景图融合到一起?
在Android 5.0之前是无法对系统状态栏的背景或者颜色进行操作的,那个时候还没有Material Design的概念。Android 5.0之后的系统支持这个功能。在5.0之后的系统中,使用背景图和状态栏融合的模式,在5.0之前的使用普通模式。
想要背景图和系统状态栏融合,需要借助android:fitsSystemWindows这个属性来实现。在上面的布局中,将CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout这种嵌套结构的布局中中设置android:fitsSystemWindows=“true”属性,表示该控件会出现在系统状态栏里面;必须将ImageView的所有父布局都设置上这个属性才可以。
设置后的布局如下所示:
<?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:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appBar" android:layout_width="match_parent" android:layout_height="250dp" android:fitsSystemWindows="true"> <!-- 添加CollapsingToolbarLayout,为其设置属性 --> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:contentScrim="?attr/colorAccent" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true"> <!-- 添加图片,为其设置属性 --> <ImageView android:id="@+id/image_view" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/image_back" android:scaleType="centerCrop" app:layout_collapseMode="parallax" android:fitsSystemWindows="true"/> <!-- 添加标题栏,为其设置属性 --> <android.support.v7.widget.Toolbar android:id="@+id/toolbars" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> ...... </android.support.design.widget.CoordinatorLayout>
注意:设置好android:fitsSystemWindows=“true”属性后还是没有用的,必须得在程序主题中将状态栏的颜色指定成透明色才可以。
设置透明色的方法很简单,在主题中将android:statusBarColor属性的值指定为:@android:color/transparent就可以了。这里又出现一个问题,android:statusBarColor这个属性是从API 21(也就是Android 5.0系统)才开始有的。之前的系统无法指定这个属性,因此要进行系统的差异性处理,如下所示:
1)右击res,创建values-21目录,然后在其目录下创建styles.xml,如下所示:
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="MainActivityTheme" parent="AppTheme"> <item name="android:statusBarColor">@android:color/transparent</item> </style> </resources>
上述定义了一个MainActivityTheme主题,其父类是AppTheme,继承了父类中的所有特性。将状态栏的颜色设置为透明色,由于values-21目录只有Android 5.0及以上的系统才会去读取,但是5.0之前的系统无法识别MainActivityTheme这个主题,因此还需要对values/styles.xml文件进行修改。
难道不修改会报错?由于没有5.0以前的系统模拟器,过段时间回来测试一下。
2)对values/styles.xml文件进行修改,添加MainActivityTheme主题
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="MainActivityTheme." parent="AppTheme"></style> </resources>
这里添加了MainActivityTheme主题,并且其parent主题也是AppTheme,但是其内部是空的,因为5.0之前的系统是无法识别指定状态栏的颜色的。因此这里什么都不做就可以了。
3)修改AndroidManifest.xml,为MainActivity添加MainActivityTheme
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.luckyliuqs.materialdesign"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:theme="@style/MainActivityTheme"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
效果图如下所示:背景图和状态栏完全融合在一起了