来看看这个神奇的控件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>
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就介绍到这里,晚安!