CoordinatorLayout use notes, coordinatorlayout

CoordinatorLayout use notes, coordinatorlayout

Use notes for CoordinatorLayout

First, the first child control is the AppBarLayout header control, which containsCollapsingToolbarLayout. The Code is as follows:

<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 = "# b06ee2" // The collapsed color.
App: expandedTitleMarginEnd = "64dp"
App: expandedTitleMarginStart = "48dp"
App: layout_scrollFlags = "scroll | exitUntilCollapsed" // sets the scroll animation.
App: title = "title"
>

<ImageView
Android: id = "@ + id/backdrop"
Android: layout_width = "match_parent"
Android: layout_height = "match_parent"
Android: fitsSystemWindows = "true"
Android: scaleType = "centerCrop"
Android: src = "@ drawable/fengzheng"
App: layout_collapseMode = "parallax" // disappears after scrolling
/>

<Android. support. v7.widget. Toolbar
Android: id = "@ + id/toolbar"
Android: layout_width = "match_parent"
Android: layout_height = "? Attr/actionBarSize"
App: layout_collapseMode = "pin" // fixed to the top after scrolling
App: popupTheme = "@ style/ThemeOverlay. AppCompat. Dark"
/>

</Android. support. design. widget. CollapsingToolbarLayout>
</Android. support. design. widget. AppBarLayout>

CollapsingToolbarLayout has two Children. ImageView columns used to display a large image. The Toolbar is the top bar displayed after being folded.

 

App: contentScrim = "? Attr/colorPrimary ", CollapsingToolbarLayout is used to set the color of the collapsed Toolbar.

 

1. Collapsing title: ToolBar title. When CollapsingToolbarLayout is not folded in full screen, the title displays a large font. During the folding process, the title becomes smaller to a certain size. You can call setTitle (CharSequence) to set the title.
2. Content scrim: Specifies the background when the ToolBar is folded to the top. You can call the setContentScrim (Drawable) method to change the background or use app: contentScrim = "in the property "? "Attr/colorPrimary" to change the background.
3. Status bar scrim: the background of the Status bar. Call setStatusBarScrim (Drawable ). I haven't figured it out yet, but it can only be effective in systems above android.
4. When Parallax scrolling children: CollapsingToolbarLayout slides, the visual difference of the subview can be changed by Attributes app: layout_collapseParallaxMultiplier = "0.6. The value range of de is [0.0, 1.0]. The larger the value, the larger the inspection.
5. collapseMode: collapse mode of the sub-view. In the Sub-view settings, there are two "pin": fixed mode, which is finally fixed at the top of the fold; "parallax": parallax mode, during the folding process, a parallax folding effect is displayed. We can use the property app: layout_collapseMode = "parallax" to change the layout.

Layout_scrollFlags attributes

 

1)Scroll,CollapsingToolbarLayout rolls out of the screen and disappears when the list is scroll down: this flag shoshould be set for all views that want to scroll off the screen-for views that do not use this flag, they'll remain pinned to the top of the screen)

 

2)ExitUntilCollapsed,This indicates that the layout will scroll out of the screen until it is folded to its minimum height. (original article explanation: this flag causes the view to scroll off until it is 'collapsed '(its minHeight) before exiting)

 

App: layout_collapseMode = "parallax ",This is the effect of getting out of the screen range.

 

1)Parallax,Indicates that the visible area remains in the center during the rolling process.

 

2)Pin,Indicates that the screen will not be rolled out.

CoordinatorLayout also provides a layout_anchor attribute. Together with layout_anchorGravity, CoordinatorLayout can be used to place floating views (such as FloatingActionButton) associated with other views ). In this example, FloatingActionButton is used.

<Android. support. design. widget. FloatingActionButton
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: clickable = "true"
App: backgroundTint = "# f58585" // set the button color
App: layout_anchor = "@ id/appbar" // associate appbarlayout
App: layout_anchorGravity = "center | bottom" // sets the relative layout location.
App: rippleColor = "# 64a8ec"/>// The color after the click

Then add a scroll control. The effect is as follows:

 

Scroll back:

 

I am sorry for writing a simple article and taking a note on myself.

<Android. support. design. widget. CoordinatorLayout
Xmlns: android = "http://schemas.android.com/apk/res/android"
Xmlns: app = "http://schemas.android.com/apk/res-auto"
Xmlns: tools = "http://schemas.android.com/tools"
Android: id = "@ + id/activity_main"
Android: layout_width = "match_parent"
Android: layout_height = "match_parent"
Android: fitsSystemWindows = "true"
Tools: context = "com. doopol. coordinatorlayouttest. MainActivity">

<Android. support. design. widget. AppBarLayout
Android: id = "@ + id/appbar"
Android: layout_width = "match_parent"
Android: layout_height = "256dp"
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 = "# b06ee2"
App: expandedTitleMarginEnd = "64dp"
App: expandedTitleMarginStart = "48dp"
App: layout_scrollFlags = "scroll | exitUntilCollapsed"
App: title = "title"
>

<ImageView
Android: id = "@ + id/backdrop"
Android: layout_width = "match_parent"
Android: layout_height = "match_parent"
Android: fitsSystemWindows = "true"
Android: scaleType = "centerCrop"
Android: src = "@ drawable/fengzheng"
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. Dark"
/>

</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">

<LinearLayout
Android: layout_width = "match_parent"
Android: layout_height = "match_parent"
Android: orientation = "vertical"
Android: paddingTop = "24dp">

<Android. support. v7.widget. CardView
Android: layout_width = "match_parent"
Android: layout_height = "wrap_content"
Android: layout_margin = "16dp">

<LinearLayout
Android: layout_width = "match_parent"
Android: layout_height = "match_parent"
Android: orientation = "vertical">

<TextView
Android: layout_width = "match_parent"
Android: layout_height = "wrap_content"
Android: text = "CardView"
Android: textAppearance = "@ style/TextAppearance. AppCompat. Title"/>

<TextView
Android: layout_width = "match_parent"
Android: layout_height = "wrap_content"
Android: text = "plain"/>
</LinearLayout>

</Android. support. v7.widget. CardView>


<Android. support. v7.widget. CardView
Android: layout_width = "match_parent"
Android: layout_height = "wrap_content"
Android: layout_margin = "16dp">

<LinearLayout
Android: layout_width = "match_parent"
Android: layout_height = "match_parent"
Android: orientation = "vertical">

<TextView
Android: layout_width = "match_parent"
Android: layout_height = "wrap_content"
Android: text = "CardView"
Android: textAppearance = "@ style/TextAppearance. AppCompat. Title"/>

<TextView
Android: layout_width = "match_parent"
Android: layout_height = "wrap_content"
Android: text = "plain"/>
</LinearLayout>
</Android. support. v7.widget. CardView>
.......
.....
...
.
</LinearLayout>
</Android. support. v4.widget. NestedScrollView>


<Android. support. design. widget. FloatingActionButton
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: clickable = "true"
App: backgroundTint = "# f58585"
App: layout_anchor = "@ id/appbar"
App: layout_anchorGravity = "center | bottom"
App: rippleColor = "# 64a8ec"/>


</Android. support. design. widget. CoordinatorLayout>