在新的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 screenenterAlways
: this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ patternenterAlwaysCollapsed
: 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