It’s the weekend again, xiaobian here to wish you a happy weekend oh, Android development of children’s sandals we exchange learning opportunities again, today to communicate with you about the use of our commonly used title bar Toolbar, and with some other Material Design style controls to achieve some simple title animation effects, The Toolbar and AppBarLayout have been around for a long time, but they have been used in many places in our project development, so simply record your understanding and let’s get to the point……

Let’s start by listing out some of the controls that we’re going to use for the title bar (see title ^ _ ^), and we start with CoordinatorLayout,…

1) What is CoordinatorLayout? How to use

CoordinatorLayout component is an important control of Android Material Design style. It realizes the animation effect of touch influence layout by coordinating and scheduling sub-layout. CoordinatorLayout schedules the sub-views by setting the Behaviors of the sub-views to realize the linkage between the controls and achieve animation effect.

System provides the AppBarLayout. Behaviors, AppBarLayout ScrollingViewBehavior, FloatingActionButton. Behaviors, SwipeDismissBehavior<V extends View> etc.

First, we need to introduce the Support Design Library in our project build.gradle as follows:

compile 'com. Android. Support: design: 26.1.0'Copy the code

If there is an update to Design, the latest update is 26.1.0

So when we introduce CoordinatorLayout controls into the layout, there’s one more thing to note:

public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent2 {Copy the code

CoordinatorLayout directly inherits from ViewGroup which is an enhanced version of FramLayout,

So if I run it, it looks like this,

                                      

Instead of covering the FloatActionBar, FloatActionButton is lifted from the bottom of the SnackActionBar, where FloatActionBar is normally used by androido: SRC property plus the image, and notice that we have ActionBar effect by default, so let’s get rid of ActionBar,

android:theme="@style/Theme.AppCompat.Light.NoActionBar">Copy the code

Or just add it to the code

SupportRequestWindowFeature (Window. FEATURE_NO_TITLE) / / the Activity since AppCompatActivity inheritanceCopy the code

Here we need to pay attention to supportRequestWindowFeature () on the setContentView () before, otherwise an error, and if we can call our Activity

requestWindowFeature(Window.FEATURE_NO_TITLE)Copy the code

So now we’re running without the ActionBar.

                                     

When we swipe up the content, the title will roll out of the screen to hide it. We should have recorded a GIF effect with you, but there is a problem in my studio. I always fail to record.

<android.support.v7.widget.Toolbar
   android:id="@+id/tb_toolbar"  
   android:layout_width="match_parent" 
   android:layout_height="wrap_content" 
   app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>Copy the code

2) ToolBar simple to use

Some of the ToolBar uses have been described above, but the main properties of toobar hidden effects are described here. Other uses are similar to ActionBar.

Let’s take a quick look at the toolbar and focus on the layout_scrollFlags attribute.

  1. Scroll: All views that want to scroll out of the screen need to set this flag. Views without this flag will be fixed at the top of the screen. For example, TabLayout does not set this value and will stay at the top of the screen.
  2. EnterAlways: When this flag is set, scrolling down causes the view to become visible, enabling quick “return mode”.
  3. EnterAlwaysCollapsed: When your views have the minHeight attribute set and use this flag, your views enter at the minimum height and expand to the full height only when the scrolling view reaches the top.
  4. ExitUntilCollapsed: Rolls out of the screen and collapses at the top.


CollapsingToolbarLayout is CollapsingToolbarLayout

 <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="48dp"
       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/liu" 
           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:id="@+id/sv_scrollview"  
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_margin="20dp"
         app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

   <TextView    
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:text="@string/content"
        android:textColor="#ffffff" 
        android:textSize="16sp" />
</android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton 
        android:id="@+id/fab_floatactionbutton"   
        android:layout_width="wrap_content"   
        android:layout_height="wrap_content"  
        android:layout_margin="16dp"  
        android:clickable="true"  
        android:src="@drawable/right"
        app:layout_anchor="@id/appbarlayout"  
        app:layout_anchorGravity="bottom|right|end" />Copy the code

                 

                       


                                             


I’m sorry I can’t give you a GIF. You can run it on your phone. You can make the NestScrollView look better. So let’s look at the specific attributes:

CollapsingToolbarLayout collapses the Toolbar in collapse. CollapsingToolbarLayout’s subview is similar to the vertical collapse of the LinearLayout,

CollapsingToolbarLayout CollapsingToolbarLayout provides the following properties and methods: 1. CollapsingToolbarLayout In the header of the ToolBar, when CollapsingToolbarLayout is full screen but not collapsed, the title displays a large font and as the collapse collapses, the title becomes smaller to a certain size. You can set the title by calling setTitle(CharSequence). 2. ContentScrim: The ToolBar is folded to the top of the fixed background. You can call setContentScrim(Drawable) to change the background or use app:contentScrim= “? Attr /colorPrimary “to change the background. 3. Status bar scrim: Background of the Status bar, call setStatusBarScrim(Drawable). 4. Parallax scrolling children: when CollapsingToolbarLayout sliding, child view vision is poor, can through property app: layout_collapseParallaxMultiplier = “0.6” change. Values de range [0.0,1.0], the greater the inspection. CollapseMode in the CollapseMode view, there are two types of “pin” : fixed mode, which is fixed at the top when collapsible; Parallax: Parallax, parallax, parallax, parallax. We can change this in the layout using the property app:layout_collapseMode= “parallax”.

CoordinatorLayout also provides a property of layout_anchor which, along with layout_anchorGravity, can be used to place a floating view (such as FloatingActionButton) that is associated with other views. In this example, FloatingActionButton is used.

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_floatactionbutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/right"
    app:layout_anchor="@id/appbarlayout"
    app:layout_anchorGravity="bottom|right|end" />Copy the code


There are three points to note here:

CollapsingToolbarLayout view CollapsingToolbarLayout view CollapsingToolbarLayout view CollapsingToolbarLayout view CollapsingToolbarLayout Associated Dangling view sets app:layout_anchor, app:layout_anchorGravity properties


Thank you for your attention. In fact, there are still many effects that have not been realized. I planned to do more details, but later I found that THERE was not enough time, so I realized some simple effects in a hurry. Our CoordinatorLayout, AppBatLayout can also be used with DrawLayout,ViewPage, etc. At present, many apps are applied in this area, so if you see similar effects in the future, you might as well think about it or have a deeper understanding of these controls. Have a nice weekend, have a nice weekend. Have a great weekend!!

GitHub address: github.com/Scus5761/Co…

If there are omissions, we welcome you to correct and put forward suggestions!