安卓Design包之CollapsingToolbarLayout(可摺疊的工具列布局)的簡單使用

標籤：

轉自:

CollapsingToolbarLayout的使用

注意:使用前需要添加Design依賴包,使用toolbar時需要隱藏標題頭

CollapsingToolbarLayout作用是提供了一個可以摺疊的Toolbar，它繼承至FrameLayout，給它設定layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控制項(如：ImageView、Toolbar)在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除螢幕或固定在螢幕頂端)。

NestedScrollView:它是support-v4包提供的控制項,繼承至FrameLayout, 並實現了NestedScrollingParent,NestedScrollingChild, ScrollingView介面. 

它的作用類似於Android.widget.ScrollView,不同點在於NestedScrollView支援嵌套滑動.

需實現的布局:

 最外層是CoorinatorLayout,然后里麵包含了AppBarlayout和NestedScrollView

AppBarLayout裡包含了CollspsingToolbar和Tableyout,它的作用是可以將所有的子控制項都當成一個整體

CollspsingToolbar裡面則包含了一個ImageView和ToolBar作為伸縮的地區

通過layout_collapseMode屬性來指定其內部的子控制項是摺疊還是固定在螢幕上方

 <!-- layout_collapseMode(摺疊模式)-有兩個值:                 1.parallax:在內容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，                 實現視差滾動效果，通常和layout_collapseParallaxMultiplier(設定視差因子)搭配使用。                 2.pin - 當CollapsingToolbarLayout完全收縮後，Toolbar還可以固定在螢幕上。          -->

xml檔案:

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout 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"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:orientation="vertical"    tools:context="fanggao.qf.collapsingtoolbarlayout.MainActivity">   <!-- android:fitsSystemWindow = "true" 表示整個布局展示是整個螢幕出去狀態列,標題列和導覽列剩下的地區-->    <android.support.design.widget.AppBarLayout        android:id="@+id/layout_appbar"        android:layout_width="match_parent"        android:layout_height = "wrap_content"       >        <!--         app:expandedTitleMarginStart="10dp"        設定擴張時候(還沒有收縮時)title離螢幕左邊的距離         app:contentScrim="?attr/colorPrimary"        設定當完全CollapsingToolbarLayout摺疊(收縮)後的背景顏色        -->        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/ctb"            android:layout_width="match_parent"            android:layout_height="250dp"            android:fitsSystemWindows="true"            app:contentScrim="?attr/colorPrimary"            app:expandedTitleMarginStart="10dp"            app:layout_scrollFlags="scroll|exitUntilCollapsed">               <ImageView            android:id="@+id/image"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:scaleType="centerCrop"            app:layout_collapseMode="parallax"            android:src = "@drawable/cat"            />        <!--標題-->        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="30dp"            app:layout_collapseMode="pin"            app:title="Toolbar"/>        </android.support.design.widget.CollapsingToolbarLayout>        <!--選項卡-->        <android.support.design.widget.TabLayout            android:id="@+id/tabLayout"            android:layout_width="match_parent"            android:layout_height="wrap_content"            app:tabIndicatorColor="@color/colorAccent"            app:tabMode="scrollable"            app:tabSelectedTextColor="@color/colorAccent"            app:tabTextColor="@android:color/black"/>    </android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView        android:id="@+id/nestedScrollView"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:fillViewport="true"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <android.support.v4.view.ViewPager            android:id="@+id/viewPager"            android:layout_width="match_parent"            android:layout_height="wrap_content"/>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

主程式:

public class MainActivity extends AppCompatActivity {    private Toolbar toolbar;    private ImageView image;    private ViewPager viewpager;    private TabLayout tabLayout;    private CollapsingToolbarLayout collapsingToolbarLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        initData();    }    private void initData() {        toolbar.setLogo(R.mipmap.ic_launcher);        setSupportActionBar(toolbar);        //設定返回按鈕        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        //設定收縮展開toolbar字型顏色        collapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);        collapsingToolbarLayout.setCollapsedTitleTextColor(Color.BLACK);        //設定tablayout與viewPager        viewpager.setAdapter(new TestViewPageAdapter());        tabLayout.setupWithViewPager(viewpager);    }    private void initView() {        toolbar = (Toolbar) findViewById(R.id.toolbar);        image = (ImageView) findViewById(R.id.image);        viewpager = (ViewPager) findViewById(R.id.viewPager);       tabLayout = (TabLayout) findViewById(R.id.tabLayout);       collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.ctb);    }    class TestViewPageAdapter extends PagerAdapter{        @Override        public Object instantiateItem(ViewGroup container, int position) {            TextView textView = new TextView(MainActivity.this);            textView.setGravity(Gravity.CENTER);            textView.setText("pager "+(position+1));            textView.setTextSize(30);            textView.setTextColor(Color.BLUE);            container.addView(textView);            return textView;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View)object);        }        @Override        public int getCount() {            return 5;        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;        }/*獲得標題*/        /*該方法必須寫,不然tablayout不能顯示標題*/        @Override        public CharSequence getPageTitle(int position) {            return "TAB"+(position+1);        }    }}

效果:

滑動前

向下滑動後:

 

安卓Design包之CollapsingToolbarLayout(可摺疊的工具列布局)的簡單使用