Android CoordinatorLayout + AppBarLayout+ToolBar(向上滾動隐藏指定的View)

在新的Android Support Library裡面,新增了CoordinatorLayout, AppBarLayout等.

實作的效果: 向下滾動RecylerView,Tab會被隐藏,向上滾動RecylerView,Tab恢複出現.這麼做的好處在于,使用者能有更多的空間位置去看清單裡面的内容.

效果如下：

實作步驟:

1) 首先需要用CoordinatorLayout包住AppBarLayout;

2) 頂部區域的View都放在AppBarLayout裡面;

3) AppBarLayout外面,CoordinatorLayout裡面,放一個帶有可滾動的View.如上的例子,放的是ViewPager,而ViewPager裡面是放了RecylerView的,即是可以滾動的View.

4) 在AppBarLayout裡面的View,通過app:layout_scrollFlags屬性來控制,滾動時候的表現.其中有4種Flag的類型.

• scroll

  : this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen

• enterAlways

  : this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern

• enterAlwaysCollapsed

  : When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached it’s top.

• exitUntilCollapsed

  : this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting

    上面的例子種用的是 scroll 和 enterAlways.

    Scroll 表示向下滾動時,這個View會被滾出螢幕範圍直到隐藏.

    enterAlways 表示向上滾動時,這個View會随着滾動手勢出現,直到恢複原來的位置.

5) 在可以滾動的View上設定屬性 app:layout_behavior.

    該屬性的值實際上是一個完整的class名字,而上面例子中的 @string/appbar_scrolling_view_behavior 是Android Support Library 定義後的值,可以被直接使用.

    這個Behavior的class是真正控制滾動時候View的滾動行為.我們也可以繼承Behavior這個class去實作特有的滾動行為.

6) 代碼部分,隻需要實作RecylerView的邏輯就可以了.

布局檔案：activity_main.xml

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#30469b"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#30469b"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabSelectedTextColor="#ff0000"
            app:tabTextColor="#ffffff" />
    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:scrollbars="none"
        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="match_parent" />
    </LinearLayout>

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

MainActivity.java:

package com.hdc.appbarlayout;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

import com.hdc.appbarlayout.fragment.FragmentOne;
import com.hdc.appbarlayout.fragment.FragmentThree;
import com.hdc.appbarlayout.fragment.FragmentTwo;


public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolBar);
        mToolbar.setTitleTextColor(Color.WHITE);//設定ToolBar的titl顔色
        setSupportActionBar(mToolbar);

        ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);
        MyViewPagerAdapter viewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager());
        viewPagerAdapter.addFragment(FragmentOne.newInstance(), "TabOne");//添加Fragment
        viewPagerAdapter.addFragment(FragmentTwo.newInstance(), "TabTwo");
        viewPagerAdapter.addFragment(FragmentThree.newInstance(), "TabThree");
        mViewPager.setAdapter(viewPagerAdapter);//設定擴充卡

        TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        mTabLayout.addTab(mTabLayout.newTab().setText("TabOne"));//給TabLayout添加Tab
        mTabLayout.addTab(mTabLayout.newTab().setText("TabTwo"));
        mTabLayout.addTab(mTabLayout.newTab().setText("TabThree"));
        mTabLayout.setupWithViewPager(mViewPager);//給TabLayout設定關聯ViewPager，如果設定了ViewPager，那麼ViewPagerAdapter中的getPageTitle()方法傳回的就是Tab上的标題
    }
}
           

如需源碼，點選這裡。。

相關例子：

http://blog.csdn.net/xyz_lmn/article/details/48055919