Android CoordinatorLayout AppBarLayout CollapsingToolbarLayout

 

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);//FLAG_TRANSLUCENT_STATUS   FLAG_LAYOUT_NO_LIMITS

---

 

<?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=".MainActivity">


    <android.support.design.widget.AppBarLayout app:expanded="false"
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleGravity="center_horizontal|bottom"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="true">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher"
                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.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:gravity="center"
            android:textSize="200sp"
            android:text="不服打我呀"
            android:layout_width="match_parent"
            android:layout_height="500dp" />
    </android.support.v4.widget.NestedScrollView>

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

 

MainAc 代码

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        //因为它默认不是居中的  并且 左右俩边 都得有item 才会居中 设置Center
        CollapsingToolbarLayout toolbar_layout = (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);
//        toolbar_layout.setCollapsedTitleGravity(Gravity.CENTER);
        toolbar_layout.setTitle("你大爷");
//        toolbar_layout.setExpandedTitleTextColor();//可以设置展开的 字的 颜色 和 收缩的字的颜色

    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int itemId = item.getItemId();
        switch (itemId) {
            case android.R.id.home:
                Toast.makeText(MainActivity.this, "丢雷楼", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

---

---

---

这么好的 东西 不找第三方CV就可惜了  事实上 我也是一路cv过来的

https://github.com/iammert/ScalingLayout

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        //因为它默认不是居中的  并且 左右俩边 都得有item 才会居中 设置Center
        CollapsingToolbarLayout toolbar_layout = (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);
//        toolbar_layout.setCollapsedTitleGravity(Gravity.CENTER);
        toolbar_layout.setTitle("你大爷");
//        toolbar_layout.setExpandedTitleTextColor();//可以设置展开的 字的 颜色 和 收缩的字的颜色


        ScalingLayout scalingLayout = findViewById(R.id.scalingLayout);
        scalingLayout.setListener(new ScalingLayoutListener() {
            @Override
            public void onCollapsed() {

            }

            @Override
            public void onExpanded() {

            }

            @Override
            public void onProgress(float v) {

            }
        });

        View left = findViewById(R.id.left);
        View right = findViewById(R.id.right);

        left.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "left", Toast.LENGTH_SHORT).show();
            }
        });

        right.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "right", Toast.LENGTH_SHORT).show();
            }
        });
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int itemId = item.getItemId();
        switch (itemId) {
            case android.R.id.home:
                Toast.makeText(MainActivity.this, "丢雷楼", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

 

<?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=".MainActivity">


    <android.support.design.widget.AppBarLayout app:expanded="false"
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleGravity="center_horizontal|bottom"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="true">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher"
                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.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:gravity="center"
            android:textSize="200sp"
            android:text="不服打我呀"
            android:layout_width="match_parent"
            android:layout_height="500dp" />
    </android.support.v4.widget.NestedScrollView>

    <iammert.com.view.scalinglib.ScalingLayout
        android:id="@+id/scalingLayout"
        android:layout_width="300dp"
        android:layout_height="48dp"
        app:radiusFactor="1"
        android:clickable="true"
        android:layout_gravity="center_horizontal"
        android:stateListAnimator="@animator/sl_state_animator"
        app:layout_behavior="iammert.com.view.scalinglib.ScalingLayoutBehavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#f0f0"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:gravity="center"
            android:orientation="horizontal">

            <RelativeLayout
                android:id="@+id/left"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:id="@+id/imageViewWatchNow"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:src="@mipmap/ic_launcher" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_toRightOf="@+id/imageViewWatchNow"
                    android:gravity="center"
                    android:text="Watch Now"
                    android:layout_marginLeft="8dp"
                    android:textColor="#ffffff"
                    android:singleLine="true"
                    android:textSize="18sp" />

            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/right"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:id="@+id/imageViewWatchLater"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:src="@mipmap/ic_launcher" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_toRightOf="@+id/imageViewWatchLater"
                    android:gravity="center"
                    android:singleLine="true"
                    android:layout_marginLeft="8dp"
                    android:text="Remind Later"
                    android:textColor="#ffffff"
                    android:textSize="18sp" />

            </RelativeLayout>

        </LinearLayout>

    </iammert.com.view.scalinglib.ScalingLayout>

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

 

---

 设置字体颜色温和

  private void palette(int res, final CollapsingToolbarLayout ctl) {
        Palette.from(BitmapFactory.decodeResource(getResources(), res)).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(@Nullable Palette palette) {
                int color = palette.getDominantColor(Color.BLUE);
                int titleTextColor = palette.getDominantSwatch().getTitleTextColor();
                ctl.setContentScrimColor(color);//设置toolBar颜色
                ctl.setCollapsedTitleTextColor(titleTextColor);
                ctl.setExpandedTitleColor(titleTextColor);
                ToolbarColorizeHelper.colorizeToolbar(mToolbar, titleTextColor, MainActivity.this);
            }
        });
    }

---

这几个玩意结合着 很带感 所以 记录一下

app:layout_collapseMode="parallax" 

app:layout_collapseMode="parallax"这个设置动画效果  可以设置出 划拉之后标题 和 箭头 还有没有的效果 

app:titleEnabled="false"  这个用来设置 文字title 是不是跟着 图片也一样 也有对应的动画

 

• contentScrim：当Toolbar折叠到一定程度时的背景颜色

• title：当titleEnable设置为true的时候(默认)，显示的可缩放的标题

• scrimAnimationDuration：控制Toolbar收缩时，颜色变化持续时间

• app:collapsedTitleGravity="left"  Specifies how the title should be positioned when collapsed.  指定在折叠之后标题放置的位置 

• app:collapsedTitleTextAppearance="@color/colorPrimary"  The text appearance of the CollapsingToolbarLayouts title when it is fully 'collapsed'。Must be a reference to another resource, in the form "@[+][package:]type:name" or to a theme attribute in the form "?[package:][type:]name". 在折叠的时候标题文字的外观。必须引用另一个资源 

• app:contentScrim="#ff5252" The drawable to use as a scrim on top of the CollapsingToolbarLayouts content when it has been scrolled sufficiently off screen. 指定在折叠之后的背景色

• app:expandedTitleGravity="left|bottom" Specifies how the title should be positioned when expanded. 在展开的时候 标题放置的位置

• app:expandedTitleMargin="16dp" Specifies extra space on the start, top, end and bottom sides of the the expanded title text. 设置边界距离，还可以单独设置Bottom、Top、Left、Right等

• app:expandedTitleTextAppearance 在展开的时候标题文字的外观

• app:scrimAnimationDuration="200"  Specifies the duration used for scrim visibility animations. 控制Toolbar收缩时，颜色变化持续时间

• app:scrimVisibleHeightTrigger="150dp"  Specifies the amount of visible height in pixels used to define when to trigger a scrim visibility change.当可视高度变为多少时（折叠或展开时）触发背景颜色改变

• app:statusBarScrim="#123456" The drawable to use as a scrim for the status bar content when the CollapsingToolbarLayout has been scrolled sufficiently off screen. 在折叠的时候 状态栏 的背景颜色（一般不需要设置）

• app:title="Title" The title to show when titleEnabled is set to true. 如果标题可用的话 显示的标题文字   

• app:titleEnabled="true" Whether the CollapsingToolbarLayout should draw its own shrinking/growing title. 是否显示标题

• app:toolbarId="@id/toolbar" The id of the primary Toolbar child that you wish to use for the purpose of collapsing.在折叠的时候 显示的toolbar的id

 

可以设置 默认不展开 AppBarLayout 的 expand 设置 false  就可以了

 

实现郭神的趣享GIF  首页头部  只需要在

CollapsingToolbarLayout  自定义 布局  加上

app:layout_collapseMode="parallax"

就行了