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 is
app: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: enterAlways
app: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