[英]Add fixed tab bar pinned to top with scrolled content?
I tried this answer, but I could not achieve the same look & behavior as my current main activity. 我尝试了此答案,但无法实现与当前主要活动相同的外观和行为。
What changes should I make to my existing main activity to add a fixed tab bar pinned to top with scrolled content like in the image below? 我应该对现有的主要活动进行哪些更改以添加固定的标签栏,该标签栏固定在滚动内容的顶部,如下图所示?
Here's a .GIF of my current main activity: i.stack.imgur.com/Yj0cv.gif 这是我当前主要活动的.GIF:i.stack.imgur.com/Yj0cv.gif
Here's a link to the full project called android
: https://github.com/firebase/friendlychat/tree/master/android 这是一个名为android
的完整项目的链接: https : //github.com/firebase/friendlychat/tree/master/android
Here's styles.xml
: 这是styles.xml
:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:colorButtonNormal">@drawable/button_selector</item>
<item name="colorButtonNormal">@drawable/button_selector</item>
<item name="android:buttonStyle">@style/FriendlyButtonStyle</item>
</style>
<style name="FriendlyButtonStyle" parent="Widget.AppCompat.Button">
<item name="android:textColor">@color/colorTitle</item>
</style>
</resources>
Here's activity_main.xml
: 这是activity_main.xml
:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.google.firebase.codelab.friendlychat.MainActivity">
<com.google.android.gms.ads.AdView
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
ads:adSize="BANNER"
ads:adUnitId="@string/banner_ad_unit_id">
</com.google.android.gms.ads.AdView>
<android.support.v7.widget.RecyclerView
android:id="@+id/messageRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/linearLayout"
android:layout_below="@+id/adView"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="@+id/linearLayout">
<ImageView
android:id="@+id/addMessageImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/ic_add_black_24dp"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/messageEditText"
android:layout_gravity="center_vertical"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SEND"
android:enabled="false"
android:id="@+id/sendButton"
android:layout_gravity="bottom"/>
</LinearLayout>
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/progressBar"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
Put your fixed view's in RelativeLayout
and move scrolling content inside CoordinatorLayout
. 将固定视图放置在RelativeLayout
然后将滚动内容移动到CoordinatorLayout
。 Like this: 像这样:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
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"
android:layoutDirection="ltr"
tools:context=".MainActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/linearLayout">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.PopupOverlay"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.gms.ads.AdView
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
ads:adSize="BANNER"
ads:adUnitId="@string/banner_ad_unit_id">
</com.google.android.gms.ads.AdView>
<android.support.v7.widget.RecyclerView
android:id="@+id/messageRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="false"
android:layout_below="@+id/adView" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:orientation="horizontal">
<ImageView
android:id="@+id/addMessageImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/ic_add_black_24dp" />
<EditText
android:id="@+id/messageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1" />
<Button
android:id="@+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:enabled="false"
android:text="SEND" />
</LinearLayout>
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>
Google has Design support library and with it you can implement Collapsing Toolbar and you do not need any 3rd party libraries!! Google拥有设计支持库,您可以通过它实现Collapsing Toolbar,而无需任何第三方库!!
In addition to pinning a view, you can use app:layout_collapseMode="parallax" (and optionally app:layout_collapseParallaxMultiplier="0.7" to set the parallax multiplier) to implement parallax scrolling (say of a sibling ImageView within the CollapsingToolbarLayout) 除了固定视图外,您还可以使用app:layout_collapseMode =“ parallax”(以及可选的app:layout_collapseParallaxMultiplier =“ 0.7”来设置视差倍数)来实现视差滚动(例如,CollapsingToolbarLayout中的同级ImageView)
And as example you can use this: 作为示例,您可以使用以下代码:
<android.support.design.widget.AppBarLayout
android:layout_height="186dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
And do not forget to add compile "com.android.support:design:25.3.1"
in your module build.gradle
并且不要忘记在模块build.gradle
添加compile "com.android.support:design:25.3.1"
UPDATE 1: First of all, you need to create a CoordinatorLayout
. 更新1:首先,您需要创建一个CoordinatorLayout
。
All the new components use a new concept called Behavior that is used by the Coordinator Layout to take some actions based on different interactions. 所有新组件都使用称为行为的新概念,协调器布局使用该新概念来基于不同的交互采取一些操作。
<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:fitsSystemWindows="true">
</android.support.design.widget.CoordinatorLayout>
You can use fitsSystemWindows
on any item you want to be painted below the status bar. 您可以在状态栏下方要绘制的任何项目上使用fitsSystemWindows
。
Then you need to add an AppBarLayout
: 然后,您需要添加一个AppBarLayout
:
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
</android.support.design.widget.AppBarLayout>
And then inside that, you can add something like: 然后在其中添加以下内容:
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
Just created behavior, what you want. 刚创建的行为,就是您想要的。 Shouldn't be so complicated. 不应该那么复杂。 So here is main XML for all Views. 因此,这是所有视图的主要XML。 But I also have already created project for this sample, please write here, if I need to share full project. 但是我也已经为这个示例创建了项目,如果我需要共享完整的项目,请在这里写。
SCREENS 屏幕
MAIN XML 主要XML
<?xml version="1.0" encoding="utf-8"?>
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/toolbar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:scrollbars="none"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
TO YOUR EXAMPLE 以您的例子
I share here another example, which should suite your code. 我在这里分享了另一个示例,该示例应适合您的代码。 I attached all view Ids for your examples. 我为您的示例附加了所有视图ID。 Check it. 核实。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<com.google.android.gms.ads.AdView
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_below="@+id/toolbar"
android:layout_centerHorizontal="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
ads:adSize="BANNER"
ads:adUnitId="@string/banner_ad_unit_id"
app:layout_collapseMode="pin"></com.google.android.gms.ads.AdView>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/messageRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom |center_horizontal"
android:layout_marginBottom="100dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/addMessageImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@android:drawable/ic_dialog_alert" />
<EditText
android:id="@+id/messageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1" />
<Button
android:id="@+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:enabled="false"
android:text="SEND" />
</LinearLayout>
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_centerHorizontal="true"
android:layout_marginBottom="100dp"
android:layout_centerVertical="true" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
try above code 试试上面的代码
Style.xml Style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:colorButtonNormal">@drawable/button_selector</item>
<item name="colorButtonNormal">@drawable/button_selector</item>
<item name="android:buttonStyle">@style/FriendlyButtonStyle</item>
</style>
<style name="FriendlyButtonStyle" parent="Widget.AppCompat.Button">
<item name="android:textColor">@color/colorTitle</item>
</style>
here if you don't want to change property to 'NoActionBar' then alternatively set it in AndroidManifest.xml file like above 如果您不想将属性更改为“ NoActionBar”,则可以在AndroidManifest.xml文件中进行设置(如上)
<activity android:name=".MainActivity"
android:theme="@style/Theme.AppCompat.NoActionBar"/>
activity_main.xml activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
android:fitsSystemWindows="true"
tools:context="com.google.firebase.codelab.friendlychat.MainActivity"
android:id="@+id/coordinatorLayout">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabGravity="center"
app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="@android:color/white"
app:tabIndicatorHeight="2dp"
app:tabIndicatorColor="@android:color/white"/>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.google.firebase.codelab.friendlychat.MainActivity">
<com.google.android.gms.ads.AdView
android:id="@+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
app:adSize="BANNER"
app:adUnitId="@string/banner_ad_unit_id">
</com.google.android.gms.ads.AdView>
<include
layout="@layout/maincontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/adView"/>
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:orientation="horizontal"
android:layout_marginBottom="50dp">
<ImageView
android:id="@+id/addMessageImageView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/ic_add_black_24dp"/>
<EditText
android:id="@+id/messageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"/>
<Button
android:id="@+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:enabled="false"
android:text="SEND"/>
</LinearLayout>
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
maincontent.xml maincontent.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/messageRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.