Use coordinatorlayout to create cool effects

Time:2020-2-20

Use coordinatorlayout to create cool effects

Custom behavior — imitating Zhihu, hiding and displaying floatactionbutton

In depth analysis of nestedscrolling mechanism

Take you step by step to read the coordinatorlayout source code

Custom behavior – the realization of imitating the discovery page of sina Weibo

View pager, Scrollview nested view pager slide conflict resolution

Custom behavior – perfect imitation of QQ browser homepage, meituan merchant details page


About coordinatorlayout

Coordinatorlayout is released at the Google IO / 15 conference. It follows the material style and is included in the support library. It can produce various cool effects by combining appbarlayout, collapsing toolbarlayout, etc

Coordinatorlayout introduction what is usually used for

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 short

  • As the top view
  • Interact with one or more child views as a container

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

Dynamic graph

Combining toolbars

Use coordinatorlayout to create cool effects

Combine viewpager

ViewPager

Combining the visual characteristics of viewpager

Use coordinatorlayout to create cool effects


AppBarLayout

It is inherited from LinearLayout, and the default direction is vertical

Use coordinatorlayout to create cool effects

type Explain
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 Explain
int SCROLL_FLAG_ENTER_ALWAYS When w ((entering) / (scrolling on screen)) is pulled down, the view will also slide out.
int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED Another enter always, but only the height after folding.
int SCROLL_FLAG_EXIT_UNTIL_COLLAPSED When you pull (exiting) / (scrolling off screen), the view will slide until it folds.
int SCROLL_FLAG_SCROLL This view will respond to the scroll event
int SCROLL_FLAG_SNAP Before the end of the scroll event, if the view part is visible, the view will stop at the position closest to the current view

We can set this flag in two ways

  • Method 1
setScrollFlags(int)
  • Method two
app:layout_scrollFlags="scroll|enterAlways"

Matters needing attention

Appbarlayout must be the direct child view of coordinatorlayout, otherwise most of its functions will not take effect, such as layout ﹣ scrollflags, etc.

First of all, let’s take a look at how our rendering 1 is realized

Code

.

Thinking analysis

Use coordinatorlayout to create cool effects

From the figure, we can know that layout ﹣ scrollflags = “scroll | enteralways,
As mentioned earlier, this view will respond to the scrolling event when layout ﹐ scrollflags = Scrolll,
This view will respond to the drop-down event when layout_scrollflags = “enteralways”
So the result should be that when we pull up, the toolbar will be hidden, and when we pull down, the toolbar will come out

So if our toolbar is equal to app: layout ﹣ scrollflags = “scroll | snap,”,
When layout ﹣ scrollflags = scroll, the view will respond to the scrolling event,
When layout ﹣ scrollflags = “snap”, before the end of the scroll sliding event, if the view part is visible, the view will stop at the position closest to the current view.
The results are as follows, see layout file of toolbarsamplesnar for code

Use coordinatorlayout to create cool effects

Combine viewpager

The layout code is as follows

Thinking analysis

Use coordinatorlayout to create cool effects

In fact, compared with the previous example, it’s just to replace the position where recyclerview is placed with viewpager. In order to have the effect of page navigator, tablayout is only used again. When we slide, tablayout will be docked at the top finally, because we haven’t set its layout “scrollflags, that is, tablayout is static

After running, you can see the following results

ViewPager

Let’s take a look at how tablayout combines the effect of the viewpager line navigator

The code annotation has been explained clearly. I won’t explain it here

public class ViewPagerSample extends AppCompatActivity {

    ViewPager mViewPager;
    List mFragments;

    String[] mTitles = new String[]{
            "Homepage", "Weibo", "album"
    };
    private TabLayout mTabLayout;

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

    private void setupViewPager() {

        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 viewpager
        BaseFragmentAdapter adapter =
                new BaseFragmentAdapter(getSupportFragmentManager(), mFragments, mTitles);

        mViewPager.setAdapter(adapter);
        //Step 3: bind viewpager with tablelayout
        mTabLayout.setupWithViewPager(mViewPager);
    }


}

If we want to change the relevant style of indicator, we can use it in the layout file

If you don’t want to use Google to help us encapsulate the controls, you can also customize a control yourself. You can refer to the top navigation indicator of this blog imitating Netease News


Before looking at the example and combining the visual characteristics of viewpager, we need to understand the collapse toolbar layout control

CollapsingToolbarLayout

Use coordinatorlayout to create cool effects

Collapsingtoolbarlayout inherits FrameLayout and official website address. Please provide your own ladder.

In short, collapsing toolbarlayout is the wrapper of toolbars, which is usually the child of appbarlayout. It mainly realizes the following functions

  • Collapsing title
  • Content scrim (content decoration). When the sliding position reaches a certain threshold, the content decoration will be displayed or hidden
  • Status bar scrim
  • Parallax scrolling children, children show poor visual effect when sliding
  • Pinned position children

Let’s take a look at some constants

constant interpretative statement
int COLLAPSE_MODE_OFF The view will act as normal with no collapsing behavior
int COLLAPSE_MODE_PARALLAX The view will scroll in a parallel fashion. See setparallelaxmultiplier (float) to change the multiplier used
int COLLAPSE_MODE_PIN The view will pin in place until it reaches the bottom of the collapsing toolbarlayout

There are two ways to set this constant,

Method 1: use this method in the code

setCollapseMode(int collapseMode)

Method 2: use custom attributes in layout files

app:layout_collapseMode="pin"

So far, some important properties of collapsing toolbarlayout have been explained. Let’s take a look at how we combine viewpager to achieve parallax effect


Combining the visual characteristics of viewpager

Layout code

The renderings are as follows

Use coordinatorlayout to create cool effects

Train of thought analysis

Use coordinatorlayout to create cool effects

  • The structure diagram is shown in the picture. First, explain the changes of collapsing toolbarlayout

    The collapsingtoolbarlayout contains ImageView and toolbar. The app: layout  collapsemode = “parallax” of ImageView indicates parallax effect. The app: layout  collapsemode = “pin” of toolbar will display instead of the whole collapsing toolbarlayout when the toobar reaches the bottom of collapsing toolbarlayout

  • Then explain the changes of tablayout

    From the previous description, we have learned that when app: layout ﹣ scrollflags is not specified, tablayout will be static at last, and will not disappear with sliding

Expand

If we only change the app of collapsingtoolbarlayout: layout ﹣ scrollflags = “scroll| exituntilcollapsed | snap”, other codes will not change. After running, we will see the following effect chart

Use coordinatorlayout to create cool effects


summary

This blog mainly explains some related properties of coordinatorlayout, appbarlayout and collapsing toolbarlayout.

  • For appbarayout, we mainly explained the property app: layout ﹣ scrollflags. We can display different effects when scrolling by setting different properties
  • For collapsing toolbarlayout, we mainly explained the property of app: layout  collapsemode and set different values. We can make its sub views present different cool effects, such as parallax and pin

There are many uses of coordinatorlayout. Please read the official document address


Digression

Coordinatorlayout is really a powerful control. It can achieve various cool effects and simplify many of the work of developers. If you have the ability, you can study the source code to see how to achieve it?

Reference article: Android – [translation] master coordinator layout

Source download address: https://github.com/gdutxiaoxu/coordinatorlayoutexample.git

Welcome to my WeChat official account number stormjun949 (Xugong codeword), you can pay attention to it. At present, I focus on Android development, mainly sharing Android development related knowledge and some related excellent articles, including personal summary, workplace experience, etc.
Use coordinatorlayout to create cool effects

Recommended Today

Laravel service container must know

The article was forwarded from the professional laravel developer community. Original link: https://learnku.com/laravel/t To learn how to build an application with laravel is not only to learn how to use different classes and components in the framework, but also to remember allartisanCommand or all helper functions (we have Google). Learning to code with laravel is […]