2017-07-06 67 views
1

我试过this回答,但我无法实现与当前主要活动相同的外观&行为。添加滚动内容固定到顶部的固定标签栏?

我应该对现有的主要活动做些什么修改,以将固定的标签栏添加到顶部,并在下面的图像中滚动内容?

enter image description here

这是我目前的主要活动的一个.gif:i.stack.imgur.com/Yj0cv.gif

这里给项目的链接称为androidhttps://github.com/firebase/friendlychat/tree/master/android

这里的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> 

这里是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> 
+0

您提供的链接似乎是什么样子,你正在尝试做一个完整的答案。你能告诉我们为什么这个答案不适合你吗?它只是他们未使用的布局部分(ProgressBar,MyOwnView等)? – Gary99

+0

@ Gary99它看起来不一样。一切都不合时宜,不按顺序等 –

+0

@ Gary99我编辑了我的问题与更多的信息! –

回答

3

谷歌已经设计支持库,并用它可以实现折叠式工具,你不需要任何第三方库!内实现视差滚动(比如兄弟姐妹的ImageView的

除了钉扎的图,则可以使用应用程式::layout_collapseMode =“视差”(layout_collapseParallaxMultiplier =“0.7”,设置视差乘数和任选应用)在CollapsingToolbarLayout)

而且作为例子,你可以这样做:

<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> 

的ð不要忘了你的模块build.gradle

更新1中添加compile "com.android.support:design:25.3.1" 首先,你需要创建一个CoordinatorLayout

所有新组件都使用一种称为“行为”的新概念,“协调员布局”使用该概念根据不同的交互采取一些操作。

<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> 

你可以在你想要的状态栏下方被涂任何项目使用fitsSystemWindows

然后,你需要添加一个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> 

然后里面,你可以添加类似:

<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> 
+0

感谢您的回复。但是,请给出一个完整的工作答案,执行我的问题的代码:)这有点混乱。 –

+0

@JonathanDoe我会更新我的答案。 –

+0

我觉得有一个误解。我想指出的是,我需要一个针对我的项目的自定义解决方案。我会稍后用一个链接到整个项目来更新这个问题。要修改的活动称为“MainActivity”。 –

3

刚刚创建的行为,你想要什么。不应该那么复杂。所以这里是所有视图的主要XML。但是我也已经为这个示例创建了项目,如果我需要分享完整的项目,请在这里写下。

SCREENS

enter image description here

主要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> 

到您的实例

我在这里分享另一个例子,它应该适合你的鳕鱼即我为你的例子添加了所有视图ID。核实。

<?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> 
+0

感谢您的回答!我想指出的是,我需要一个针对我的项目的自定义解决方案。我会稍后用一个链接到整个项目来更新这个问题。要修改的活动称为“MainActivity”。 –

+0

我编辑了我的问题! –

+0

下面是我目前主要活动的一个.GIF:https://i.stack.imgur.com/Yj0cv.gif –

4

放入RelativeLayout您的固定视图的移动和滚动内CoordinatorLayout内容。就像这样:

<?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> 
+0

@JonathanDoe请接受我的答案,如果它做你想要的 – SiSa

1

试试上面的代码

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> 

在这里,如果你不想改变属性为 'NoActionBar',那么或者将其设置成AndroidManifest.xml文件如上

<activity android:name=".MainActivity" 
     android:theme="@style/Theme.AppCompat.NoActionBar"/> 

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

<?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>