{"id":1517,"date":"2021-09-28T13:21:56","date_gmt":"2021-09-28T05:21:56","guid":{"rendered":"https:\/\/badgameshow.com\/fly\/?p=1517"},"modified":"2021-09-28T13:24:04","modified_gmt":"2021-09-28T05:24:04","slug":"android-appbarlayout%e8%88%87coordinatorlayout%e7%9a%84%e8%8f%af%e9%ba%97%e6%90%ad%e9%85%8d","status":"publish","type":"post","link":"https:\/\/badgameshow.com\/fly\/android-appbarlayout%e8%88%87coordinatorlayout%e7%9a%84%e8%8f%af%e9%ba%97%e6%90%ad%e9%85%8d\/","title":{"rendered":"Android AppBarLayout\u8207CoordinatorLayout\u7684\u83ef\u9e97\u642d\u914d"},"content":{"rendered":"

Android AppBarLayout\u8207CoordinatorLayout\u7684\u83ef\u9e97\u642d\u914d<\/h1>\n

AppBarLayout\u8207CoordinatorLayout\u5169\u500b\u642d\u914d\u53ef\u4ee5\u8b8a\u51fa\u4e0d\u540c\u7684\u6a23\u5b50\uff0c\u9019\u88e1\u6703\u793a\u7bc4\u6bd4\u8f03\u5e38\u7528\u7684\u64cd\u4f5c\u4f86\u642d\u5230\u7279\u6b8a\u7684\u6548\u679c\uff0c\u53ea\u8981\u5408\u7406\u904b\u7528\u5169\u500bLayout\u7684\u6ed1\u52d5\u5c31\u53ef\u4ee5\u5f88\u9806\u5229\u7684\u9054\u5230\u4f60\u8981\u7684\u6548\u679c\uff0c\u53ef\u4ee5\u914d\u5408RecyclerView\u6216ScrollerView\u6216NestedScrollView<\/h5>\n
\n

\u6587\u7ae0\u76ee\u9304<\/h4>\n
    \n
  1. \u76f8\u95dc\u5c6c\u6027<\/a><\/li>\n
  2. AppBarLayout\u756b\u9762\u5e03\u5c40<\/a><\/li>\n
  3. \u5275\u5efa\u6ed1\u52d5\u76e3\u807d<\/a><\/li>\n
  4. \u81ea\u5b9a\u7fa9\u6ed1\u52d5\u6548\u679c<\/a><\/li>\n
  5. CollapsingToolbarLayout\u756b\u9762\u5e03\u5c40<\/a><\/li>\n
  6. \u6548\u679c\u5c55\u793a<\/a><\/li>\n
  7. Github<\/a><\/li>\n<\/ol>\n
    \n

    <\/a><\/p>\n

    1.\u76f8\u95dc\u5c6c\u6027<\/h4>\n
    AppBarLayout<\/h5>\n
    \/\/\u53ef\u6efe\u52d5\napp:layout_scrollFlags=\"scroll\"\n\/\/\u5148\u6efe\u52d5\u81ea\u5df1\u5728\u6efe\u52d5\u5b50View\napp:layout_scrollFlags=\"enterAlways\"\n\/\/\u5148\u6efe\u52d5\u81ea\u5df1\u5230\u6700\u5c0f\u9ad8\u5ea6\u5176\u4ed6View\u6efe\u5b8c\u518d\u6efe\u5230\u6700\u5927\u9ad8\u5ea6\napp:layout_scrollFlags=\"enterAlwaysCollapsed\"\n\/\/\u5148\u6efe\u52d5\u81ea\u5df1\u5230\u6700\u5c0f\u9ad8\u5ea6\napp:layout_scrollFlags=\"exitUntilCollapsed\"\n\/\/\u6efe\u52d5\u4f9d\u7167\u65b9\u5411\u6703\u6709\u5438\u9644\u4f5c\u7528\napp:layout_scrollFlags=\"snap\"\napp:layout_behavior\n<\/code><\/pre>\n
    CoordinatorLayout<\/h5>\n
    \/\/\u56fa\u5b9a\u8b93View\u5728AppBar\u4e0b\u65b9\napp:layout_behavior=\"@string\/appbar_scrolling_view_behavior\"\n<\/code><\/pre>\n
    CollapsingToolbarLayout<\/h5>\n
    \/\/\u6536\u8d77\u5f8c\u7684\u984f\u8272\napp:contentScrim=\"@color\/white\"\n\/\/\u6536\u8d77\u5f8c\u7684\u4f4d\u5b50\napp:collapsedTitleGravity=\"center\"\n\/\/\u958b\u555f\u5f8c\u7684\u4f4d\u5b50\napp:expandedTitleGravity=\"center\"\n<\/code><\/pre>\n
    2.AppBarLayout\u756b\u9762\u5e03\u5c40<\/h4>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\n<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\">\n\n    <com.google.android.material.appbar.AppBarLayout\n        android:id=\"@+id\/appBar\"\n        android:background=\"#56F569\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\">\n\n        <TextView\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"200dp\"\n            android:background=\"#56F569\"\n            android:gravity=\"center\"\n            android:text=\"Banner\u9801\"\n            android:textColor=\"@color\/white\"\n            android:textSize=\"26sp\"\n            app:layout_scrollFlags=\"scroll\" \/>\n\n        <TextView\n            android:id=\"@+id\/title\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"50dp\"\n            android:textSize=\"20sp\"\n            android:textStyle=\"bold\"\n            android:background=\"#0900FF\"\n            android:gravity=\"center\"\n            android:text=\"Title Bar\"\n            android:textColor=\"@color\/white\" \/>\n\n    <\/com.google.android.material.appbar.AppBarLayout>\n\n    <androidx.core.widget.NestedScrollView\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        app:layout_behavior=\"@string\/appbar_scrolling_view_behavior\">\n\n        <LinearLayout\n            android:id=\"@+id\/ll_bottom\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"match_parent\"\n            android:orientation=\"vertical\">\n\n            <TextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"500dp\"\n                android:gravity=\"center\"\n                android:text=\"\u4e0b\u9762\u9084\u53ef\u4ee5\u7e7c\u7e8c\u6ed1\u52d5~\" \/>\n\n            <TextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"50dp\"\n                android:background=\"#009988\"\n                android:gravity=\"center\"\n                android:text=\"AAA\" \/>\n\n            <TextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"50dp\"\n                android:background=\"#550028\"\n                android:gravity=\"center\"\n                android:text=\"BBB\" \/>\n\n            <TextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"50dp\"\n                android:background=\"#009922\"\n                android:gravity=\"center\"\n                android:text=\"CCC\" \/>\n\n            <TextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"50dp\"\n                android:background=\"#004312\"\n                android:gravity=\"center\"\n                android:text=\"DDD\" \/>\n\n            <TextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"50dp\"\n                android:background=\"#F29922\"\n                android:gravity=\"center\"\n                android:text=\"EEE\" \/>\n        <\/LinearLayout>\n    <\/androidx.core.widget.NestedScrollView>\n<\/androidx.coordinatorlayout.widget.CoordinatorLayout>\n<\/code><\/pre>\n
    <\/a><\/p>\n
    3.\u5275\u5efa\u6ed1\u52d5\u76e3\u807d<\/h4>\n
    package com.example.screenutils\n\nimport com.google.android.material.appbar.AppBarLayout\nimport com.google.android.material.appbar.AppBarLayout.OnOffsetChangedListener\nimport kotlin.math.abs\n\n\n\/**\n * Author: Wade\n * E-mail: tony91097@gmail.com\n * Date: 2021\/9\/28\n *\/\nabstract class AppBarStateChangeListener : OnOffsetChangedListener {\n\n    sealed class State {\n        object EXPANDED : State()\n        object COLLAPSED : State()\n        object IDLE : State()\n    }\n\n    private var mCurrentState: State = State.IDLE\n\n    override fun onOffsetChanged(appBarLayout: AppBarLayout, verticalOffset: Int) {\n        when {\n            verticalOffset == 0 -> {\n                if (mCurrentState != State.EXPANDED) {\n                    onStateChanged(appBarLayout, State.EXPANDED)\n                }\n                mCurrentState = State.EXPANDED\n            }\n            abs(verticalOffset) >= appBarLayout.totalScrollRange -> {\n                if (mCurrentState != State.COLLAPSED) {\n                    onStateChanged(appBarLayout, State.COLLAPSED)\n                }\n                mCurrentState = State.COLLAPSED\n            }\n            else -> {\n                if (mCurrentState != State.IDLE) {\n                    onStateChanged(appBarLayout, State.IDLE)\n                }\n                mCurrentState = State.IDLE\n            }\n        }\n        offset(appBarLayout, verticalOffset)\n    }\n\n    abstract fun onStateChanged(appBarLayout: AppBarLayout, state: State)\n    abstract fun offset(appBarLayout: AppBarLayout, verticalOffset: Int)\n}\n<\/code><\/pre>\n
    <\/a><\/p>\n
    4.\u81ea\u5b9a\u7fa9\u6ed1\u52d5\u6548\u679c<\/h4>\n
    val appBar = findViewById<AppBarLayout>(R.id.appBar)\nval title = findViewById<TextView>(R.id.title)\n\nappBar.addOnOffsetChangedListener(object : AppBarStateChangeListener() {\n    override fun onStateChanged(appBarLayout: AppBarLayout, state: State) {\n        when (state) {\n            \/\/\u958b\u8d77\n            State.EXPANDED -> {\n                title.text = \"Title Bar\"\n                title.setBackgroundColor(Color.parseColor(\"#0900FF\"))\n            }\n            \/\/\u5408\u8d77\n            State.COLLAPSED -> {\n                title.text = \"Finish\"\n                title.setBackgroundColor(Color.parseColor(\"#56F569\"))\n            }\n            \/\/\u6b63\u5728\u6ed1\u52d5\u4e2d\n            else -> {\n                title.setBackgroundColor(Color.parseColor(\"#E94B25\"))\n            }\n        }\n    }\n\n    override fun offset(appBarLayout: AppBarLayout, verticalOffset: Int) {\n        val totalScrollRange = appBarLayout.totalScrollRange\n        val ratio = abs(verticalOffset.toFloat() \/ totalScrollRange)\n        \/\/\u65cb\u8f49\n        title.rotation = ratio * 360\n    }\n})\n<\/code><\/pre>\n
    <\/a><\/p>\n
    5.CollapsingToolbarLayout\u756b\u9762\u5e03\u5c40<\/h4>\n
    <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:fitsSystemWindows=\"false\"\n    tools:context=\".MainActivity\">\n\n    <com.google.android.material.appbar.AppBarLayout\n        android:id=\"@+id\/app_bar\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\">\n\n        <com.google.android.material.appbar.CollapsingToolbarLayout\n            android:background=\"#56F569\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"wrap_content\"\n            app:contentScrim=\"@color\/white\"\n            app:layout_scrollFlags=\"scroll|exitUntilCollapsed\"\n            app:title=\"ToolbarLayout\">\n\n            <ImageView\n                android:id=\"@+id\/v_pager_logo\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"300dp\" \/>\n\n            <androidx.appcompat.widget.Toolbar\n                android:id=\"@+id\/toolbar\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"50dp\" \/>\n        <\/com.google.android.material.appbar.CollapsingToolbarLayout>\n\n    <\/com.google.android.material.appbar.AppBarLayout>\n\n    <androidx.core.widget.NestedScrollView\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        app:layout_behavior=\"@string\/appbar_scrolling_view_behavior\">\n\n        <LinearLayout\n            android:id=\"@+id\/ll_bottom\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"match_parent\"\n            android:orientation=\"vertical\">\n\n            <TextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"500dp\"\n                android:gravity=\"center\"\n                android:text=\"\u4e0b\u9762\u9084\u53ef\u4ee5\u7e7c\u7e8c\u6ed1\u52d5~\" \/>\n\n            <TextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"50dp\"\n                android:background=\"#009988\"\n                android:gravity=\"center\"\n                android:text=\"AAA\" \/>\n\n            <TextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"50dp\"\n                android:background=\"#550028\"\n                android:gravity=\"center\"\n                android:text=\"BBB\" \/>\n\n            <TextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"50dp\"\n                android:background=\"#009922\"\n                android:gravity=\"center\"\n                android:text=\"CCC\" \/>\n\n            <TextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"50dp\"\n                android:background=\"#004312\"\n                android:gravity=\"center\"\n                android:text=\"DDD\" \/>\n\n            <TextView\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"50dp\"\n                android:background=\"#F29922\"\n                android:gravity=\"center\"\n                android:text=\"EEE\" \/>\n        <\/LinearLayout>\n    <\/androidx.core.widget.NestedScrollView>\n<\/androidx.coordinatorlayout.widget.CoordinatorLayout>\n<\/code><\/pre>\n
    <\/a><\/p>\n
    6.\u6548\u679c\u5c55\u793a<\/h4>\n
    <\/a><\/p>\n
    <\/a><\/p>\n
    7.Github<\/h4>\n
    Android AppBarLayout\u8207CoordinatorLayout\u7684\u83ef\u9e97\u642d\u914d Github<\/a><\/p>\n\n
    <\/div>","protected":false},"excerpt":{"rendered":"
    Android AppBarLayout\u8207CoordinatorLayout\u7684\u83ef\u9e97\u642d\u914d AppBarLayou … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[5],"tags":[13,204,203],"class_list":["post-1517","post","type-post","status-publish","format-standard","hentry","category-android","tag-android","tag-appbarlayout","tag-coordinatorlayout"],"_links":{"self":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts\/1517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/comments?post=1517"}],"version-history":[{"count":1,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts\/1517\/revisions"}],"predecessor-version":[{"id":1519,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts\/1517\/revisions\/1519"}],"wp:attachment":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/media?parent=1517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/categories?post=1517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/tags?post=1517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}