Android Material Design学习之五CollapsingToolbarLayout

最新推荐文章于 2021-05-26 05:23:41 发布

Amor丶

最新推荐文章于 2021-05-26 05:23:41 发布

阅读量2.1k

点赞数 1

分类专栏： Android 文章标签： CoordinatorLayout AppBarLayout CollapsingToolbarLay CardView android

本文链接：https://blog.csdn.net/fxDes/article/details/50768633

版权

Android 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

来看看这个神奇的控件CollapsingToolbarLayout。先上效果图

再来看看官方的API文档是怎么描述这个控件的。

CollapsingToolbarLayout是一个Toolbar的包装器，实现了一个可以进行折叠的app导航栏。它被设计成了AppBarLayout的一个直接子控件。CollapsingToolbarLayout包括一下特性：

当布局文件是完全可视的时候，title是很大的。但是当布局开始在屏幕上进行滚动的时候，它将会开始进行折叠变小。你可以通过setTitle(CharSequence)方法设置需要展示的title。同样可以通过collapsedTextAppearance和expandedTextAppearance属性来对title的显示进行调整。

当CollapsingToolbarLayout完全折叠的时候显示的背景。你可以通过setContentScrim(Drawable)来改变它。

当CollapsingToolbarLayout完全折叠的时候状态栏显示的背景。你可以通过setStatusBarScrim(Drawable)方法来改变它。这只能够在Android版本在LOLLIPOP（5.0）版本之上的系统才有效果。

滚动视差

子控件可以选择在这个布局上的视差效果。参考COLLAPSE_MODE_PARALLAX和setParallaxMultiplier(float)。

固定位置

子控件可以选择当CollapsingToolbarLayout完全折叠的时候固定在顶部，这对于Toolbar来说是非常有用的。参考COLLAPSE_MODE_PIN。

属性和方法详解

xml属性：collapsedTitleGravity
java方法：setCollapsedTitleGravity(int);
//可以指定CollapsingToolbarLayout完全折叠后title的显示位置

xml属性：collapsedTitleTextAppearance
java方法：setCollapsedTitleTextAppearance(int);
//设置当CollapsingToolbarLayout完全折叠后title的外观样式

xml属性：app:contentScrim
java方法：setContentScrim(Drawable);
//设置当CollapsingToolbarLayout完全折叠后的背景

xml属性：app:expandedTitleGravity
java方法：setExpandedTitleGravity(int);
//设置当CollapsingToolbarLayout完全展开时的title显示位置

xml属性：app:expandedTitleMargin
//设置CollapsingToolbarLayout展开时的margin值

xml属性：appL:expandedTitleMarginBottom
xml属性：app:expandedTitleMarginEnd
xml属性：app:expandedTitleMarginStart

xml属性：app:expandedTitleTextAppearance
java方法：setExpandedTitleTextAppearance(int)
//设置CollapsingToolbarLayout完全扩张时title的外观样式

xml属性：app:statusBarScrim
java方法：setStatusBarScrim(int)
//设置当CollapsingToolbarLayout完全折叠后的状态栏的背景，只对Android Lollipop（5.0）版本和以上版本有效果

xml属性：app:title
java方法：setTitle(CharSequence);
//设置需要显示的title，如果要显示title，不能设置给Toolbar，如果这样做title是显示不出来的


xml属性：app:titleEnable
java方法：setTitleEnable(boolean);
//设置成false时title不显示

xml属性：app:toolbarld//设置Toolbar的id

Activity的布局文件

<?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"
    tools:context=".activity.MainActivity">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="256dp"
            app:collapsedTitleGravity="left"
            app:collapsedTitleTextAppearance="@style/CollapsedTextStyle"
            app:contentScrim="#b7cbd2"
            app:expandedTitleGravity="left"
            app:expandedTitleTextAppearance="@style/ExpandedTextStyle"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlwaysCollapsed"
            app:statusBarScrim="#b7cbd2"
            app:title="CollapsingToolbarLayout">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@mipmap/img"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/back" />

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

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

        <android.support.design.widget.TabLayout
            android:id="@+id/layout_tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#669cd9"
            app:tabSelectedTextColor="#669cd9" />
    </android.support.design.widget.AppBarLayout>

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

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

Activity的代码

package com.destiny.collapsingtoolbarlayout.activity;

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 com.destiny.collapsingtoolbarlayout.R;
import com.destiny.collapsingtoolbarlayout.adapter.MyPagerAdapter;
import com.destiny.collapsingtoolbarlayout.fragment.TabFragment;

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

public class MainActivity extends AppCompatActivity {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;

    private MyPagerAdapter pagerAdapter;
    private List<Fragment> fragments;

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

        initView();
    }

    private void initView() {
        mTabLayout = (TabLayout) findViewById(R.id.layout_tab);
        mViewPager = (ViewPager) findViewById(R.id.pager_view);

        mTabLayout.addTab(mTabLayout.newTab().setText("A"));
        mTabLayout.addTab(mTabLayout.newTab().setText("B"));
        mTabLayout.addTab(mTabLayout.newTab().setText("C"));

        mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
        mTabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));

        fragments = new ArrayList<>();
        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            fragments.add(TabFragment.newInstance());
        }

        pagerAdapter = new MyPagerAdapter(getSupportFragmentManager(), fragments);
        mViewPager.setAdapter(pagerAdapter);
    }
}

Fragment的代码

package com.destiny.collapsingtoolbarlayout.fragment;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.destiny.collapsingtoolbarlayout.R;
import com.destiny.collapsingtoolbarlayout.adapter.MyRecyclerAdapter;

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

public class TabFragment extends Fragment {

    private RecyclerView mRecyclerView;

    private MyRecyclerAdapter adapter;
    private List<String> data;

    public static TabFragment newInstance() {
        Bundle args = new Bundle();
        TabFragment fragment = new TabFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_tab, container, false);
        mRecyclerView = (RecyclerView) rootView.findViewById(R.id.recycler_view);

        data = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            data.add("第" + i + "个CardView");
        }
        adapter = new MyRecyclerAdapter(getActivity(), data);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity(), LinearLayoutManager.VERTICAL, false));
        mRecyclerView.setAdapter(adapter);
        return rootView;
    }

}

Fragment的布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.destiny.collapsingtoolbarlayout.fragment.TabFragment">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none" />

</LinearLayout>

RecyclerView的适配器代码

package com.destiny.collapsingtoolbarlayout.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.destiny.collapsingtoolbarlayout.R;

import java.util.List;

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

    private List<String> data;
    private LayoutInflater inflater;

    public MyRecyclerAdapter(Context context, List<String> data) {
        inflater = LayoutInflater.from(context);
        this.data = data;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(inflater.inflate(R.layout.item_recycler, parent, false));
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.mTextView.setText(data.get(position));
    }

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

    class ViewHolder extends RecyclerView.ViewHolder {

        TextView mTextView;

        public ViewHolder(View itemView) {
            super(itemView);
            mTextView = (TextView) itemView.findViewById(R.id.txt);
        }
    }
}

ViewPager的适配器代码

package com.destiny.collapsingtoolbarlayout.adapter;

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

import java.util.List;

public class MyPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> data;

    public MyPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.data = fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return data == null ? null : data.get(position);
    }

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

RecyclerView的Item布局文件

<?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="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp"
        app:cardBackgroundColor="#ffffff"
        app:cardCornerRadius="5dp"
        app:cardElevation="2sp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true">

        <TextView
            android:id="@+id/txt"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:gravity="center"
            android:textSize="20sp" />

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

</LinearLayout>

CollapsingToolbarLayout就介绍到这里，晚安！