Making portal


directory

  • preface
  • rendering
  • Quick learning
  • CollapsingToolbarLayout collapse mode
  • AppBarLayout scroll mode
  • CoordinatorLayout cooperate Snackbar
  • Custom telescopic header
  • The last

preface

Before also wrote RecyclerView content, this time to supplement the realization of the expansion head. The retractable head is the kind of view that you love at first sight, beautiful and simple.

  • The content of this article is more than 10 minutes to read, please arrange reasonable, collection is also possible oh ~
  • Multigraph early warning, reproduced please explain the source, thank you ~

rendering

First, the effect diagram of the case, interested to see:


Quick learning

Let’s experiment with the steps it takes to get from the default Scrolling Activity to the rendering.

  • First, add ImageView above the Toolbar, with the parameters explained later.
<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/toolbar_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:contentScrim="? attr/colorPrimary"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:toolbarId="@+id/toolbar">

    <ImageView
        android:id="@+id/iv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:contentDescription="@string/desc"
        android:scaleType="centerCrop"
        app:layout_collapseMode="pin" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="? attr/actionBarSize"
        app:layout_collapseMode="pin" />

</android.support.design.widget.CollapsingToolbarLayout>
Copy the code
  • It then loads the image using Glide in Java code.

Guide package:

implementation 'com. Making. Bumptech. Glide: glide: 3.7.0'
Copy the code
ImageView ivMain = (ImageView) findViewById(r.i.iv_main); Glide.with(this).load(R.drawable.p5).into(ivMain);Copy the code
  • Take a look at the effect:

We found two problems, because the background is white, the title bar font color should be black, the default is black, so remove the theme setting in the XML. Of course, if you have a dark background, you don’t have to move it here. Then the title bar needs to be transparent.

Make the title bar transparent

Since it can’t be changed until 5.0, separate styles.xml from 5.0, which does nothing until 5.0, after which the title bar is set to transparent. Now write in styles.xml:

<style name="MyTheme" parent="AppTheme" />
Copy the code

Then copy styles.xml:

Delete duplicate parts:

<resources>

    <style name="MyTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>
Copy the code
  • Then set the new theme in the configuration file, change the title name, and run it again to see the effect:
ActionBar supportActionBar = getSupportActionBar();if(supportActionBar ! = null) { supportActionBar.setTitle(UIUtil.getString(R.string.p5)); }Copy the code

And you’re done.


CollapsingToolbarLayout collapse mode

app:layout_collapseMode="parallax"
app:layout_collapseMode="pin"
app:layout_collapseMode="none"
Copy the code

In terms of the parameters in the XML, CollapsingToolbarLayout collapses the schema. Here I have also taken a section from the official document.

COLLAPSE_MODE_OFF

int COLLAPSE_MODE_OFF
The view will act as normal with no collapsing behavior.

Constant Value: 0 (0x00000000)

COLLAPSE_MODE_PARALLAX

int COLLAPSE_MODE_PARALLAX
The view will scroll in a parallax fashion. See setParallaxMultiplier(float) to change the multiplier used.

Constant Value: 2 (0x00000002)

COLLAPSE_MODE_PIN

int COLLAPSE_MODE_PIN
The view will pin in place until it reaches the bottom of the CollapsingToolbarLayout.

Constant Value: 1 (0x00000001)
Copy the code

Let’s make a list:

parameter The effect
none The view will run normally, with no folding behavior
pin The view will be fixed in place until it reaches the bottom of the CollapsingToolbarLayout
parallax The view will scroll parallax

If you want to know how to do it or how to do it, take a look at the effect:

Notice the feet. Parallax, the parallax slides into the body and disappears. Pin, the parallax slides into the foot and disappears. In other words, in pin mode, the scroll view and the image are sliding in sync, but that’s not a good look. Parallax has improved that, it looks harmonious, even though they’re not in sync, so it’s parallax.


AppBarLayout scroll mode

The mode of scrolling mainly depends on the combination of parameters (scroll must be), make a list and then look at the effect picture, the official document will not be cut.

parameter The effect
scroll The view relates scrolling directly to scrolling events. This flag needs to be set for any other flags to take effect. This value is invalid if any sibling view prior to this does not have this flag.
exitUntilCollapsed When you exit (scroll screen), the view scrolls until it collapses. The collapse height is defined by the minimum height of the view.
snap At the end of the scroll, if the view is only partially visible, it will be captured and scrolled to its nearest edge.
enterAlways When entering (scrolling on the screen), the view will scroll any scroll down events regardless of whether the scroll view is also scrolling. This is often referred to as the “quick return” mode.
enterAlwaysCollapsed Another flag for ‘enterAlways’, which modifies the returned view, initially rolling back only to its fold height. Once the scroll view reaches the end of its scroll range, the rest of the view scrolls into the view. The collapse height is defined by the minimum height of the view.
  • Look at the monoscroll case:app:layout_scrollFlags="scroll"

You can see the whole thing rolled up, without the Toolbar.

  • So what I’m using now isapp:layout_scrollFlags="scroll|exitUntilCollapsed"You’ve seen the effect.
  • The desired adsorption effect,app:layout_scrollFlags="scroll|snap"For example, if you still have 25% left to roll, let go and roll out. If you still have 75% to roll, let go and display all. But I feel that the experience is not good, people will have the illusion of insensitive operation.

  • Fast return, is to roll out the part of the fast display, can be compared to the previous return speed:app:layout_scrollFlags="scroll|enterAlways"

  • contrastQuick returnEnterAlways: enterAlways: enterAlways: enterAlways: enterAlways: enterAlwaysapp:layout_scrollFlags="scroll|enterAlwaysCollapsed"


CoordinatorLayout cooperate Snackbar

Let’s take a look at the hover button:

To remove the hover button from the Toolbar, place it at the bottom and see what it looks like:

android:layout_gravity="end|bottom"
Copy the code

If it’s not CoordinatorLayout, you can’t do that.


Custom telescopic header

Let’s do a bigger, more customized one. First, the effect picture:

Compared with the previous, the biggest change lies in the monitoring of the rolling range. Change the Toolbar content based on scrolling.

Layout file

Taking a look at the changes to the main layout file, the Toolbar contains two layout files that switch between each other. Then the expanded section of the ImageView becomes a layout file, and notice app:contentInsetLeft=”0dp”, app:contentInsetStart=”0dp”, this is just like the default margin of HTML, which needs to be cleared. There is a default margin to the left if you do not write.

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/toolbar_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:toolbarId="@+id/toolbar">

    <include
        layout="@layout/open_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="? attr/actionBarSize"
        app:layout_collapseMode="parallax" />

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="? attr/actionBarSize"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:layout_collapseMode="pin">

        <include
            android:id="@+id/toolbar_open"
            layout="@layout/toolbar_open" />

        <include
            android:id="@+id/toolbar_close"
            layout="@layout/toolbar_close" />

    </android.support.v7.widget.Toolbar>

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

I will post only one of the three small layout codes:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="? attr/actionBarSize"
    android:background="@color/colorPrimary">

    <ImageView
        android:id="@+id/iv_first"
        android:layout_width="@dimen/twenty_four_dp"
        android:layout_height="@dimen/twenty_four_dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/twenty_dp"
        android:layout_marginStart="@dimen/twenty_dp"
        android:contentDescription="@string/desc"
        android:src="@android:drawable/btn_star_big_on" />

    <ImageView
        android:id="@+id/iv_second"
        android:layout_width="@dimen/twenty_four_dp"
        android:contentDescription="@string/desc"
        android:layout_height="@dimen/twenty_four_dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/twenty_dp"
        android:layout_marginStart="@dimen/twenty_dp"
        android:layout_toEndOf="@+id/iv_first"
        android:layout_toRightOf="@+id/iv_first"
        android:src="@android:drawable/btn_star_big_on" />

    <ImageView
        android:id="@+id/iv_third"
        android:layout_width="@dimen/twenty_four_dp"
        android:layout_height="@dimen/twenty_four_dp"
        android:contentDescription="@string/desc"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/twenty_dp"
        android:layout_marginStart="@dimen/twenty_dp"
        android:layout_toEndOf="@+id/iv_second"
        android:layout_toRightOf="@+id/iv_second"
        android:src="@android:drawable/btn_star_big_on" />

    <ImageView
        android:id="@+id/iv_forth"
        android:layout_width="@dimen/twenty_four_dp"
        android:contentDescription="@string/desc"
        android:layout_height="@dimen/twenty_four_dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/twenty_dp"
        android:layout_marginStart="@dimen/twenty_dp"
        android:layout_toEndOf="@+id/iv_third"
        android:layout_toRightOf="@+id/iv_third"
        android:src="@android:drawable/btn_star_big_on" />

    <ImageView
        android:layout_width="@dimen/twenty_four_dp"
        android:layout_height="@dimen/twenty_four_dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/twenty_dp"
        android:contentDescription="@string/desc"
        android:layout_marginStart="@dimen/twenty_dp"
        android:layout_toEndOf="@+id/iv_forth"
        android:layout_toRightOf="@+id/iv_forth"
        android:src="@android:drawable/btn_star_big_on" />

    <View
        android:id="@+id/toolbar_close_mask"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>
Copy the code

The point is at the end of the View, which is a mask that changes its transparency depending on how much scrolling it has.

AppBarLayout.OnOffsetChangedListener

Official documentation is simple to write and easy to use. Add implements AppBarLayout OnOffsetChangedListener. Public void onOffsetChanged(AppBarLayout AppBarLayout, int verticalOffset)**

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
    int offset = Math.abs(verticalOffset);
    int scrollRange = appBarLayout.getTotalScrollRange();
    if (offset <= scrollRange / 2) {
        mToolbarOpen.setVisibility(View.VISIBLE);
        mToolbarClose.setVisibility(View.GONE);
        float openPer = (float) offset / (scrollRange / 2);
        int openAlpha = (int) (255 * openPer);
        mToolbarOpenMask.setBackgroundColor(Color.argb(openAlpha, 48, 63, 159));
    } else {
        mToolbarClose.setVisibility(View.VISIBLE);
        mToolbarOpen.setVisibility(View.GONE);
        float closePer = (float) (scrollRange - offset) / (scrollRange / 2);
        int closeAlpha = (int) (255 * closePer);
        mToolbarCloseMask.setBackgroundColor(Color.argb(closeAlpha, 48, 63, 159));
    }
    float per = (float) offset / scrollRange;
    int alpha = (int) (255 * per);
    mContentMask.setBackgroundColor(Color.argb(alpha, 48, 63, 159));
}
Copy the code

As mentioned earlier, it is to change the opacity of the mask. This color corresponds to the color set in the layout, otherwise the transition effect will not be correct. You can use photoshop to change the 6 bits of colors.xml color to RGB.


The last

It is not easy to see here. Please remember to like it and see the comments or suggestions in the comments section. You can also secretly follow me

Making portal