Hello everyone, I am bi Mo Android, ONCE I always confused, do not know how to learn is the best! But lately I’ve heard me say something to me, something special and feel good about what you can do now, and you’ll slowly find yourself changing! Everyone has the right to change themselves, depending on whether you want to change! In fact, as long as we do a little bit of change every day, will change from quantity to quality! It’s kind of lame today, but since I started blogging seriously, I’ve noticed that my life is slowly changing!
What are you talking about today? The last article talked about the CoordinatorLayout of MaterialDesign series of articles (6), which mentioned a lot of controls about MaterialDesign, but just a sketch, no specific analysis, in order to let partners can better understand! So I think it’s worth talking about each control in isolation! Let’s start with AppBarLayout today!
This article focuses on the following aspects:
- What is AppBarLayout? What can it be used for?
- Some use cases for AppBarLayout.
1. What is AppBarLayout? What can it be used for?
AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures.Children should provide their desired scrolling behavior through setScrollFlags(int) and the associated layout xml attribute: app:layout_scrollFlags.This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it’s functionality will not work.
I translate it in human words! AppBarLayout inherits LinearLayout and can respond to user gestures, but it must be used in CoordinatorLayout, otherwise many functions will not work.
What do you think of when you think of AppBarLayout? In fact, at first I thought that there was only linkage and nothing else, but do you really know about linkage of AppBarLayout? As far as you know, AppBarLayout always collapses in relation to TabLayout and Collapse ToolbarLayout. AppBarLayout is much more than that, right? There are routines…
2. Use AppBarLayout!
As you know in the previous article, AppBarLayout and CoordinatorLayout CollapsingToolbarLayout cooperate Often the frequency of AppBarLayout and CoordinatorLayout, CollapsingToolbarLayout, TabLayout is the same, that is to say basically is how they linkage! But the Toolbar doesn’t have to be used with them. It can play with itself… And play also very happy! When you are bored, you can use it as a vertical LinearLayout. When you are ina good mood, you can use it with CoordinatorLayout and TabLayout. When I’m bored and in a good mood, like me, I play by myself. Ha-ha, I digress. Let’s see how it works from. · ∀ ·) Blue ゙ Hi! Let’s start with an illustration…
In fact, you look carefully at this effect is not very common suction top effect! This effect is more common in the home page of e-commerce. In fact, it is also very good to achieve, here simply take the layout to say!
<? 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.jinlong.newmaterialdesign.material.AppBarLayoutActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#e79349"
android:gravity="center"
android:scaleType="center"
android:text="You can put a ViewPager here."
android:textColor="@android:color/white"
android:textSize="20sp"
app:layout_scrollFlags="scroll" />
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:overScrollMode="never"
android:scrollbars="none"
app:layout_scrollFlags="scroll" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="# 009988"
android:gravity="center"
android:text="Here you need the top effect content, which can be anything."
android:textColor="@android:color/white" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="@+id/ll_bottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="500dp"
android:gravity="center"
android:text="There's something at the bottom!!" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="# 009988"
android:gravity="center"
android:text="TAB 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="# 002288"
android:gravity="center"
android:text="Label 2" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="# 009922"
android:gravity="center"
android:text="Label 3" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#00aa88"
android:gravity="center"
android:text="TAB 4" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="# 999988"
android:gravity="center"
android:text="Tag 5" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Copy the codeThis content is mainly based on app:layout_scrollFlags=” Scroll “to achieve some of the desired effect, you can set different layout, to get the content you want!
Here we go!! AppBarLayout monitoring. In the previous article, we talked about the linkage between AppBarLayout and CoordinatorLayout, CollapsingToolbarLayout and TabLayout. Today, a question was raised in the test. That animation is too ugly to say linkage, do a little simpler, direct gradient display much better!
Then I silently took out the mobile phone, open the payment, to you first sweep a pair in continue to say!! The result they really sweep, but give me a penny… I was devastated, but it all came out. Don’t clap, shame… Here’s what happens next! In fact, AppBarLayouot is about this monitoring, if not, I will not so agreed, little brother is not unprepared for the battle! Haha…
AppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {@override public void onOffsetChanged(AppBarLayout AppBarLayout, int verticalOffset) {// Offset calculation}});Copy the codeThis listener gives us the slippage of the response, and we can calculate a proportion based on the total height, and then calculate the opacity of the response. In fact, with this offset to add what animation is also possible! Please meditate for a minute and see if you have any ideas. Answer right now… Let’s start with a picture!
This effect attack entertainment, just set the TextView rotation property to calculate, just to give you an idea, so don’t be limited to what I say, to integrate through!
AppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, Int verticalOffset) {/ / this is the calculation of total height of the App bar Layout API int totalScrollRange = appBarLayout. GetTotalScrollRange ();float ratio = Math.abs((float) verticalOffset / totalScrollRange); mTvTitle.setRotation(ratio * 360); }});Copy the code
Now, one thing that I want to make clear here is that there’s a slide direction, and the slide up is negative. Sliding down is positive. So we’re using the absolute value here. The other thing is that when you first come in it’s going to do a callback, and it’s going to be 0, so when you set transparency, you should pay attention to that. Since the ratio of the population can’t be greater than 1, if you want to see it at first, you can just set the opacity to the opposite (1- ratio)! Here’s the code!
mAbl.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, Int verticalOffset) {/ / this is the calculation of total height of the App bar Layout API int totalScrollRange = appBarLayout. GetTotalScrollRange ();float ratio = Math.abs((float) verticalOffset / totalScrollRange);
mTvTitle.setAlpha(1 - ratio);
Log.e(TAG, "onOffsetChanged: " + ratio + "-"+ verticalOffset); }});Copy the codeI don’t have to figure it out. It depends on your needs. What we wanted at the time was for the Toolbar to show up when it was all folded up. It’s not realistic if it’s on! Much the same as this, as long as you calculate the ratio! I’m giving you some benefits!
public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {
public enum State {
EXPANDED,
COLLAPSED,
IDLE
}
private State mCurrentState = State.IDLE;
@Override
public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (i == 0) {
if(mCurrentState ! = State.EXPANDED) { onStateChanged(appBarLayout, State.EXPANDED); } mCurrentState = State.EXPANDED; }else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
if(mCurrentState ! = State.COLLAPSED) { onStateChanged(appBarLayout, State.COLLAPSED); } mCurrentState = State.COLLAPSED; }else {
if(mCurrentState ! = State.IDLE) { onStateChanged(appBarLayout, State.IDLE); } mCurrentState = State.IDLE; } } public abstract void onStateChanged(AppBarLayout appBarLayout, State state); }Copy the code
mAppBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
@Override
public void onStateChanged(AppBarLayout appBarLayout, State state) {
Log.d("STATE", state.name());
if(state == state.expanded) {// Expand state}else if(state == state.collapsed){// Collapse state}else{// intermediate state}}});Copy the codeThis is what determines whether the AppBarLayout is expanded in a collapsed state. How to use I don’t say! That’s all for today’s sharing! Not much content, hope you have a happy weekend!! As programmers, we go out more on the weekend to meet girls, single dog world is no color…
As an aside, I think learning this thing should have its own system. In fact, I always think about how to write articles so that you can remember, including myself, sometimes I have to come back to the blog to remember the use of some content. Recently, some friends said that there were too many articles to finish reading. In fact, I am also thinking, how can the most simple to introduce these content to everyone! Short afraid you do not understand, too long afraid you can not finish reading… Hope you guys put forward your ideas, I will improve in time!!