Material Design: CollapsingToolbarLayout, materialdesign

Material Design: CollapsingToolbarLayout, materialdesign

 

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" 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 = "300dip" android: theme = "@ style/ThemeOve Rlay. AppCompat. Dark. ActionBar "> <! -- App: expandedTitleGravity = "left | bottom" the Title position can be set as follows after expansion --> <android. support. design. widget. collapsingToolbarLayout android: id = "@ + id/collapsingToolbarLayout" android: layout_width = "match_parent" android: layout_height = "match_parent" app: layout_scrollFlags = "scroll | preview" app: collapsedTitleGravity = "left" app: contentScrim = "#2196F3" app: expandedTitleMarginStart = "20dp" app: title = "zzw"> <Im AgeView android: id = "@ + id/imageView" android: layout_width = "match_parent" android: layout_height = "match_parent" app: layout_collapseMode = "parallax" app: layout_collapseParallaxMultiplier = "0.1" android: scaleType = "centerCrop" android: src = "@ drawable/bg_default"/> <android. support. v7.widget. toolbar android: id = "@ + id/toolbar" android: layout_width = "match_parent" android: layout_height = "? Attr/actionBarSize "app: layout_collapseMode =" pin "android: minHeight = "? Attr/actionBarSize "> </android. support. v7.widget. toolbar> </android. support. design. widget. collapsingToolbarLayout> </android. support. design. widget. appBarLayout> <android. support. v4.widget. nestedScrollView android: layout_width = "match_parent" android: layout_height = "wrap_content" app: layout_behavior = "@ string/appbar_scrolling_view_behavior"> <android. support. v7.widget. linearLayoutCompat android: layou T_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical" android: padding = "20dip" app: divider = "? Android: attr/listDivider "app: dividerPadding =" 5dp "app: showDividers =" beginning | middle | end "> <TextView android: layout_width =" match_parent "android: layout_height = "wrap_content" android: padding = "50dp" android: text = "0"/> <TextView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: padding = "50dp" android: text = "1"/> <TextView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: padding = "50dp" android: text = "2"/> <TextView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: padding = "50dp" android: text = "3"/> <TextView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: padding = "50dp" android: text = "4"/> <TextView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: padding = "50dp" android: text = "5"/> </android. support. v7.widget. linearLayoutCompat> </android. support. v4.widget. nestedScrollView> <android. support. design. widget. floatingActionButton android: layout_width = "wrap_content" android: layout_height = "wrap_content" app: layout_anchor = "@ id/appBar" app: layout_anchorGravity = "bottom | end | right" android: src = "@ drawable/ic_launcher" app: backgroundTint = "#64b5f6" app: backgroundTintMode = "multiply" app: borderWidth = "0dp" app: elevation = "10dp" app: fabSize = "normal" app: pressedTranslationZ = "20dp" app: rippleColor = "#1976d2"> </android. support. design. widget. floatingActionButton> </android. support. design. widget. coordinatorLayout>

We set an ImageView and a Toolbar in CollapsingToolbarLayout. Put the CollapsingToolbarLayout in AppBarLayout as a whole.

1. In CollapsingToolbarLayout:

We have set layout_scrollFlags: I will talk about its value here:

• Scroll-this is required if you want to scroll.
• EnterAlways-implement the quick return effect. When you move down, View (such as Toolbar) is displayed immediately ).
• ExitUntilCollapsed-the View is reduced when the scroll is up, but the Toolbar can be fixed to always above.
• EnterAlwaysCollapsed-when the minHeight attribute has been set for your View and this flag is used, your View can only enter at the minimum height, and the full height is only extended when the scroll View reaches the top.

Some attributes are also set, which are briefly described as follows:

• ContentScrim-sets the background color after full CollapsingToolbarLayout is collapsed (shrunk.
• ExpandedTitleMarginStart-sets the left padding distance of the title during expansion (when expansion is not completed. You can also use app: expandedTitleGravity = "left | bottom" to set the relative position of the Title.

2. In the ImageView control:

We have set:

• Layout_collapseMode (folding mode)-there are two values: layout_collapseParallaxMultiplier (parallax factor)-set the parallax scroll factor, value: 0 ~ 1.
  • Pin-when set to this mode, the Toolbar can be retained on the screen after CollapsingToolbarLayout is fully shrunk.
  • Parallax-when set to this mode, the View (for example, ImageView) in CollapsingToolbarLayout can also be scrolled at the same time during content scrolling to achieve the parallax scrolling effect, usually with layout_collapseParallaxMultiplier (set the parallax factor).

3. In the Toolbar Control, layout_collapseMode is set to pin. In summary, when the control with layout_behavior is set to respond to the layout_scrollFlags event in CollapsingToolbarLayout, The ImageView will scroll up to remove the screen with the parallax effect, when the folding starts, the background color of CollapsingToolbarLayout (that is, the background color of the Toolbar) is changed to the Set background color, and the Toolbar is always at the top. [Note]: When you use CollapsingToolbarLayout, you must set the title to CollapsingToolbarLayout, which is not displayed on the Toolbar. That is, mCollapsingToolbarLayout. setTitle (""); font color of the title to be changed: title Color during expansion: mCollapsingToolbarLayout. setExpandedTitleColor (); the title Color displayed on the Toolbar after the contraction: mCollapsingToolbarLayout. setCollapsedTitleTextColor (); in fact, the excessive color change in CollapsingToolbarLayout has already helped us, and it will automatically over. JAVA code:

Package com. zzw. testcollapsingtoolbarlayout; import android. app. activity; import android. graphics. color; import android. OS. bundle; import android. support. design. widget. collapsingToolbarLayout; import android. support. v7.widget. toolbar; public class MainActivity extends Activity {@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById (R. id. collapsingToolbarLayout); mCollapsingToolbarLayout. setTitle ("CollapsingToolbarLayout"); // set the title mCollapsingToolbarLayout. setExpandedTitleColor (Color. RED); // set the font color in the scaled state to mCollapsingToolbarLayout. setCollapsedTitleTextColor (Color. WHITE); // set the Color Toolbar mToolbar = (Toolbar) findViewById (R. id. toolbar); mToolbar. setLogo (R. drawable. ic_launcher); mToolbar. setNavigationIcon (android. r. drawable. ic_menu_delete );}}