Android5.0特性 - CoordinatorLayout使用详解

最新推荐文章于 2023-01-27 09:00:00 发布
最新推荐文章于 2023-01-27 09:00:00 发布
阅读量921 收藏 1
点赞数 1
分类专栏： # 5.0-10.0 新特性、兼容 文章标签： Android Android5.0控件 折叠布局 抽屉布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20451879/article/details/76539621
版权

默默的对自己说声抱歉，现在才学习了这些知识，不知不觉写了挺多，同时我已经将此Demo代码已上传到了github（正好练习了一次github项目上传 > <）

在我的印象中CoordinatorLayout应该出现在Android5.0版本，同时关联的控件有AppBarLayout、CollapsingToolbarLayout、Toolbar等主要控件，主要实现了顶部状态栏的折叠效果，优化了用户体验

实现效果

Effect4为2018.06月补入效果，可快速实现项目需求

Effect 一： toolbar
这里写图片描述

Effect 二:CollapsingToolbarLayout+ToolBar
这里写图片描述
Effect 三 :CollapsingToolbarLayout+ToolBar+TabLayout
这里写图片描述

Effect四：快速实现折叠效果，解决各种所欲问题（此为后期补入）

  • 展示状态 1
    这里写图片描述

  • 展示状态 2（折叠中的效果优化，后续问题解决的第四条添加后既可实现~）
    这里写图片描述

前情提要

每一个效果对应的Activity都是独立存在的，所以下面我会分批简单进行介绍

  • 全局性 build
 compile 'com.android.support:design:24.2.1'
  • 全局性 提醒
    （最外层布局添加，作用于调用自定义属性，好比折叠的效果就是使用的app属性）
 xmlns:app="http://schemas.android.com/apk/res-auto"
  • 公用代码

AppBarStateChangeListener（可直接Copy）：

package com.yl.bar.barlayout.listener;

import android.support.design.widget.AppBarLayout;

/**
 * Created by YongLiu on 2017/7/31.
 */

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);
}

StatusBarCompat 状态栏工具

package com.example.yongliu.toolbardemo;

import android.annotation.TargetApi;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Build;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;

/**
 * author  yongliu
 * date  2018/5/29.
 * desc:
 */

public class StatusBarCompat {
    private static final int INVALID_VAL = -1;
    private static final int COLOR_DEFAULT = Color.parseColor("#20000000");

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public static void compat(Activity activity, int statusColor) {

        //当前手机版本为5.0及以上
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            if (statusColor != INVALID_VAL) {
                activity.getWindow().setStatusBarColor(statusColor);
            }
            return;
        }

        //当前手机版本为4.4
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            int color = COLOR_DEFAULT;
            ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);
            if (statusColor != INVALID_VAL) {
                color = statusColor;
            }
            View statusBarView = new View(activity);
            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    getStatusBarHeight(activity));
            statusBarView.setBackgroundColor(color);
            contentView.addView(statusBarView, lp);
        }

    }
//activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    public static void compat(Activity activity) {
        compat(activity, INVALID_VAL);
    }


    public static int getStatusBarHeight(Context context) {
        int result = 0;
        int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = context.getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }

    public static void setWindowImmersiveState(Activity activity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window window = activity.getWindow();
            window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
    }
}
实现过程

可根据不同的诉求，看不同效果的实现方式 ~

效果一：主要使用的了ToolBar，使用的时候外部需要被AppBarLayout包裹

Xml 中：

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#00000000"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

同时代码中我们需要动态设置ToolBar属性：

 toolBar.setTitle("初次使用，多多指教！");
 toolBar.setBackgroundColor(Color.parseColor("#21aae3"));

注意：最外层的布局可以使用LinearLayout也可以使用符合当前布局的CoordinatorLayout布局

ToolBarActivity

package com.yl.bar.barlayout.activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.yl.bar.barlayout.R;
import java.util.ArrayList;
import java.util.List;

public class ToolBarActivity extends AppCompatActivity {
    private List lists;
    private Toolbar toolBar;
    private RecyclerView mRv;

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

        toolBar = (Toolbar) findViewById(R.id.toolbar);
        mRv = (RecyclerView) findViewById(R.id.recyclerView);

        initData();
    }

    private void initData() {
        lists = new ArrayList();
        for (int i = 0; i < 50; i++) {
            lists.add("Please go " + i);
        }

        toolBar.setTitle("初次使用，多多指教！");
        toolBar.setBackgroundColor(Color.parseColor("#21aae3"));
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        mRv.setLayoutManager(linearLayoutManager);
        mRv.setAdapter(new LayoutAdapter());
    }

    class LayoutAdapter extends RecyclerView.Adapter<LayoutAdapter.myViewholder> {
        @Override
        public LayoutAdapter.myViewholder onCreateViewHolder(ViewGroup parent, int viewType) {
            myViewholder myViewholder = new myViewholder(LayoutInflater.from(ToolBarActivity.this).inflate(R.layout.item_layout, parent, false));
            return myViewholder;
        }

        @Override
        public void onBindViewHolder(LayoutAdapter.myViewholder holder, final int position) {
            holder.mItemData.setText(lists.get(position) + "");
        }

        @Override
        public int getItemCount() {
            return lists == null ? 0 : lists.size();
        }

        class myViewholder extends RecyclerView.ViewHolder {
            public TextView mItemData;
            public myViewholder(View itemView) {
                super(itemView);
                mItemData = (TextView) itemView.findViewById(R.id.;
            }
        }
    }
}

activity_toolbar

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#00000000"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>
效果二：Image折叠效果

TitleImageTextActivity

package com.yl.bar.barlayout.activity;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import com.yl.bar.barlayout.R;
import com.yl.bar.barlayout.listener.AppBarStateChangeListener;

import java.util.ArrayList;
import java.util.List;

public class TitleImageTextActivity extends AppCompatActivity {
    private List lists;
    private Toolbar mToolBar;
    private CollapsingToolbarLayout mCollapsingToolBar;
    private AppBarLayout mAppBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_text);
        mCollapsingToolBar = (CollapsingToolbarLayout) findViewById(R.id.style3_collapsing_toolbar_layout);
        mToolBar = (Toolbar) findViewById(R.id.style3_toolbar);
        mAppBar = (AppBarLayout) findViewById(R.id.style3_appbar);

        setSupportActionBar(mToolBar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //ToolBar的返回键
        mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });

        //监听我们拖拽的情况
        mAppBar.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                Log.d("STATE", state.name());
                if (state == State.EXPANDED) {
                    //展开状态
                    //展开的时候 - 字体颜色
                    mCollapsingToolBar.setExpandedTitleColor(Color.RED);
                    mCollapsingToolBar.setTitle("Baby,I love you !");
//                     如在展示的时候不想显示任何字体，设置为空格即可
//                    mCollapsingToolBar.setTitle(" ");
                } else if (state == State.COLLAPSED) {
                    //折叠状态
                    //收缩的时候 - 字体颜色
                    mCollapsingToolBar.setCollapsedTitleTextColor(Color.BLUE);
                    //收缩后的ToolBar背景色
                    mCollapsingToolBar.setContentScrimColor(Color.WHITE);
                    mCollapsingToolBar.setTitle("you can do everything !");
                } else {
                    //中间状态
                    mCollapsingToolBar.setTitle("change - ing !");
                }
            }
        });

 //        mCollapsingToolBar.setTitle("If you are happy .");
//        //展开的时候 - 字体颜色
//        mCollapsingToolBar.setExpandedTitleColor(Color.RED);
//        //收缩的时候 - 字体颜色
//        mCollapsingToolBar.setCollapsedTitleTextColor(Color.BLUE);
//        //收缩后的ToolBar背景色
//        mCollapsingToolBar.setContentScrimColor(Color.WHITE);

         initData();
    }

    private void initData() {
        lists = new ArrayList();
        for (int i = 0; i < 50; i++) {
            lists.add("Please go " + i + " !");
        }

        RecyclerView mRv = (RecyclerView) findViewById(R.id.style3_recyclerView);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        mRv.setLayoutManager(linearLayoutManager);
        mRv.setAdapter(new LayoutAdapter());
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_toolbar, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.menu_toolbar_edit:
                Toast.makeText(this,"已经触发编辑按钮",Toast.LENGTH_SHORT).show();
                break;
        }
        return super.onOptionsItemSelected(item);
    }

    class LayoutAdapter extends RecyclerView.Adapter<LayoutAdapter.myViewholder> {

        @Override
        public LayoutAdapter.myViewholder onCreateViewHolder(ViewGroup parent, int viewType) {

            myViewholder myViewholder = new myViewholder(LayoutInflater.from(TitleImageTextActivity.this).inflate(R.layout.item_layout, parent, false));
            return myViewholder;
        }

        @Override
        public void onBindViewHolder(LayoutAdapter.myViewholder holder, final int position) {
            holder.mItemData.setText(lists.get(position) + "");
        }

        @Override
        public int getItemCount() {
            return lists == null ? 0 : lists.size();
        }

        class myViewholder extends RecyclerView.ViewHolder {
            public TextView mItemData;

            public myViewholder(View itemView) {
                super(itemView);
                mItemData = (TextView) itemView.findViewById(R.id.tv_item);
            }
        }
    }
}

activity_image_text

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:fitsSystemWindows="true">

    <!--<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:orientation="vertical">-->

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/style3_collapsing_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="#30469b"
                app:expandedTitleGravity="center"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/background"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7" />

                <android.support.v7.widget.Toolbar
                    android:id="@+id/style3_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:expandedTitleGravity="center"
                    app:layout_collapseMode="pin">

                    <!--<LinearLayout-->
                        <!--android:layout_width="wrap_content"-->
                        <!--android:layout_height="wrap_content"-->
                        <!--android:gravity="right"-->
                        <!--android:orientation="horizontal">-->

                        <!--<TextView-->
                            <!--android:layout_width="20dp"-->
                            <!--android:layout_height="20dp"-->
                            <!--android:layout_gravity="right"-->
                            <!--android:layout_marginRight="10dp"-->
                            <!--android:background="@drawable/editer"-->
                            <!--android:gravity="right" />-->
                    <!--</LinearLayout>-->

                </android.support.v7.widget.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"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">


            <android.support.v7.widget.RecyclerView
                android:id="@+id/style3_recyclerView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>
效果三：tab效果

Tab代码

TabToolBarActivity

package com.yl.bar.barlayout.activity;

import android.graphics.Color;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.ImageView;

import com.yl.bar.barlayout.R;
import com.yl.bar.barlayout.adapter.pagrFragmentAdapter;
import com.yl.bar.barlayout.listener.AppBarStateChangeListener;
import com.yl.bar.barlayout.view.FineFragment;
import com.yl.bar.barlayout.view.RainyFragment;
import com.yl.bar.barlayout.view.SnowyFragment;

import java.util.ArrayList;
import java.util.List;

public class TabToolBarActivity extends AppCompatActivity {

    private TabLayout mTab;
    private ViewPager mViewPager;
    private CollapsingToolbarLayout mCollapsingToolBar;
    private ImageView mBackImage;
    private AppBarLayout mAppBar;
    private Toolbar mToolBar;

    List<String> tabLists=new ArrayList<String>();
    List<Fragment> fragmentLists=new ArrayList<Fragment>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_tool_bar);
        //视图查询
        initView();
        //ToolBar的操作
        init();
        //数据存入
        initData();
    }

    private void initData() {
        tabLists.add("雨天");
        tabLists.add("晴天");
        tabLists.add("雪天");
        RainyFragment rainyFragment = new RainyFragment();
        FineFragment fineFragment = new FineFragment();
        SnowyFragment snowyFragment = new SnowyFragment();
        fragmentLists.add(rainyFragment);
        fragmentLists.add(fineFragment);
        fragmentLists.add(snowyFragment);
        
        initFragPager();
    }

    private void initFragPager() {
        //Adapter简单非常封装一下，传入储存tab的list和储存fragment的list就好
        mViewPager.setAdapter(new pagrFragmentAdapter(getSupportFragmentManager(), tabLists, fragmentLists));
        //俩者的关联方法
        mTab.setupWithViewPager(mViewPager);

        //tablayout有俩者模式，但是我觉得大多数还是我们现在使用的这一种-相当于权重当前空间
        mTab.setTabMode(TabLayout.MODE_FIXED);
    }

    private void init() {
        setSupportActionBar(mToolBar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });

        //监听内部的CollapsingToolbarLayout
        mAppBar.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                if (state == State.EXPANDED) {
                    //展开状态
                    mCollapsingToolBar.setTitle(" ");
                } else if (state == State.COLLAPSED) {
                    //折叠状态
                    //收缩的时候 - 字体颜色
                    mCollapsingToolBar.setCollapsedTitleTextColor(Color.BLUE);
                    //收缩后的ToolBar背景色
//                    mCollapsingToolBar.setContentScrimColor(Color.BLACK);
                    mCollapsingToolBar.setContentScrimResource(R.drawable.girl);
                    mCollapsingToolBar.setTitle("you need happy !");
                } else {
                    //中间状态
                    mCollapsingToolBar.setTitle(" ");
                }
            }
        });

    }

    private void initView() {
        //这里的资源查询均是按照Xml布局顺序进行查询，从第二层的AppBar
        mAppBar = (AppBarLayout) findViewById(R.id.tab_appbar);
        mToolBar = (Toolbar) findViewById(R.id.tab_toolbar);
        mBackImage = (ImageView) findViewById(R.id.tab_backdrop);
        mCollapsingToolBar = (CollapsingToolbarLayout) findViewById(R.id.tab_collapsing);
        mTab = (TabLayout) findViewById(R.id.tab_titles);
        mViewPager = (ViewPager) findViewById(R.id.tab_viewpager);
    }
}

pagrFragmentAdapter

package com.yl.bar.barlayout.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by YongLiu on 2017/8/1.
 */

public class pagrFragmentAdapter extends FragmentPagerAdapter {
    List<String> tabLists = new ArrayList<String>();
    List<Fragment> pageLists = new ArrayList<Fragment>();

    public pagrFragmentAdapter(FragmentManager fm, List tabLists, List pageLists) {
        super(fm);
        this.tabLists = tabLists;
        this.pageLists = pageLists;
    }

    @Override
    public Fragment getItem(int position) {
        return pageLists.get(position);
    }

    @Override
    public int getCount() {
        return pageLists.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return tabLists.get(position % tabLists.size());
    }
}

activity_tab_tool_bar

<?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/tab_appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/tab_collapsing"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/tab_backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/girl"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/tab_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.TabLayout
            android:id="@+id/tab_titles"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorHeight="4dp"
            app:tabTextColor="#159"
            app:tabIndicatorColor="#147"
            app:tabSelectedTextColor="#111"
            />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/tab_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
效果四：快速实现项目需求，一步集成

MainActivity

package com.example.yongliu.toolbardemo;

import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.WindowManager;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private Toolbar mToolBar;
    private CollapsingToolbarLayout mCollapsingToolBar;
    private AppBarLayout mAppBar;
    private TextView mTitle;

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

        mCollapsingToolBar = (CollapsingToolbarLayout) findViewById(R.id.style3_collapsing_toolbar_layout);
        mToolBar = (Toolbar) findViewById(R.id.style3_toolbar);
        mAppBar = (AppBarLayout) findViewById(R.id.style3_appbar);
        mTitle = findViewById(R.id.title);

        //设置透明状态栏
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }

        //监听我们拖拽的情况
        mAppBar.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                //隐藏toolbar默认返回键
                setSupportActionBar(mToolBar);
                getSupportActionBar().setDisplayHomeAsUpEnabled(false);

                //以下为折叠的三种状态
                if (state == AppBarStateChangeListener.State.EXPANDED) {
                    mCollapsingToolBar.setTitle(" ");
                    mTitle.setVisibility(View.GONE);
                } else if (state == AppBarStateChangeListener.State.COLLAPSED) {
                    //收缩的时候 - 字体颜色
                    mCollapsingToolBar.setCollapsedTitleTextColor(Color.WHITE);
                    //收缩后的ToolBar背景色 #4081D6
                    mCollapsingToolBar.setContentScrimColor(ContextCompat.getColor(MainActivity.this, R.color.blue1));
                    mTitle.setVisibility(View.VISIBLE);
                    mTitle.setText("一朵花儿开");
                } else {
                    mTitle.setVisibility(View.GONE);
                    mCollapsingToolBar.setTitle(" ");
                    //问题解决第四条，解决折叠中效果不好的问题
                    //BitmapDrawable bitmapDrawable = new BitmapDrawable(String.valueOf(ContextCompat.getDrawable(MainActivity.this, R.mipmap.ic_launcher)));
                    //mCollapsingToolBar.setContentScrim(bitmapDrawable);
                }
            }
        });
    }
}

activity_main（布局还是稍微看一下，也可直接copy看效果）

<?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"
android:background="#ff7"
android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/style3_appbar"
        android:layout_width="match_parent"

        android:layout_height="250dp"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/style3_collapsing_toolbar_layout"
            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">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/text"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.3"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/style3_toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="20dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:id="@+id/title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:text="@string/app_name"
                        android:textSize="16sp"/>

                    <ImageView
                        android:id="@+id/iv_icon_right"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_gravity="end"
                        android:gravity="center_vertical"
                        android:src="@mipmap/ic_launcher_round"
                        android:visibility="visible"
                        tools:visibility="visible"/>
                </RelativeLayout>

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

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

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

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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="开"
                android:textColor="#0f0"
                android:textSize="200sp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="心"
                android:textColor="#0f0"
                android:textSize="200sp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="就"
                android:textColor="#0f0"
                android:textSize="200sp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="好"
                android:textColor="#0f0"
                android:textSize="200sp"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
问题解答

仅记录一些自己遇到的问题 ~

设置透明状态栏
//Copy在onCreate生命周期既可，设置透明状态栏
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
    }
隐藏Toolbar默认的返回键
 //传入toolbar同时设置为false
 setSupportActionBar(mToolBar);
 getSupportActionBar().setDisplayHomeAsUpEnabled(false);
取消Toolbar右侧的菜单键
通过Toolbar内嵌的布局实现，至少我是这样写的，相对自由，想怎么写怎么写~
  • 解决折叠中背景沉陷某一颜色，不显示折叠的图片（视觉效果感官）

最初联想（下面这段代码是同事提供的，我是通过这个想到了下面‘正解’的实现，关于此处可以忽略！！！）

 //通过Glide图片加载内的一个方法进行设置
 SimpleTarget<Drawable> collTtarget = new SimpleTarget<GlideD>() {
        @Override
       public void onResourceReady(Drawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                 mCollapsingToolBar.setContentScrim(resource);
             }
      };

正解：

 //为CollapsingToolBar随意设置一个bigmap对象
 BitmapDrawable bitmapDrawable = new BitmapDrawable(String.valueOf(ContextCompat.getDrawable(getContext(), R.mipmap.ic_banner_bg)));
 mCollapsingToolBar.setContentScrim(bitmapDrawable);

借鉴文章：

扩展文章：

远方那座山
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
单层RecyclerView实现点击展开、折叠效果
09-24
此demo可使用单层RecyclerView实现item的点击展开、折叠效果
Android基础:LinearLayout,RelativeLayout,GridLayout,CoordinatorLayout
Orange_sparkle的博客
02-13 138
几大视图的简单介绍。
赵雅智_名片夹（4）_Android中listview可折叠伸缩仿手风琴效果（静态）
柠檬不萌
07-23 5113
最近些一个名片夹得app。其中名片夹客户要求做成可折叠伸缩的效果，真是费了好大劲啊~~~啥都不说了看效果图吧~~ 首先姓名显示为listview效果，点击姓名像手风琴效果一样，显示余下的详细信息内容，当再次点击姓名的时候，余下详细内容便隐藏
Android进阶宝典 -- CoordinatorLayout协调者布局原理分析并实现吸顶效果
bugyinyin的博客
01-27 2492
首先我们先从源码中能够看到，CoordinatorLayout只实现了parent接口（**这里如果不清楚parent接口是干什么的，建议看看前面的文章，不然根本不清楚我讲的是什么**），说明CoordinatorLayout只能作为父容器来使用。
使用JAVA代码实现Android布局（一）RelativeLayout
Zdy的后花园
01-03 7810
通常我们使用XML来书写Android的图形界面，XML虽然编写方便，但是在某些情况下不如JAVA代码灵活，所以在某些环境下还是必须使用JAVA代码来编写界面。我们以下XML代码为例，编写相应的JAVA代码。 <RelativeLayout android:id="@+id/drawer_info" android:layout_width="match_par
Android 5.0中CoordinatorLayout的使用技巧
09-01
主要为大家详细介绍了Android 5.0中CoordinatorLayout的使用技巧,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android5.0 android-21 源码
03-10
android 5.0 也就是android-21的源码
Android5.0+ CollapsingToolbarLayout使用详解
09-01
主要为大家详细介绍了Android5.0+ CollapsingToolbarLayout使用，感兴趣的小伙伴们可以参考一下
Android5.0新特性详解之全新的动画
09-01
主要介绍了Android5.0新特性详解之全新的动画的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Android使用代码实现RelativeLayout，LinearLayout布局
热门推荐
luckyjda — —you can , I can . you can't , I can !
04-05 2万+
今天由于项目需要，学习了用代码动态来布局，下面参考一些代码现学了怎样布局。现在和大家分享一下： RelativeLayout rl = new RelativeLayout(this); Button btn1 = new Button(this); btn1.setText("----------------------"); btn1.setId(1)
【Android】底部弹出的DialogFragment，支持从右向左push二级页面，自带弹出时折叠动画
Blin
05-05 4966
前言 好久不见，今天来分享一个可能大家会用到的工具，然后打算持续集成开发优化，为大家做一个有人管理的第三方库，做到好用实用等等等等~哈哈哈，先看看效果图~ 简介 嗯~没错的，就是这个从底部弹出的DialogFragment，然后我叫它是BottomSheet，当然通过效果图也看出来了，不仅仅是能从底部向上弹出，还能将Activity整体缩放，实现一个凹下去的效果，当然动画效果后期可以
Android入门教程四十五之ExpandableListView(可折叠列表)的基本使用
无名
02-28 629
本节要讲解的Adapter类控件是ExpandableListView，就是可折叠的列表，它是ListView的子类， 在ListView的基础上它把应用中的列表项分为几组，每组里又可包含多个列表项。至于样子， 类似于QQ联系人列表，他的用法与ListView非常相似，只是ExpandableListVivew显示的列表项 需由ExpandableAdapter提供。 下面我们来学习这个控件的基本使
自定义可折叠和展开的View
谷哥的小弟
03-29 5828
CollapseView如下: package com.ww.collapseview; import android.annotation.SuppressLint; import android.content.Context; import android.text.TextUtils; import android.util.AttributeSet; import android.vi
android折叠展开自定义列表项测试
shareinfo2018
02-07 1597
public class MainActivity extends Activity { private List group; private List> child; private ExpandableListAdapter adapter; private TextView timeView,durView,delView; private ImageView image;
Android 可折叠式标题栏的实现
路宇的博客
09-19 1133
先看效果图： 一、实现步骤: 1、布局文件 <?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="
android实现自定义RelativeLayout可拖动、缩放、旋转TextView
roll圈圈的博客
01-09 6470
因最近公司项目需求，需要做出一个在一张背景图上添加文字，文字可编辑如修改颜色、样式、字体、背景添加气泡等，也可对文字的位置进行修改，实现拖动、旋转、缩放等功能，类似于美图秀秀中文字的添加，最后可将背景图和文字联合生成一张图片，保存到相册中，自网上也没有找到合适的代码以供参考，所以决定自己写一个自定义的控件实现以上的效果。             先贴上图看一下效果，那个键盘是用相机拍
java android 布局_Android使用Java代码动态实现RelativeLayout、LinearLayout布局
weixin_35032509的博客
02-18 311
一般情况下，我们一般都在布局xml文件中直接写页面的布局，但有时需要动态改变布局，这时就需要我们使用Java代码来实现了。改变布局主要是通过改变LayoutParams来实现的，LayoutParams继承于Android.View.ViewGroup.LayoutParams。它相当于一个Layout的信息包，封装了Layout的位置、高、宽等信息。需要注意的是，需要注意到要修改的View的父容...
Android开发之RelativeLayout
ShadyPi的IT笔记
03-11 1950
RelativeLayout，通过相对位置排布组件。
Android：展开/折叠动画
asdfgh0077的博客
01-28 1873
假设我有一个带有以下内容的垂直linearLayout： [v1] [v2] 默认情况下，v1的可见值= GONE。 我想用扩展动画显示v1并同时按下v2。 我尝试过这样的事情：
Write the following code using c #,Write a method with the following specifications: name: DisplayEquation arguments: none return value: nothing displays: the following table: x 5 3x -2x^2 y 0.0 5.0 0.0 0.0 5.0 0.3 5.0 0.8 -0.1 5.6 0.5 5.0 1.5 -0.5 6.0 0.8 5.0 2.3 -1.1 6.1 1.0 5.0 3.0 -2.0 6.0 1.3 5.0 3.8 -3.1 5.6 1.5 5.0 4.5 -4.5 5.0 1.8 5.0 5.3 -6.1 4.1 2.0 5.0 6.0 -8.0 3.0 This table is calculated using the quadratic equation y = 5 + 3x -2x2 The value of x starts at 0 and moves in increments of 0.25 to 2.0. (The first column is misleading because the last digit is rounded up i.e. 0.25 is displayed as 0.3and. 0.75 is displayed as 0.8) Modify your DisplayMenu method by adding another choice below the last item. In your main when the user enters the appropriate choice in response to the menu choices, you will invoke this method and to display the above values
最新发布
05-28
Here's the code for the DisplayEquation method in C#: ``` public void DisplayEquation() { Console.WriteLine("x 5 3x -2x^2 y"); double x = 0; while (x <= 2) { double y = 5 + 3 * x - 2 * x * x; Console.WriteLine($"{x,-5:F1} 5.0 {3*x,-4:F1} {(-2*x*x),-5:F1} {y,-5:F1}"); x += 0.25; } } ``` And in the main method, you can call the DisplayEquation method when the user selects the appropriate choice: ``` int choice = 0; while (choice != 3) { DisplayMenu(); choice = int.Parse(Console.ReadLine()); switch (choice) { case 1: // call other method break; case 2: DisplayEquation(); break; case 3: Console.WriteLine("Exiting program..."); break; default: Console.WriteLine("Invalid choice."); break; } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

远方那座山

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值