2017-08-15 2 views
0

私はイメージスライダーとnewsを含むrecyclerviewを持っています。リサイクルビューのアイテムを作る方法イメージスライダーをオーバーラップする

この写真は私のアプリから示して私は現在開発していますイメージスライダーの下(隠れて)起こっているrecyclerviewを下から上にrecyclerviewをスクロール:

enter image description here

そして、このニュースからのスクリーンショット私のデバイス上のアプリ:

enter image description here

あなたはrecyclerview画像スライダーを重ねているどのように最後の画像で見ることができるように。

どうすれば実現できますか?

この私のフラグメントのxml:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout android:id="@+id/framelayout" 
    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" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:custom="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <LinearLayout 
     android:id="@+id/linearFragmentOne" 
     android:orientation="vertical" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 
     <com.baoyz.widget.PullRefreshLayout 
      android:id="@+id/swipe_refresh" 
      android:layout_width="match_parent" 
      app:refreshColors="@array/colors_swipe" 
      app:refreshType="ring" 
      android:layout_height="200dp"> 

      <com.daimajia.slider.library.SliderLayout 
       android:id="@+id/slider" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       custom:indicator_visibility="visible" 
       custom:pager_animation="Accordion" 
       custom:pager_animation_span="1100" /> 

     </com.baoyz.widget.PullRefreshLayout> 

     <TextView 
      android:id="@+id/txt_marquee" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:focusable="true" 
      android:textSize="15sp" 
      android:textColor="#FFFFFF" 
      android:singleLine="true" 
      /> 

     <android.support.v4.widget.NestedScrollView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="fill_vertical" 

      > 

      <android.support.v7.widget.RecyclerView 
       android:id="@+id/recycler_post" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:layout_behavior="@string/appbar_scrolling_view_behavior" 
       /> 

     </android.support.v4.widget.NestedScrollView> 

    </LinearLayout> 


</android.support.design.widget.CoordinatorLayout> 

が、私はこの1つとして、フラグメントXMLを更新しました:

<?xml version="1.0" encoding="utf-8"?> 
    <android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar" 
     android:layout_width="match_parent" 
     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" 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     xmlns:custom="http://schemas.android.com/apk/res-auto" 
     android:layout_height="wrap_content" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 


     <LinearLayout 
      android:orientation="vertical" 
      android:id="@+id/framelayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 
      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 
     <com.baoyz.widget.PullRefreshLayout 
      android:id="@+id/swipe_refresh" 
      android:layout_width="match_parent" 
      app:refreshColors="@array/colors_swipe" 
      app:refreshType="ring" 
      android:layout_height="200dp"> 

      <com.daimajia.slider.library.SliderLayout 
       android:id="@+id/slider" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       custom:indicator_visibility="visible" 
       custom:pager_animation="Accordion" 
       custom:pager_animation_span="1100" /> 

     </com.baoyz.widget.PullRefreshLayout> 

     <TextView 
      android:id="@+id/txt_marquee" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:focusable="true" 
      android:textSize="15sp" 
      android:textColor="#FFFFFF" 
      android:singleLine="true" 
      /> 

     <android.support.v4.widget.NestedScrollView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="fill_vertical" 

      > 

      <android.support.v7.widget.RecyclerView 
       android:id="@+id/recycler_post" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:behavior_overlapTop="100dp" 
       app:layout_behavior="@string/appbar_scrolling_view_behavior" 
       /> 

     </android.support.v4.widget.NestedScrollView> 

</LinearLayout> 
    </android.support.design.widget.AppBarLayout> 

何も単純なツールバーがimageslider

の上部に添加し、変化していません

FINAL_UPDATE:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.NestedScrollView 

    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:custom="http://schemas.android.com/tools"> 

     <LinearLayout 
      android:orientation="vertical" 
      android:id="@+id/framelayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

     <com.baoyz.widget.PullRefreshLayout 
      android:id="@+id/swipe_refresh" 
      android:layout_width="match_parent" 
      app:refreshColors="@array/colors_swipe" 
      app:refreshType="ring" 
      android:layout_height="200dp"> 

      <com.daimajia.slider.library.SliderLayout 
       android:id="@+id/slider" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       custom:indicator_visibility="visible" 
       custom:pager_animation="Accordion" 
       custom:pager_animation_span="1100" /> 

     </com.baoyz.widget.PullRefreshLayout> 

     <TextView 
      android:id="@+id/txt_marquee" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:focusable="true" 
      android:textSize="15sp" 
      android:textColor="#FFFFFF" 
      android:singleLine="true" 
      /> 

      <android.support.v7.widget.RecyclerView 
       android:id="@+id/recycler_post" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:layout_behavior="@string/appbar_scrolling_view_behavior" 
       /> 
     </LinearLayout> 

</android.support.v4.widget.NestedScrollView> 

答えて

1

IDKあなたのPullRefreshLayoutウィジェットは何をしますか?Sliderを内部に、AppBarLayoutを内部に追加し、必要に応じてPullRefreshLayoutを追加することで、必要な動作を得ることができます。次に、NestedScrollViewおよび/またはRecyclerViewにapp:behavior_overlapTop="here goes the amount of dp you want to overlap over the AppBarLayout"を追加します。

<android.support.design.widget.AppBarLayout 
    android:id="@+id/app_bar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 
     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:layout_collapseMode="pin" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 
     <com.daimajia.slider.library.SliderLayout 
      android:id="@+id/slider" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      custom:indicator_visibility="visible" 
      custom:pager_animation="Accordion" 
      custom:pager_animation_span="1100" /> 
    </LinearLayout> 
</android.support.design.widget.AppBarLayout> 

...

<android.support.v4.widget.NestedScrollView 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="fill_vertical" 

    > 

    <android.support.v7.widget.RecyclerView 
     android:id="@+id/recycler_post" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:behavior_overlapTop="100dp" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     /> 

</android.support.v4.widget.NestedScrollView> 

あなたはRecyclerViewはAppBarLayoutと重なる量を調整することができますこの方法です。このプログラムでsetOverlayTopをチェックする必要がある場合。

しかし、完全に渡す必要がある場合は、すべてをNestedScrollViewにラップし、app:layout_behaviorをスライダに追加するだけで、RecyclerViewをスクロールするときにも上に移動しますが、オーバーラップしませんが、スペースはスライダが上になるにつれて大きくなります。

カスタムオーバーラップを実行する場合は、カスタムコントロールcom.baoyz.widget.PullRefreshLayoutcom.daimajia.slider.library.SliderLayoutに使用したライブラリへのリンクを持つと便利です。

更新

明確にする:私は質問に私の新しいXMLフラグメントを追加したあなたの助けのための

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout android:id="@+id/framelayout" 
    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" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:custom="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/app_bar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 


     <LinearLayout 
      android:orientation="vertical" 
      android:id="@+id/framelayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 
      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 
      <com.baoyz.widget.PullRefreshLayout 
       android:id="@+id/swipe_refresh" 
       android:layout_width="match_parent" 
       app:refreshColors="@array/colors_swipe" 
       app:refreshType="ring" 
       android:layout_height="200dp"> 

       <com.daimajia.slider.library.SliderLayout 
        android:id="@+id/slider" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        custom:indicator_visibility="visible" 
        custom:pager_animation="Accordion" 
        custom:pager_animation_span="1100" /> 

      </com.baoyz.widget.PullRefreshLayout> 

      <TextView 
       android:id="@+id/txt_marquee" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:focusable="true" 
       android:textSize="15sp" 
       android:textColor="#FFFFFF" 
       android:singleLine="true" 
       /> 

     </LinearLayout> 
    </android.support.design.widget.AppBarLayout> 

    <android.support.v4.widget.NestedScrollView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="fill_vertical" 
     > 

     <android.support.v7.widget.RecyclerView 
      android:id="@+id/recycler_post" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:behavior_overlapTop="100dp" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" 
       /> 

    </android.support.v4.widget.NestedScrollView> 

</android.support.design.widget.CoordinatorLayout> 
+0

おかげで多くのことを。 ツールバーがimagesliderの最上部に追加されていますが、まだrecyclerviewはAppBarLayoutは、ツールバーのラッパーであると(存在する場合)でなければなりません –

+0

の下で起こっています。私は答えを更新しました、コントロールの不足のためにそれをテストできませんでしたが、私はそれが動作するはずだと思うし、そうでなければ、NestedScrollViewに振る舞いを追加します。 –

+0

swiperefreshlayoutとしてCoordinatorLayoutの最初の要素を同じ作品PullRefresh imageslider – fmaccaroni

関連する問題