Xu Gong, programmer of my public account, has four years of working experience in Dachang. He replies to the dark knight and gets a copy of Android learning video. He replies to Xu Gong 666, where he can get my carefully organized resume template and lead you to Dachang.

You can use CoordinatorLayout to create all kinds of cool things

Custom Behavior – Mimicking Zhihu, FloatActionButton hidden and displayed

NestedScrolling mechanism for in-depth parsing

You can read the source code for CoordinatorLayout step by step

Custom Behavior – implementation of the discovery page imitating Sina Weibo

ViewPager, ScrollView nested ViewPager sliding conflict resolved

Custom behavior – perfect imitation QQ browser home page, Meituan business details page

CoordinatorLayout profile

CoordinatorLayout was published at Google IO/15, followed the Material style, included in the support Library, CollapsingToolbarLayout combined with AppbarLayout CollapsingToolbarLayout can produce a variety of cool effects

What do CoordinatorLayout profiles usually do

Google Official address

CoordinatorLayout is intended for two primary use cases:

As a top-level application decor or chrome layout

As a container for a specific interaction with one or more child views

In a nutshell

  • As the top View
  • Interacts with one or more child Views as a container

Let’s take a look at the renderings of our implementation

Dynamic figure

Combined with the ToolBar

Combining with the ViewPager

Combined with the ViewPager’s visual poor

AppBarLayout

It is inherited from the LinearLayout and the default direction is Vertical

type instructions
int SCROLL_FLAG_ENTER_ALWAYS When entering (scrolling on screen) the view will scroll on any downwards scroll event, regardless of whether the scrolling view is also scrolling.
int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED An additional flag for ‘enterAlways’ which modifies the returning view to only initially scroll back to it’s collapsed height.
int SCROLL_FLAG_EXIT_UNTIL_COLLAPSED When exiting (scrolling off screen) the view will be scrolled until it is ‘collapsed’.
int SCROLL_FLAG_SCROLL The view will be scroll in direct relation to scroll events.
int SCROLL_FLAG_SNAP Upon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it’s closest edge.
type instructions
int SCROLL_FLAG_ENTER_ALWAYS When W((entering)/(scrolling on screen)) drops down, this View will also slide out.
int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED Another type of enterAlways, but only shows the height after folding.
int SCROLL_FLAG_EXIT_UNTIL_COLLAPSED In no other indication of being pulled up ((Exiting)/(scrolling off screen)), this View will slide along until folded.
int SCROLL_FLAG_SCROLL This View is going to respond to the Scroll event
int SCROLL_FLAG_SNAP Before the Scroll event ends, if the View is partially visible, the View will be parked closest to the current View

We can set this Flag in two ways

  • Methods a
 setScrollFlags(int) 
Copy the code
  • Method 2
 app:layout_scrollFlags="scroll|enterAlways"
Copy the code

Matters needing attention

AppBarLayout must act as a direct child of CoordinatorLayout, otherwise most of its functions, such as layout_scrollFlags, will not work.

First of all, let’s take a look at our effect picture one is how to achieve

code

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="? attr/actionBarSize"
            android:background="? attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

       .


    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>

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

Copy the code

Thought analysis

We can know from figure layout_scrollFlags = “scroll | enterAlways, it has already been said to layout_scrollFlags = scroll, this View will follow the scroll event response, When layout_scrollFlags= “enterAlways” this View will respond to a pull-down event so the result should be that the toolBar will hide when we pull up and the toolBar will come out when we pull down

That if the toolBar is equal to the app: when we layout_scrollFlags = “scroll | snap”, layout_scrollFlags = scroll, the View will follow the scroll event response, When layout_scrollFlags= “snap”, if the View is partially visible before the Scroll event ends, the View will be parked closest to the current View. The code is shown in the ToolBarSampleSnar layout file

Combining with the ViewPager

The layout code is as follows

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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:layout_width="match_parent"
        android:layout_height="250dp">


        <ImageView android:layout_width="match_parent"
                   android:layout_height="200dp"
                   android:background="? attr/colorPrimary"
                   android:scaleType="fitXY"
                   android:src="@drawable/tangyan"
                   app:layout_scrollFlags="scroll|enterAlways"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="? attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="# 000"
            app:tabTextColor="#fff"/>

    </android.support.design.widget.AppBarLayout>


    <android.support.v4.view.ViewPager

        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>

</android.support.design.widget.CoordinatorLayout>
Copy the code

Thought analysis

In fact, compared to the previous example, we just changed the location of RecyclerView to ViewPager. In order to have the effect of page navigator, we just used TabLayout, and TabLayout will be docked at the top when we slide. Because we didn’t set its layout_scrollFlags, that is, TabLayout is static

After running, you can see the following results

How does TabLayout combine with ViewPager’s line navigator

I’m not going to explain it here because it’s explained very clearly in the code comments

public class ViewPagerSample extends AppCompatActivity {

    ViewPager mViewPager;
    List<Fragment> mFragments;

    String[] mTitles = new String[]{
            "Home page"."Weibo"."Album"
    };
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_third);
        // Initialize ViewPager and TabLayout
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tabs);
        setupViewPager();
    }

    private void setupViewPager(a) {

        mFragments = new ArrayList<>();
        for (int i = 0; i < mTitles.length; i++) {
            ListFragment listFragment = ListFragment.newInstance(mTitles[i]);
            mFragments.add(listFragment);
        }
        // Step 2: Set the adapter for the ViewPager
        BaseFragmentAdapter adapter =
                new BaseFragmentAdapter(getSupportFragmentManager(), mFragments, mTitles);

        mViewPager.setAdapter(adapter);
        // Step 3: bind ViewPager to TableLayoutmTabLayout.setupWithViewPager(mViewPager); }}Copy the code

If we want to change the styles associated with Indicator, we can use them in the layout file

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="? attr/colorPrimary"
    app:tabIndicatorColor="@color/colorAccent"
    app:tabIndicatorHeight="4dp"
    app:tabSelectedTextColor="# 000"
    app:tabTextColor="#fff"/>


Copy the code

If you don’t want to use the controls that Google has wrapped for us, you can also create your own controls, which you can refer to in this blog postImitation netease news top navigation indicator

Before looking at the CollapsingToolbarLayout control in the ViewPager example, we need to understand the collapse toolbarlayout control

CollapsingToolbarLayout

CollapsingToolbarLayout inherit and CollapsingToolbarLayout FrameLayout

In simple terms CollapsingToolbarLayout is a wrapper for toolbars, which typically functions as a child of AppBarLayout. The main functions are as follows

  • Collapsing Title (Collapsing Title)
  • Content scrim, the Content scrim will be shown or hidden when our sliding position reaches a certain threshold
  • Status bar Scrim
  • Parallax scrolling children
  • Pinned position children, children with fixed positions

Let’s look at some constants

constant explain
int COLLAPSE_MODE_OFF The view will act as normal with no collapsing behavior.
int COLLAPSE_MODE_PARALLAX The view will parallax fashion in a parallax fashion. See setParallaxMultiplier(float) to change The multiplier used It will have a very bad visual effect)
int COLLAPSE_MODE_PIN The view will pin in place until it reaches The bottom of The CollapsingToolbarLayout CollapsingToolbarLayout View CollapsingToolbarLayout View CollapsingToolbarLayout View CollapsingToolbarLayout

There are two ways we can set this constant,

Method one: Use this method in your code

setCollapseMode(int collapseMode)
Copy the code

Method 2: Use custom attributes in the layout file

app:layout_collapseMode="pin"
Copy the code

As CollapsingToolbarLayout collapses some of the important properties in the CollapsingToolbarLayout view, how do we realize the disparity effect in ViewPager

Combined with the ViewPager’s visual poor

Layout code

<? 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:background="@android:color/background_light"
    android:fitsSystemWindows="true"
>

    <android.support.design.widget.AppBarLayout
        android:id="@+id/main.appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="? attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/tangyan"
                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.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="? attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="# 000"
            app:tabTextColor="#fff"/>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp"
        android:src="@drawable/add_2"/>

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

Copy the code

The renderings are as follows

Thinking analytical

  • As shown in the picture, collapse Toolbarlayout changes first

    CollapsingToolbarLayout contains the ImageView and ToolBar, view view app:layout_collapseMode=”parallax” The ToolBar app:layout_collapseMode=”pin”, when the TooBar reaches the bottom of the CollapsingToolbarLayout, it collapses instead of the entire CollapsingToolbarLayout

  • Next, I explain the changes to the TabLayout

    As we know from the previous description, when app:layout_scrollFlags is not specified, the resulting TabLayout will not disappear as it slides

expand

If we only change CollapsingToolbarLayout app: layout_scrollFlags = “scroll | exitUntilCollapsed | snap”, other code is changeless, after operation, we will be able to see the following pictures

conclusion

This blog mainly explains the attributes of CoordinatorLayout, AppBarLayout, and CollapsingToolbarLayout.

  • For AppBarLayout, we will focus on the property app:layout_scrollFlags. We can set different properties to display different effects when scrolling
  • CollapsingToolbarLayout App :layout_collapseMode in CollapsingToolbarLayout, we can make the View View View in View View in different ways such as Parallax and PIN

There are many other uses for CoordinatorLayout. If you are interested, please read the official documentation address

digression

CoordinatorLayout is a really powerful control, you can use it to achieve all kinds of cool effects, simplify a lot of work for developers, if you have the ability to go to the source code, see how it is done?

Master CoordinatorLayout

Source code download address:Github.com/gdutxiaoxu/…

If you feel good, you can pay attention to my wechat public number programmer Xu Gong

  1. Public number programmer Xu Gong repliesDark horseGet the Android Learning video
  2. Public number programmer Xu Gong repliesXu, male, 666, get resume template, teach you how to optimize your resume, enter big factory
  3. Public number programmer Xu Gong repliesThe interview, can obtain the interview common algorithm, sword refers to the offer question solution
  4. Public number programmer Xu Gong repliesThe horse soldiers, you can get a copy of the training video