CoordinatorLayout

发表于 | 分类于 | 阅读次数:

CoordinatorLayout

Material风格布局，包含在support Library中，结合AppbarLayout,CollapsingToolbarLayout等可达到MD设计风格布局

  • build.gradle
    1
    2
    3
    4
    5
    6
    7
    8
    9
    def SUPPORT = "26.1.0"
    dependencies {
      implementation 'com.android.support:appcompat-v7:26.1.0'
        implementation 'com.android.support.constraint:constraint-layout:1.0.2'
        implementation "com.android.support:design:$SUPPORT"
        implementation "com.android.support:cardview-v7:$SUPPORT"
        implementation "com.android.support:recyclerview-v7:$SUPPORT"
        implementation 'de.hdodenhof:circleimageview:1.3.0'
    }

  • styles.xml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorAccent</item>
            <item name="colorPrimaryDark">@color/colorAccent</item>
            <item name="colorAccent">@color/colorAccent</item>
            <item name="android:statusBarColor">@color/colorAccent</item>
            <!--<item name="android:windowDrawsSystemBarBackgrounds">true</item>-->
            <item name="android:windowTranslucentStatus">true</item>
        </style>

  • activity_main.xml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
      <?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:fitsSystemWindows="true"
        android:layout_height="match_parent"
        tools:context="com.willkernel.app.coordinatorlayoutdemo.MainActivity">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|enterAlways|snap">

            <android.support.v7.widget.Toolbar
                android:id="@+id/main.toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                android:elevation="4dp"
                android:minHeight="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark"
                android:title="@string/app_name"
                app:title="@string/app_name" />
                <!--android:background="?attr/colorPrimary"-->
        </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:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">


                <android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="8dp"
                    app:contentPadding="8dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">

                        <TextView
                            android:id="@+id/main.coordinator.textview"
                            style="@style/TextItem"
                            android:text="@string/item_simple_coordinator_example" />

                        <TextView
                            android:id="@+id/main.ioexample.textview"
                            style="@style/TextItem"
                            android:text="@string/item_googleio_example" />

                        <TextView
                            android:id="@+id/main.materialup.textview"
                            style="@style/TextItem"
                            android:text="@string/item_materialup_example" />

                        <TextView
                            android:id="@+id/main.space.textview"
                            style="@style/TextItem"
                            android:text="@string/item_flexible_space_example" />

                        <TextView
                            android:id="@+id/main.swipebehavior.textview"
                            style="@style/TextItem"
                            android:text="Swype Behavior example" />
                    </LinearLayout>
                </android.support.v7.widget.CardView>
                <android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="8dp"
                    app:contentPadding="8dp">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:lineSpacingExtra="6dp"
                        android:text="@string/about" />

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

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>

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

  • MaintActivity.java

    1
    2
    Toolbar toolbar=findViewById(R.id.main_toolbar);
    setSupportActionBar(toolbar);//控制toolbar内部bottom边距

  • SimpleAppbarLayout

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    <?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_light"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/main.appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorAccent"
            app:expandedTitleMarginEnd="46dp"
            app:expandedTitleMarginStart="46dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:scrimAnimationDuration="1000"
            app:title="@string/app_name"
            app:titleEnabled="true">
            <!--app:scrimAnimationDuration="1000" 颜色过度持续时间-->
            <!--  app:expandedTitleMarginStart 展开时标题的内边距-->
            <!--  app:contentScrim="?attr/colorAccent" 折叠时内容背景颜色-->
            <!--  app:layout_scrollFlags="scroll|exitUntilCollapsed" 和
            android:minHeight="200dp" 控制-->
            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:minHeight="200dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/material_flat"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />
            <!--   app:layout_collapseParallaxMultiplier="0.7"
                app:layout_collapseMode="parallax" 两者结合使用-->
            <android.support.v7.widget.Toolbar
                android:id="@+id/main.toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:fitsSystemWindows="true"
                android:title="toolbar"
                app:layout_collapseMode="parallax"
                app:title="toolbar" />
            <!--在titleEnabled=true时，app:title="toolbar"    android:title="toolbar"设置标题无效"-->
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lineSpacingExtra="8dp"
            android:padding="@dimen/activity_horizontal_margin"
            android:text="@string/about"
            android:textSize="20sp" />
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:src="@mipmap/ic_launcher"
        app:layout_anchor="@id/main.appbar"
        app:layout_anchorGravity="bottom|right|end" />
    </android.support.design.widget.CoordinatorLayout>

  • AppBarStateChangeListener

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    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);
    }

  • SimpleCoordinatorActivity

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    //沉浸式状态栏
    //        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//5.0之上
    //            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    //            getWindow().setStatusBarColor(Color.RED);
    //        }

      setContentView(R.layout.activity_simple_coordinator);

      AppBarLayout main_appbar = findViewById(R.id.main_appbar);
      main_appbar.addOnOffsetChangedListener(stateListener());

      Toolbar toolbar=findViewById(R.id.main_toolbar);
      setSupportActionBar(toolbar);

      CollapsingToolbarLayout mCollapsingToolbarLayout = findViewById(R.id.main_collapsing);
      //通过CollapsingToolbarLayout修改字体颜色
      mCollapsingToolbarLayout.setExpandedTitleColor(Color.RED);//设置还没收缩时状态下字体颜色
      mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//设置收缩后Toolbar上字体的颜色

  • Title+Subtitle+NavigationIcon,Toolbar固定并在图片下方

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/io.appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <!--app:contentScrim="?attr/colorPrimary" 没有标题时也要设置背景颜色，不然在滚动的时候有toolbar缺失上半部-->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/material_flat"
                app:layout_collapseMode="parallax" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="56dp"
            android:lineSpacingExtra="8dp"
            android:text="@string/about" />
    </android.support.v4.widget.NestedScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/io.toolbar"
        android:layout_width="match_parent"
        android:layout_height="112dp"
        android:background="?attr/colorAccent"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_anchor="@id/io.appbar"
        app:layout_anchorGravity="bottom"
        android:paddingTop="16dp"
        app:layout_collapseMode="pin"
        app:navigationIcon="@drawable/abc_ic_ab_back_material"
        app:subtitle="subtitle"
        app:theme="@style/ThemeOverlay.AppCompat.Light"
        app:title="@string/app_name">
        <!--android:elevation="4dp" 增加阴影，边界过度更自然-->

        <!--<LinearLayout-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:layout_gravity="bottom"-->
        <!--android:layout_marginBottom="8dp"-->
        <!--android:minHeight="?android:attr/actionBarSize"-->
        <!--android:orientation="vertical">-->

        <!--<TextView-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:text="@string/app_name"-->
        <!--android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse" />-->

        <!--<TextView-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:layout_marginTop="4dp"-->
        <!--android:text="subtitle"-->
        <!--android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse" />-->
        <!--</LinearLayout>-->
    </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CoordinatorLayout>


    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });

  • Navigation+TabLayout+ViewPager+CircleImage

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    <?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:contentScrim="?attr/colorAccent"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|snap">
            <!--app:contentScrim="?attr/colorPrimary" 没有标题时也要设置背景颜色，不然在滚动的时候有toolbar缺失上半部-->
            <ImageView
                android:id="@+id/profile.image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/material_flat"
                app:layout_collapseMode="parallax" />

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/profile.toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorAccent"
            android:minHeight="?attr/actionBarSize"
            android:paddingTop="16dp"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:navigationIcon="@drawable/abc_ic_ab_back_material"
            app:theme="@style/ThemeOverlay.AppCompat.Light">

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

        <LinearLayout
            android:id="@+id/profile.title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingTop="@dimen/activity_horizontal_margin"
            app:layout_scrollFlags="scroll|enterAlways|snap">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/app_name"
                android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:gravity="center"
                android:text="subtitle"
                android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse" />
        </LinearLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/profile.tablayout"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:paddingTop="24dp"
            app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/profile.viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right|end"
        android:layout_margin="16dp"
        android:elevation="8dp" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile.avatar"
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:layout_gravity="center_horizontal"
        android:elevation="8dp"
        android:src="@mipmap/user_avatar"
        app:border_color="#FFF"
        app:border_width="2dp"
        app:layout_anchor="@id/profile.title"
        app:layout_anchorGravity="center_horizontal|top"
        app:layout_scrollFlags="scroll" /></android.support.design.widget.CoordinatorLayout>

  • ProfileActivity.java

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64

        profile_avatar = findViewById(R.id.profile_avatar);

        TabLayout tabLayout = findViewById(R.id.profile_tablayout);
        ViewPager viewPager = findViewById(R.id.profile_viewpager);
        AppBarLayout appBarLayout = findViewById(R.id.profile_appbar);
        appBarLayout.addOnOffsetChangedListener(this);
        mMaxScrollSize = appBarLayout.getTotalScrollRange();

        viewPager.setAdapter(new TabsAdapter(getSupportFragmentManager()));
        tabLayout.setupWithViewPager(viewPager);

        Toolbar toolbar = findViewById(R.id.profile_toolbar);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
    }

    public static void start(Context c) {
        c.startActivity(new Intent(c, MaterialUpConceptActivity.class));
    }

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
        if (mMaxScrollSize == 0) {
            mMaxScrollSize = appBarLayout.getTotalScrollRange();
        }
        int percent = Math.abs(i) * 100 / mMaxScrollSize;

        if (percent >= PERCENTAGE_TO_ANIMATE_AVATAR && mIsAvatarShown) {
            mIsAvatarShown = false;
            profile_avatar.animate().scaleX(0).scaleY(0).setDuration(200).start();
        }
        if (percent <= PERCENTAGE_TO_ANIMATE_AVATAR && !mIsAvatarShown) {
            mIsAvatarShown = true;
            profile_avatar.animate().scaleX(1).scaleY(1).setDuration(200).start();
        }
    }

    private class TabsAdapter extends FragmentPagerAdapter {
        private static final int TAB_COUNT = 2;

        public TabsAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return MyFragment.newInstance();
        }

        @Override
        public int getCount() {
            return TAB_COUNT;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "Tab" + position;
        }
    }

  • MyFragment

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    private RecyclerView rootView;

        public static MyFragment newInstance() {
            return new MyFragment();
        }

        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            rootView = (RecyclerView) inflater.inflate(R.layout.fragment_page, container, false);
            return rootView;
        }

        @Override
        public void onActivityCreated(@Nullable Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);
            initRecyclerView();
        }

        private void initRecyclerView() {
            rootView.setAdapter(new MyPageAdapter(10));
        }

        private class MyPageAdapter extends RecyclerView.Adapter<MyVH> {
            private final int count;

            public MyPageAdapter(int count) {
                this.count = count;
            }

            @Override
            public MyVH onCreateViewHolder(ViewGroup parent, int viewType) {
                View item = LayoutInflater.from(parent.getContext())
                        .inflate(R.layout.list_item_card, parent, false);
                return new MyVH(item);
            }

            @Override
            public void onBindViewHolder(MyVH holder, int position) {

            }

            @Override
            public int getItemCount() {
                return count;
            }
        }

        private class MyVH extends RecyclerView.ViewHolder {
            public MyVH(View itemView) {
                super(itemView);
            }
        }

  • fragment_page.xml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <android.support.v7.widget.RecyclerView 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:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    app:layoutManager="android.support.v7.widget.LinearLayoutManager"
    tools:listitem="@layout/list_item_card" />

  • 图片被内容覆盖一部分，形成上下两层，FAB跟随AppbarLayout放大缩小

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    <?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorAccent"
            app:expandedTitleMarginBottom="90dp"
            app:expandedTitleMarginStart="32dp"
            app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
            app:title="flex">
            <!--app:expandedTitleMarginBottom="90dp" 被遮挡后需要设置底部内边距-->
            <ImageView
                android:id="@+id/flex.image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/material_flat"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/flex.toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                android:layout_marginTop="@dimen/activity_horizontal_margin"
                android:background="@null"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:navigationIcon="@drawable/abc_ic_ab_back_material"
                app:theme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/flex.scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:behavior_overlapTop="78dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <!--app:behavior_overlapTop="78dp" 图片被可滚动的ScrollView覆盖内容-->
        <android.support.v7.widget.CardView
            android:id="@+id/flex.cardview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            app:cardBackgroundColor="@android:color/white"
            app:cardCornerRadius="4dp"
            app:cardElevation="4dp"
            app:contentPaddingBottom="16dp"
            app:contentPaddingLeft="16dp"
            app:contentPaddingRight="16dp">

            <TextView
                android:id="@+id/flex.text"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/about" />
        </android.support.v7.widget.CardView>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/flex.fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:elevation="8dp"
        app:layout_anchor="@id/flex.cardview"
        app:layout_anchorGravity="end|right" />

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

  • FlexActivity.java

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    private static final int PERCENTAGE_TO_SHOW_IMAGE = 20;
    appBarLayout.addOnOffsetChangedListener(this);
        mFab = findViewById(R.id.flex_fab);
        Toolbar toolbar = findViewById(R.id.flex_toolbar);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
    }

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
        if (mMaxScrollSize == 0) {
            mMaxScrollSize = appBarLayout.getTotalScrollRange();
        }
        if (mMaxScrollSize == 0) return;
        int currentScrollPercentage = (Math.abs(i)) * 100
                / mMaxScrollSize;
        if (currentScrollPercentage >= PERCENTAGE_TO_SHOW_IMAGE && !mIsImageHidden) {
            mIsImageHidden = true;
            mFab.animate().scaleX(0).scaleY(0).start();
        }
        if (currentScrollPercentage < PERCENTAGE_TO_SHOW_IMAGE && mIsImageHidden) {
            mIsImageHidden = false;
            mFab.animate().scaleX(1).scaleY(1).start();
        }
    }
  • 设置CardView在CoordinatorLayout中的滑动移除Behavior
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    SwipeDismissBehavior swipeDismissBehavior = new SwipeDismissBehavior();
        swipeDismissBehavior.setSwipeDirection(SwipeDismissBehavior.SWIPE_DIRECTION_ANY);
        swipeDismissBehavior.setListener(new SwipeDismissBehavior.OnDismissListener() {
            @Override
            public void onDismiss(View view) {
                Toast.makeText(SwipeBehaviorExampleActivity.this,
                        "Card swiped !!", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onDragStateChanged(int state) {

            }
        });

    CardView cardView = findViewById(R.id.swipe_card);
    LayoutParams layoutParams = (LayoutParams) cardView.getLayoutParams();
    layoutParams.setBehavior(swipeDismissBehavior);
willkernel wechat
关注微信公众号
帅哥美女们，请赐予我力量吧!