Android Material Design全面总结(CoordinatorLayout+AppBarLayoout+CollapsingToolbarLayout+自定义behavior)

系统的整理总结一下MD风格的控件以及使用:

包括:

Toolbar 、AppBarLayout 、CoordinatorLayout、 CollapsingToolbarLayout 、

自定义behavior 、DrawerLayout+NavigationView  、 CardView 、RecvclerView 、TabLayout和menu菜单

以及behavior 和 scrollFlags 等属性总结

可以说是总结md 风格的内容比较完整的一篇文章

先上第一张效果图:

代码实现：

需要的依赖：

    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:design:23.2.0'
    compile 'de.hdodenhof:circleimageview:2.2.0'
    compile 'com.android.support:cardview-v7:22.2.1'
    compile 'com.github.bumptech.glide:glide:3.7.0'
    compile 'com.google.code.gson:gson:2.2.4'
    compile 'com.squareup.okhttp3:okhttp:3.4.1'

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!--一个加强版FrameLayout 可一件挺所有子控件的各种事件-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <!--AppBarLayout对子view进行嵌套
        因为下面rv添加app:layout_behavior属性,
        support library包含了一个特殊的字符串资源@string/appbar_scrolling_view_behavior，
        它的值为android.support.design.widget.AppBarLayout$ScrollingViewBehavior ，
        指向AppBarLayout.ScrollingViewBehavior，用来通知AppBarLayout 这个特殊的view何时发生了滚动事件，
        这个behavior需要设置在触发滚动事件的view之上。
        另外，ScrollingViewBehavior除了能处理滚动行为，
        还能使设置了app:layout_behavior="@string/appbar_scrolling_view_behavior"的view显示在AppBarLayout的下面。
        而不是叠加在AppBarLayout上。
        当CoordinatorLayout发现RecyclerView中定义了这个属性，
        它会搜索自己所包含的其他view，看看是否有view与这个behavior相关联。
        AppBarLayout.ScrollingViewBehavior描述了RecyclerView与AppBarLayout之间的依赖关系。
        RecyclerView的任意滚动事件都将触发AppBarLayout或者AppBarLayout里面view的改变。
        AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性，就可以在RecyclerView滚动事件发生的时候被触发：-->
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true">

            <!--CollapsingToolbarLayout继承帧布局
            可折叠的父布局状态栏
            layout_scrollFlags:设置滚动事件,srcoll这个属性view才会滚处于屏幕,否则会一直固定在顶部,如果滑动一部分再保留
            加上exitUntilCollapsed
            contentScrim:折叠完成后bar的颜色
            theme:是为了让toolbar上的menu菜单显示亮色主题
             -->
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:contentScrim="@color/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <!--parallax 让图片产生一定偏移-->
                <ImageView
                    android:fitsSystemWindows="true"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/background"
                    app:layout_collapseMode="parallax" />

                <!--pin属性保证toolbar在父布局折叠时一直固定-->
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin" />
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

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

        <!--包名.类调用 给fab设置了自定义behavior效果 随着列表的滚动消失和出现-->
        <android.support.design.widget.FloatingActionButton
            app:layout_behavior="com.example.dl.materialdesigndemo.behavior.FooterBehavior"
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="15dp"
            android:elevation="8dp"
            android:src="@mipmap/ic_launcher" />
    </android.support.design.widget.CoordinatorLayout>

    <!--设置了头布局和下面的menu列表-->
    <android.support.design.widget.NavigationView
        android:fitsSystemWindows="true"
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu"/>
</android.support.v4.widget.DrawerLayout>

RecyclerView行布局和适配器

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#e1e0e0"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.v7.widget.CardView
    android:layout_margin="5dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="8dp"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:scaleType="centerCrop"
        android:id="@+id/item_iv"
        android:layout_width="120dp"
        android:layout_height="180dp" />
</android.support.v7.widget.CardView>
</RelativeLayout>

适配器:

public class RvAdapter extends RecyclerView.Adapter<RvAdapter.ViewHolder>{

    private List<PiceBean.ResultsBean> datas = new ArrayList<>();
    private Context context;

    public RvAdapter(Context context) {
        this.context = context;
    }

    public void setDatas(List<PiceBean.ResultsBean> datas) {
        this.datas = datas;
        notifyDataSetChanged();
    }

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

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.item_iv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(context,SecondAcitivity.class);
                context.startActivity(intent);
            }
        });
        Glide.with(context).load(datas.get(position).getUrl()).into(holder.item_iv);
    }

    @Override
    public int getItemCount() {
        if (datas!= null){
            return datas.size();
        }
        return 0;
    }

    class ViewHolder extends RecyclerView.ViewHolder{
        ImageView item_iv;
        public ViewHolder(View itemView) {
            super(itemView);
            item_iv = itemView.findViewById(R.id.item_iv);
        }
    }
}

activity中核心代码：

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private DrawerLayout drawlayout;
    private NavigationView navigationView;
    private RecyclerView rv;
    private RvAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //5.0系统才能将状态栏设置成透明
        if (Build.VERSION.SDK_INT>=21){
            View decorView = getWindow().getDecorView();
            decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
            |View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        }
        setContentView(R.layout.activity_main);
        initView();
        initData();
    }

    //复写该方法导入menu菜单布局
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.maintoolbar, menu);
        return true;
    }

    //复写该方法menu点击监听
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.backup:
                Toast.makeText(this, "backup", Toast.LENGTH_SHORT).show();
                break;
            case R.id.deltet:
                Toast.makeText(this, "delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();
                break;
            case android.R.id.home:
                //左上角菜单键,打开侧滑菜单
                drawlayout.openDrawer(GravityCompat.START);
                break;
        }
        return true;
    }

    private void initView() {
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        //设置toolbar
        setSupportActionBar(toolbar);
        drawlayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        navigationView = (NavigationView) findViewById(R.id.nav_view);

        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            //是左上角按键出现
            actionBar.setDisplayHomeAsUpEnabled(true);
            //给左上角按键设置图片
            actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer_home);
        }
        //侧滑菜单点击监听
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.nav_call:
                        Toast.makeText(MainActivity.this, "打电话", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_friend:
                        Toast.makeText(MainActivity.this, "找朋友", Toast.LENGTH_SHORT).show();
                        break;
                }
                drawlayout.closeDrawers();
                return true;
            }
        });

        rv = (RecyclerView) findViewById(R.id.recycle);
    }
    private void initData() {
        adapter = new RvAdapter(this);
        final GridLayoutManager manager = new GridLayoutManager(this, 3);
        OkHttpClient client = new OkHttpClient();
        Request request = new Request.Builder().url("http://gank.io/api/data/%E7%A6%8F%E5%88%A9/50/1")
                .build();
        client.newCall(request).enqueue(new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {

            }

            @Override
            public void onResponse(Call call, final Response response) throws IOException {

                final String responeseStr = response.body().string();

                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Gson gson = new Gson();
                        PiceBean bean = gson.fromJson(responeseStr, PiceBean.class);
                        adapter.setDatas(bean.getResults());
                        rv.setLayoutManager(manager);
                        rv.setAdapter(adapter);
                    }
                });
            }
        });

    }
}

menu 菜单

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <!--always总是显示该item-->
<item
    android:id="@+id/backup"
    android:icon="@drawable/backup"
    android:title="Backup"
    app:showAsAction="always"/>
    <!--ifRoom如果toolbar控件足够则显示-->
    <item
        android:id="@+id/deltet"
        android:icon="@drawable/delete"
        android:title="Deltet"
        app:showAsAction="ifRoom"/>
    <!--never不显示item,会在右上角出现三个点图标里-->
    <item
        android:id="@+id/settings"
        android:icon="@mipmap/ic_launcher"
        android:title="Settings"
        app:showAsAction="never"/>
</menu>

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <!--让这些menu成为一个组 single属性表示可以单选-->
<group android:checkableBehavior="single">

    <item
        android:id="@+id/nav_call"
        android:icon="@mipmap/ic_launcher"
        android:title="Call"/>
    <item
        android:id="@+id/nav_friend"
        android:icon="@mipmap/ic_launcher"
        android:title="Friend"/>
    <item
        android:id="@+id/nav_location"
        android:icon="@mipmap/ic_launcher"
        android:title="Location"/>
    <item
        android:id="@+id/nav_mail"
        android:icon="@mipmap/ic_launcher"
        android:title="Mail"/>
    <item
        android:id="@+id/nav_task"
        android:icon="@mipmap/ic_launcher"
        android:title="Task"/>
</group>
</menu>

最后是自定义behavior !

public class FooterBehavior extends CoordinatorLayout.Behavior {
    private int directionChange;

    public FooterBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    
    //返回我们需要关心的类,因为我们要关心AppBarLayout的滑动
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof AppBarLayout;
    }

    //fab 跟随关心的类变化对我们设置Behavior的View进行一系列处理
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        float translationY = Math.abs(dependency.getY());
        child.setTranslationY(translationY);
        return true;
    }
}

到目前第一个效果图解释的很清楚了

下面大同小异会减少注释

第二张效果图:

把tablayout放入appbarlayout 并给tablayout一个behavior不滑动出屏幕

CollapsingToolbarLayout不设置contentScrim属性,那么折叠后显示子布局图片

<?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/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="8"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:fitsSystemWindows="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/b"
                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" />
        </android.support.design.widget.CollapsingToolbarLayout>
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Tablayout与ViewPager联动

TabLayout tablayout = (TabLayout) findViewById(R.id.tablayout);
tablayout.setupWithViewPager(vp);