Android AppBarLayout(design)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/LIXIAONA_1101/article/details/84643079

design:全称 material design 材料设计
2014年谷歌大会上推出

我们在使用app的时候会发现有这样的一个折叠拉伸效果:

当向上滑动的时候“易烊千玺”的标题逐渐变小,最终图片消失不见,剩下一个toolbar,FloatingActionButton也跟着消失

那么如何实现这么一个效果那,这就用到了我们的:CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout,其实这就是我们的UI布局

如何实现??

先来给大家看一个整体思维导图:

可能大部分人没有太明白这张图,毕竟的写的有些飘逸,那我来给大家讲解一下:

第一层:跟布局一定要是CoordinatorLayout

第二层:AppBarLayout+recyclerview(注意一定要是recyclerview,listview是没有办法实现这样的一个效果的)   

第三层:CollapsingToolbarLayout实现一个折叠的效果

第四层:放置一个imageview+toolbar即可实现

不要忘记了还有一个floatingActionButton也就是小爱心的实现

整个demo:

MainActivity类:

package com.example.design;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
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.View;
import android.widget.Toast;

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

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    /*
    design:全称 material design 材料设计
    2014年谷歌大会上推出
    */
    private List<String> stringList = new ArrayList<>();
    private Toolbar toobar;
    private RecyclerView recyclerview;
    private FloatingActionButton flatingactionbutton;

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

        setSupportActionBar(toobar);

        myRecyclerview myRecyclerview = new myRecyclerview(this, stringList);
        recyclerview.setAdapter(myRecyclerview);

    }


    private void initView() {


        for (int i = 0; i < 50; i++) {
            stringList.add(i + "item");
        }

        toobar = (Toolbar) findViewById(R.id.toobar);
        recyclerview = (RecyclerView) findViewById(R.id.recyclerview);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        recyclerview.setLayoutManager(linearLayoutManager);
        flatingactionbutton = (FloatingActionButton) findViewById(R.id.flatingactionbutton);
        flatingactionbutton.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.flatingactionbutton:

                Snackbar.make(flatingactionbutton,"爱你",Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

activity_main布局:(重点

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

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

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/coll"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:contentScrim="@color/colorAccent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:fitsSystemWindows="true"
                >

                <!--CollapsingToolbarLayout折叠完成之后就是一个普通Toolbar
                app:contentScrim="?attr/colorPrimary":用于指定CollapsingToolbarLayout在趋于折叠状态以及折叠之后的背景色
                app:layout_scrollFlags="scroll|exitUntilCollapsed"中的属性exitUntilCollapsed表示的是
                当CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上,不会移除屏幕
                -->

                <ImageView
                    android:scaleType="centerCrop"
                    android:src="@drawable/qx4"
                    android:layout_width="match_parent"
                    app:layout_collapseMode="parallax"
                    android:layout_height="200dp" />
                <!-- app:layout_collapseMode="parallax"表示在折叠的过程中会产生一定的错位偏移-->

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toobar"
                    app:title="易烊千玺"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                    app:layout_collapseMode="pin">

                    <!--app:layout_collapseMode="pin"表示在折叠的过程中始终保持不变-->
                </android.support.v7.widget.Toolbar>

                <!--  app:layout_scrollFlags="scroll|enterAlways|snap"  -->
                <!--scroll表示当下面的listview向上滑动的时候toobar会跟着一块向上滑 隐藏-->
                <!--snap表示当toobar滑动的时候会根据滑动的距离来设置toobar隐藏的距离-->
                <!--enterAlways表示当listview向下拉的时候toobar会重新显示-->
                <!--layout_scrollFlags这个属性用于响应layout_behavior返回過來的响应-->

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

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

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

        <!--layout_behaviory表示布局的行为 会传递给appbarlayout-->

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/flatingactionbutton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15dp"
            android:src="@drawable/xx"
            app:elevation="10dp"
            app:pressedTranslationZ="16dp"
            app:layout_anchor="@id/appbar"
            app:layout_anchorGravity="bottom|end"
            />


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


</android.support.constraint.ConstraintLayout>

一定要看注释(精髓),我就懒得再写一遍了

好了,到此就结束了。

展开阅读全文

没有更多推荐了,返回首页