Android Material Design学习之五CollapsingToolbarLayout

来看看这个神奇的控件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的布局文件

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 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 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的布局文件

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 {

    private List data;
    private LayoutInflater inflater;

    public MyRecyclerAdapter(Context context, List 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 data;

    public MyPagerAdapter(FragmentManager fm, List 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布局文件

CollapsingToolbarLayout就介绍到这里，晚安！