我正在尝试实现以下效果(另见下图):
- 应用程序打开时会显示部分可见的 View ( map )和位于默认 anchor (中心图像)的
RecyclerView
- 用户向上滚动
RecyclerView
, map 折叠,列表继续滚动(右图) - 用户向下滚动
RecyclerView
, map 扩展到最大点(注意列表不应该完全滑出屏幕,而是滑到某个 anchor )(左图)
最佳答案
要创建它,我们需要 1 个 Activity
和 3 个 Fragment
。
Activity
将承载一个 TabLayout
和一个 ViewPager
,如下所示:
<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="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
由于我们只需要为第一个 Fragment
执行滑动行为,因此第一个 Fragment
获得如下 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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="400dp"
android:orientation="vertical"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.gms.maps.MapView
android:id="@+id/mapView"
app:layout_collapseMode="parallax"
android:layout_height="400dp"
android:layout_width="match_parent" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
您可以制作其他 Fragment
,但是您喜欢我只是在其他 Fragment
中创建了假数据和一个简单的 RecyclerView
。
然后在您的Activity
和Fragment
中调用这些 View ,如下所示:
Activity
public class MainActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
private SampleViewPagerAdapter mViewPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.another_activity);
mTabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mViewPagerAdapter = new SampleViewPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mViewPagerAdapter);
mTabLayout.setupWithViewPager(mViewPager);
}
}
ViewPager 适配器
public class SampleViewPagerAdapter extends FragmentPagerAdapter {
public SampleViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new MapFragment();
case 1:
return new ScrollFragment();
case 2:
return new ScrollFragment();
default:
return new ScrollFragment();
}
}
@Override
public int getCount() {
return 3;
}
@Override
public CharSequence getPageTitle(int position) {
String[] tabNames = {"Stops", "Planner", "Alerts"};
return tabNames[position];
}
}
带有滑动 RecyclerView 的 map fragment
public class MapFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View root = inflater.inflate(R.layout.activity_main, null);
initCollapsingToolbar(root);
// Initialize map
initFragment();
return root;
}
private void initCollapsingToolbar(View root) {
CollapsingToolbarLayout collapsingToolbarLayout =
(CollapsingToolbarLayout) root.findViewById(R.id.collapsingToolbar);
collapsingToolbarLayout.setContentScrimColor(getResources().getColor(R.color.cyan_500));
}
private void initFragment() {
FakeDataFragment fragment = new FakeDataFragment();
getChildFragmentManager().beginTransaction()
.replace(R.id.content, scrollFragment)
.commit();
}
}
那么你应该得到这样的东西:
设置位置:
您可以使用以下代码以编程方式折叠工具栏 (CollapsingToolbarLayout
):
public void collapseToolbar(){
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mFrameLayout.getLayoutParams();
AppBarLayout.ScrollingViewBehavior behavior = (AppBarLayout.ScrollingViewBehavior) params.getBehavior();
if (behavior != null) {
behavior.onNestedFling(rootLayout, appbarLayout, null, 0, 10000, true);
}
}
这意味着当用户第一次看到 map 时, map 会部分折叠到您的默认状态。
关于android - 与滑动 RecyclerView 协调的折叠/展开 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32164081/