English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Introduction
In various different applications, you may often encounter an effect like this: the Toolbar is transparent, with a background image and a large title. As the page scrolls up, the title gradually collapses onto the Toolbar, while the background image changes to the color of the Toolbar after scrolling to a certain extent. This effect is also known as the collapsing effect. In fact, there are many open-source libraries that have implemented this effect on GitHub, but Google also provided such a control in its Design Library, making it easy for us to achieve this effect. This control is CollapsingToolbarLayout, which is an enhanced FrameLayout. Therefore, this article will give a detailed introduction to the usage and precautions of this control.
Effect
This article combines a Demo for demonstration. Below is the final display effect, that is, the effect of the collapsing Toolbar:
Introduction
To use this control, you need to introduce the Android Design Library library, and at the same time, we need to modify the app's theme accordingly to adapt to this control, so we also need the appcompat library. Therefore, we introduce it in the build.gradle file as follows:
dependencies {
compile 'com.android.support:cardview'-v7:24.1.0' //cardview
compile 'com.android.support:design:'24.1.0'
compile 'com.android.support:appcompat'-v7:24.1.0'
}
The content of this article is based on the official documentation. Readers who are interested can go to the official documentation for further information (bring your own ladder).
Knowledge Reserve
Next, the author will introduce the usage of this control step by step. First, let's understand the common XML properties of this control.
Chapter 1: Introduction to Common XML Properties
1)contentScrim: The main color displayed when the Toolbar is collapsed to a certain extent. It is the color of the Toolbar.
2)title: When titleEnable is set to true, the large title is displayed when the toolbar is expanded, and the small title above the toolbar is displayed when the toolbar is collapsed.
3)scrimAnimationDuration: This property controls the duration of the color change animation when the toolbar is collapsed. It is the time required for the color to change to the color specified by contentScrim.
4)expandedTitleGravity: Specifies the position of the title when the toolbar is expanded. Similar properties include expandedTitleMargin and collapsedTitleGravity.
5)collapsedTitleTextAppearance: Specifies the style of the title text when the toolbar is collapsed. Similar properties include expandedTitleTextAppearance.
Chapter 2: Common Flags
In general development, CollapsingToolbarLayout does not appear alone in the layout file, but as a child element of another control CoordinatorLayout. Then, what is CoordinatorLayout? In fact, CoordinatorLayout is a very powerful control that can implement various functions for its child elements. A common use case is: setting a layout_scrollFlags attribute for one of its child elements A, and then setting layout_behavior attribute for another child element B.}/The attribute of 'appbar_scrolling_view_behavior', where the child element B is generally a scrollable control, such as RecyclerView, NestedScrollView, etc. When the child element B is scrolled, the child element A will change according to the value of its layout_scrollFlags attribute, so we need to set the layout_scrollFlags attribute for CollapsingToolbarLayout.
layout_scrollFlags
Let's take a look at the attributes that can be selected for layout_scrollFlags:
* scroll: This flag must be set for all sliding controls. If this flag is not set, the View will remain stationary.
* enterAlways: After setting this flag, if the View has slipped out of the screen, when you swipe down with your finger, the View will appear immediately, which is another use case.
* enterAlwaysCollapsed: When both minHeight and this flag are set, the view will occupy the screen with the minimum height and will expand to full height only when the sliding control reaches the top.
* exitUntilCollapsed: When swiping up, the current View collapses. However, the view can be fixed at the top.
It may still be a bit abstract to describe these flags in words. Below, I will demonstrate the specific effects of these flags with actual effects.
layout_collapseMode
As mentioned above, CollapsingToolbarLayout is a FrameLayout that can contain multiple child elements, and these child elements can also exhibit different behaviors. For example, in the above GIF image, the toolbar remains fixed at the top after zooming, while the imageview scrolls along with the layout, indicating a relative scrolling process. Therefore, these child elements can be added the layout_collapseMode flag to produce different behaviors. In fact, there are only two flags here, which are:
* pin: The View with this flag will always stay at the top during the page scrolling process, for example, the Toolbar can be fixed at the top.
* parallax: The View with this flag indicates that it can scroll with the page. An associated property with this flag is: layout_collapseParallaxMultiplier, which is the parallax factor, indicating that there is a difference in the scrolling speed between this View and the page, creating a relative scrolling effect.
III. Common Hierarchical Relationships
As mentioned above, CollapsingToolbarLayout is generally used as a child element of CoordinatorLayout. In fact, to achieve the above effect, another control is needed: AppBarLayout. This control is also a Design library control, which is used to treat all its child elements as an AppBar. Generally, the following hierarchical relationship can be used to implement a collapsing Toolbar:
<android.support.design.widget.CoordinatorLayout...> <android.support.design.widget.AppBarLayout...> <android.support.design.widget.CollapsingToolbarLayout...> <!-- your collapsed view --> <View.../> <android.support.v7.widget.Toolbar.../> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <!-- Scroll view --> <android.support.v7.widget.RecyclerView.../> </android.support.design.widget.CoordinatorLayout>
From the above hierarchical relationship, the outermost layer is CoordinatorLayout, which has two child elements, namely AppBarLayout and RecyclerView (a scrollable control), and AppBarLayout wraps CollapsingToolbarLayout. The child elements of CollapsingToolbarLayout are the folded View (which can be an image or a layout) and our Toolbar.
Example ①
With the above knowledge储备，we can start writing code, our goal is to achieve the effect shown in the above gif image.
1in the activity_main.xml file (note: the following comments are for the sake of explanation):
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" <!-- Custom namespace -->
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@"+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary" <!--toolbar折叠后的主体颜色 -->
app:expandedTitleMarginEnd="10dp" <!--Margin when text is expanded -->
app:expandedTitleMarginStart="10dp"
app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title" <!--Font display -->
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@"+id/iv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" <!--Set the imageView to slide with the sliding control -->
app:layout_collapseParallaxMultiplier="0.5"/> <!--Parallax factor -->
<android.support.v7.widget.Toolbar
android:id="@"+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" /> <!--The toolbar is fixed at the top after collapsing -->
</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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"> <!--Set the Behavior for the sliding control, so that the upper control can make corresponding changes -->
<LinearLayout>
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/item_card"/>
<include layout="@layout/item_card"/>
<include layout="@layout/item_card"/>
<include layout="@layout/item_card"/>
<include layout="@layout/item_card"/>
<include layout="@layout/item_card"/>
<include layout="@layout/item_card"/>
<include layout="@layout/item_card"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
The associated item_card.xml layout file:
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView 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="100dp" android:layout_margin="5dp" app:cardElevation="5dp" app:contentPaddingTop="2dp" app:contentPaddingBottom="2dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Learn and Share Android" android:textSize="20sp" android:layout_gravity="center"/> </android.support.v7.widget.CardView>
2Some additional processing is made in the MainActivity.java file:
private ImageView iv;
private CollapsingToolbarLayout collapsingToolbarLayout;
private Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
iv = (ImageView) findViewById(R.id.iv);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);
collapsingToolbarLayout.setTitle("DesignLibrarySample");
collapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);
collapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);
iv.setImageResource(R.mipmap.ic_bg);
}
Above, we set the title, the color of the title when collapsed, and the color of the title when expanded for collapsingToolbarLayout. After the above simple example, we can achieve the folding Toolbar effect shown in the above gif.
First, let's summarize: under the condition that CoordinatorLayout is the parent layout, we set a layout_behavior="@string" for the sliding control./The 'appbar_scrolling_view_behavior' flag (which the Behavior system and us have implemented) means that when a control with this flag is scrolled, it triggers another control with the 'scroll_flags' flag to scroll. At this time, the imageview's layout_collapseMode is parallax, so it will scroll relatively with parallax effects. The toolbar is set with the 'pin' flag, so it will be fixed at the top of the screen after collapsing.
Example ②
In example ①, we set the scroll_flags for CollapsingToolbarLayout to 'scroll | exitUntilCollapsed'. Then, what would be the different effects if we change the flag?
In activity_main.xml, make the following changes:
<android.support.design.widget.CollapsingToolbarLayout ... app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways">
Then, without making any other changes, the effect is as follows:
It is obvious that the effect has changed. Here, the toolbar is not fixed at the top, but slides out of the screen with the sliding. At the same time, if the finger slides down, the toolbar will gradually appear and maintain the minimum height, and then expand to its original shape when it returns to the top.
Based on the above examples, what would happen if the 'enterAlwaysCollapsed' flag was missing? The function of this flag has already been explained above; it controls the toolbar to enter the screen at the minimum height and expand to the full height when the sliding control is at the top. If this flag is missing, when we slide our fingers down, the toolbar will also gradually appear, but unlike the above gif, the toolbar will continue to expand to its original shape, that is, the appearance of imageview. The picture is not shown here, readers can verify it themselves~
Through the above two small examples, we have gained some understanding of CollapsingToolbarLayout and also learned its usage methods. Using it can make our applications more beautiful. Then, let's talk about the precautions, which is the pit that the author encountered during the development process.
Precautions
1The use of Android Design Support Library requires coordination with specific themes. Generally, themes under AppCompat can be used, or you can create a custom theme that inherits from the AppCompat theme, otherwise an error will occur. In addition, if you use Android Studio, the related code for themes needs to be in styles.xml(v21Make the corresponding modifications in the ) file, otherwise the Android will not work. 5If you test on devices above version 0, an error will also occur.
2Since we use the AppCompat theme, our Activity should inherit from AppCompatActivity.
3The version number of the design support library I used before was23.1.0, in this version, CollapsingToolbarLayout does not set the collapsedTitleTextAppearance attribute, and the title can be displayed normally, however, in24.1In version 0, that is, the version used above, if the collapsedTitleTextAppearance attribute is not set, the title text will become very small after the toolbar is collapsed. Therefore, we need to set collapsedTitleTextAppearance="@style/The attribute 'TextAppearance.AppCompat.Title' must be set to make it normal.
4If no title is set for CollapsingToolbarLayout, it will use the title of the built-in ActionBar to display the application name, because the setSupportActionBar(toolbar) function is called.
Finally, here is the address of the code:DesignSupportLibrarySample
That's all for this article. I hope it will be helpful to everyone's learning and that everyone will support the Yelling Tutorial more.
Statement: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report via email to codebox.com (replace # with @ when sending an email) and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.