Android Material Design學習之五CollapsingToolbarLayout
阿新 • • 發佈：2019-01-27
來看看這個神奇的控制元件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的idActivity的佈局檔案
<?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>