如何创建类似于 Play 报亭布局的内容
How to create something similar to Play Newsstand layout
我正在尝试“重新创建”(类似于)Play 报亭布局。根据文档,CoordinatorLayout 的一般结构是
<CoordinatorLayout>
<!— view that shrinks —>
<AppBarLayout>
<CollapsingToolbarLayout>
…
</CollapsingToolbarLayout>
</AppBarLayout>
<!— view that scrolls —>
<SomeScrollView >
….
</SomeScrollView>
</CoordinatorLayout>
除了当我查看 Newsstand 应用程序时,我能看到的是 SomeScrollView
实际上是用于 TabLayout 的 ViewPager。对于我的特殊情况,我的主要问题是我的 SomeScrollView
必须是某种片段容器。所以基本上我想要的是
-------
| A |
| |
-------
| B |
| |
-------
其中 A 是可折叠部分,B 是滚动部分。同样,对于我的情况 B 是动态片段的容器。因此 A 将有一个 TabLayout,当用户单击选项卡时,它会导致 B 中的可见片段发生变化。 B 中的片段将包含 RecycleView 或可滚动的 TextView。 (其实其中一个Fragment是一个FrameLayout,它同时包含了一个RecycleView和一个TextView,一次可见其中一个)
到目前为止,这是我的代码:
<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=".MainActivity">
<!-- collapsing view -->
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
…
/>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags=“…”
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- scrolling view -->
<android.support.v4.view.ViewPager
android:id="@+id/main_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.v4.view.ViewPager>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ic_add"
android:layout_margin="@dimen/minor_horizontal_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
有人能帮我完成吗?
这个 Observable ScrollView 似乎与您正在寻找的东西类似:https://github.com/ksoichiro/Android-ObservableScrollView
iPaulPro 的 This project 应该可以满足您的需求。
要使此行为正常工作,您的片段必须使用 RecyclerView
或 NestedScrollView
。
顺便说一句,它不是图书馆。
现在,这个library 可以完全复制 Play Newstand 布局。
它非常易于使用并且具有巨大的自定义范围。我知道您不愿意使用这样的库,但这可以让事情变得如此简单。
只需添加这个,
compile ('com.github.florent37:materialviewpager:1.0.7@aar'){
transitive = true
}
并在XML、
中添加布局
<com.github.florent37.materialviewpager.MaterialViewPager
android:id="@+id/materialViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:viewpager_logo="@layout/header_logo"
app:viewpager_logoMarginTop="100dp"
app:viewpager_color="@color/colorPrimary"
app:viewpager_headerHeight="200dp"
app:viewpager_headerAlpha="1.0"
app:viewpager_hideLogoWithFade="false"
app:viewpager_hideToolbarAndTitle="true"
app:viewpager_enableToolbarElevation="true"
app:viewpager_parallaxHeaderFactor="1.5"
app:viewpager_headerAdditionalHeight="20dp"
app:viewpager_displayToolbarWhenSwipe="true"
app:viewpager_transparentToolbar="true"
app:viewpager_animatedHeaderImage="true"
/>
并遵循图书馆页面上的自定义指南。现在,如果您仍然不确定要使用它,您仍然可以转到它并检查库是如何构建的。它可以让您对自己创建它有足够的洞察力(但会很耗时)
希望对您有所帮助。
我正在尝试“重新创建”(类似于)Play 报亭布局。根据文档,CoordinatorLayout 的一般结构是
<CoordinatorLayout>
<!— view that shrinks —>
<AppBarLayout>
<CollapsingToolbarLayout>
…
</CollapsingToolbarLayout>
</AppBarLayout>
<!— view that scrolls —>
<SomeScrollView >
….
</SomeScrollView>
</CoordinatorLayout>
除了当我查看 Newsstand 应用程序时,我能看到的是 SomeScrollView
实际上是用于 TabLayout 的 ViewPager。对于我的特殊情况,我的主要问题是我的 SomeScrollView
必须是某种片段容器。所以基本上我想要的是
-------
| A |
| |
-------
| B |
| |
-------
其中 A 是可折叠部分,B 是滚动部分。同样,对于我的情况 B 是动态片段的容器。因此 A 将有一个 TabLayout,当用户单击选项卡时,它会导致 B 中的可见片段发生变化。 B 中的片段将包含 RecycleView 或可滚动的 TextView。 (其实其中一个Fragment是一个FrameLayout,它同时包含了一个RecycleView和一个TextView,一次可见其中一个)
到目前为止,这是我的代码:
<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=".MainActivity">
<!-- collapsing view -->
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
…
/>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags=“…”
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- scrolling view -->
<android.support.v4.view.ViewPager
android:id="@+id/main_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.v4.view.ViewPager>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ic_add"
android:layout_margin="@dimen/minor_horizontal_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
有人能帮我完成吗?
这个 Observable ScrollView 似乎与您正在寻找的东西类似:https://github.com/ksoichiro/Android-ObservableScrollView
This project 应该可以满足您的需求。
要使此行为正常工作,您的片段必须使用 RecyclerView
或 NestedScrollView
。
顺便说一句,它不是图书馆。
现在,这个library 可以完全复制 Play Newstand 布局。
它非常易于使用并且具有巨大的自定义范围。我知道您不愿意使用这样的库,但这可以让事情变得如此简单。
只需添加这个,
compile ('com.github.florent37:materialviewpager:1.0.7@aar'){
transitive = true
}
并在XML、
中添加布局<com.github.florent37.materialviewpager.MaterialViewPager
android:id="@+id/materialViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:viewpager_logo="@layout/header_logo"
app:viewpager_logoMarginTop="100dp"
app:viewpager_color="@color/colorPrimary"
app:viewpager_headerHeight="200dp"
app:viewpager_headerAlpha="1.0"
app:viewpager_hideLogoWithFade="false"
app:viewpager_hideToolbarAndTitle="true"
app:viewpager_enableToolbarElevation="true"
app:viewpager_parallaxHeaderFactor="1.5"
app:viewpager_headerAdditionalHeight="20dp"
app:viewpager_displayToolbarWhenSwipe="true"
app:viewpager_transparentToolbar="true"
app:viewpager_animatedHeaderImage="true"
/>
并遵循图书馆页面上的自定义指南。现在,如果您仍然不确定要使用它,您仍然可以转到它并检查库是如何构建的。它可以让您对自己创建它有足够的洞察力(但会很耗时)
希望对您有所帮助。