ビューページャーを使用したツールバーレイアウトの折りたたみ

Question

CollapsingBarLayoutをビューページャーで使用していますが、ビューページャーのフラグメントにはリストビュー、グリッドビューがあります。

ここに私のコードがあります：

    <?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:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context="com.bigsteptech.seandroidnativeapp.classes.modules.common.ViewGroupEvent">

    <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"
        Android:fitsSystemWindows="true">

        <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"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@style/TransparentText">

            <FrameLayout
                Android:id="@+id/carouselLayout"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                app:layout_collapseMode="parallax">

                <ImageView
                    Android:id="@+id/coverImage"
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent"
                    Android:scaleType="centerCrop"/>

                <LinearLayout
                    Android:layout_width="match_parent"
                    Android:gravity="bottom"
                    Android:orientation="vertical"
                    Android:layout_gravity="bottom"
                    Android:padding="@dimen/profile_image_margin"
                    Android:background="@drawable/gradient_bg"
                    Android:layout_height="wrap_content">

                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:layout_marginLeft="@dimen/profile_image_margin"
                        Android:textSize="@dimen/text_size_xlarge"
                        Android:textStyle="bold"
                        Android:textColor="@color/white"
                        Android:id="@+id/content_title"/>

                    <RelativeLayout
                        Android:layout_width="match_parent"
                        Android:layout_marginLeft="@dimen/profile_image_margin"
                        Android:layout_height="wrap_content">

                        <TextView
                            Android:layout_width="wrap_content"
                            Android:layout_height="wrap_content"
                            Android:textStyle="bold"
                            Android:textColor="@color/white"
                            Android:textSize="@dimen/text_size_medium"
                            Android:id="@+id/category_title"/>

                        <TextView
                            Android:layout_width="wrap_content"
                            Android:layout_height="wrap_content"
                            Android:textStyle="bold"
                            Android:layout_toRightOf="@+id/category_title"
                            Android:layout_marginLeft="@dimen/profile_image_margin"
                            Android:textColor="@color/white"
                            Android:textSize="@dimen/text_size_medium"
                            Android:id="@+id/memberCount"/>

                    </RelativeLayout>


                </LinearLayout>

            </FrameLayout>

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:theme="@style/ActionBarThemeOverlay"
                app:popupTheme="@style/ActionBarPopupThemeOverlay"
                Android:background="@drawable/gradient_bg"
                app:layout_collapseMode="pin" />

        </Android.support.design.widget.CollapsingToolbarLayout>

    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.widget.NestedScrollView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_gravity="fill_vertical"
        Android:isScrollContainer="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <RelativeLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">

            <LinearLayout
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:id="@+id/contentInfo"
                Android:paddingBottom="48sp"
                Android:clipToPadding="false"
                Android:orientation="vertical">

                <ProgressBar
                    style="?android:attr/progressBarStyle"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="@dimen/profile_page_left_right_margin"
                    Android:layout_gravity="center"
                    Android:id="@+id/progressBar"/>

                <LinearLayout
                    Android:orientation="horizontal"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:padding="10dp"
                    Android:background="@color/grey_light">

                    <TextView Android:id="@+id/ownerTitle"
                        Android:clickable="true"
                        Android:focusable="true"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:layout_marginLeft="@dimen/keyline_1"
                        Android:layout_gravity="center_vertical"
                        Android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                        Android:textColor="@color/body_text_1" />

                </LinearLayout>

                <LinearLayout
                    Android:orientation="horizontal"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="@dimen/profile_image_margin"
                    Android:padding="10dp">

                    <com.bigsteptech.seandroidnativeapp.Classes.Modules.Common.ViewRelated.ExpandableTextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:layout_marginLeft="@dimen/keyline_1"
                        style="@style/TextBody"
                        Android:layout_gravity="center_vertical"
                        Android:id="@+id/view_description" />

                </LinearLayout>

                <Android.support.design.widget.TabLayout
                    Android:id="@+id/slidingTabs"
                    Android:layout_width="match_parent"
                    app:tabIndicatorHeight="3dp"
                    app:tabMode="scrollable"
                    Android:layout_height="wrap_content"/>

                <Android.support.v4.view.ViewPager
                    Android:id="@+id/pager"
                    Android:layout_width="match_parent"
                    Android:layout_height="300dp">

                </Android.support.v4.view.ViewPager>


            </LinearLayout>


        </RelativeLayout>

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

    <Android.support.design.widget.FloatingActionButton
        Android:layout_height="wrap_content"
        Android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        Android:id="@+id/joinGroupButton"
        app:layout_anchorGravity="bottom|right|end"
        Android:src="@drawable/ic_action_new"
        Android:layout_margin="@dimen/fab_margin"
        Android:clickable="true"/>

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

リストビュー、グリッドビューを持っているフラグメントは、折りたたみツールバーで上にスクロールしません。これをどのように達成できますか？.

私を助けてください、高度にありがとうございます...

Answer 1

ViewPagerをAppBarセクションに配置し、セットアップする必要がありますlayout_behavior：

<Android.support.design.widget.AppBarLayout>>
    <Android.support.design.widget.CollapsingToolbarLayout>
     // THIS VIEWS WILL BE COLLAPSED
    </Android.support.design.widget.CollapsingToolbarLayout>

    // THIS VIEWS WILL BE PINNED
    <Android.support.v4.view.ViewPager
          Android:id="@+id/pager"
          Android:layout_width="match_parent"
          Android:layout_height="300dp"
          app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </Android.support.v4.view.ViewPager>
</Android.support.design.widget.AppBarLayout>

フラグメントをViewPagerの子として使用する場合は、ViewPager内の各フラグメントにもセットアップlayout_behaviorが必要です。

app:layout_behavior="@string/appbar_scrolling_view_behavior"

Answer 2

新しい材料設計サポートライブラリを使用したタブ付きの折りたたみツールバー

新しいマテリアルデザインサポートライブラリの公式の折りたたみツールバー機能を使用しました。

ここで折りたたまれたビューの高さは256dpで、タブの高さは56dpです

私は次のパスを作りました

画像を折りたたみビュー用とタブ用の2つの部分にカットします。

dp to pixel 高解像度のドローアブルxxxhdpiのサイズに従って画像をカットし、すべての画面サイズに調整できるようにドローアブルフォルダーに入れます

2000x1246の画像があります

トップ画像256dp = 2000x1024ピクセル

下部タブ画像56dp = 2000x224ピクセル

ソースコード の完全な例を次に示します

Answer 3

ListViewおよびGridViewには、NestedScrolling関数が装備されていません。そして、それはCollapsingToolbarLayoutと連携する必要がありました。

動作させる最も簡単な方法は、ListViewとGridViewを RecyclerViews （RecyclerView implements- NestedScrollingChild ）。

Answer 4

私はこれを達成しました最初に使用するライブラリにコードを配置しますこれはレイアウトファイルです

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/attraction_lay"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="#f5f6f5">

<RelativeLayout
    Android:id="@+id/bar"
    Android:layout_width="match_parent"
    Android:layout_height="47dp">

    <TextView
        Android:id="@+id/exp_title"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:layout_centerHorizontal="true"
        Android:layout_marginBottom="16dp"
        Android:text="See &amp; do"
        Android:textColor="#1b7bba"
        Android:textSize="17sp" />

    <RelativeLayout
        Android:id="@+id/relmenu"
        Android:layout_width="40dp"
        Android:layout_height="40dp"
        Android:layout_alignParentBottom="true"
        Android:layout_alignParentLeft="true">

        <ImageView
            Android:layout_width="17dp"
            Android:layout_height="14dp"
            Android:layout_alignParentBottom="true"
            Android:layout_alignParentLeft="true"
            Android:layout_marginBottom="17dp"
            Android:layout_marginLeft="8dp"
            Android:src="@drawable/menu_icon_blue" />

    </RelativeLayout>

    <RelativeLayout
        Android:id="@+id/relsearch"
        Android:layout_width="40dp"
        Android:layout_height="40dp"
        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true">

        <ImageView
            Android:layout_width="18dp"
            Android:layout_height="18dp"
            Android:layout_alignParentBottom="true"
            Android:layout_alignParentRight="true"
            Android:layout_marginBottom="17dp"

            Android:layout_marginRight="8dp"
            Android:src="@drawable/search_icon_blue" />

    </RelativeLayout>

</RelativeLayout>

<View
    Android:id="@+id/div"
    Android:layout_width="match_parent"
    Android:layout_height="2px"
    Android:layout_below="@+id/bar"
    Android:background="#1b7bba" />

<FrameLayout
    Android:id="@+id/layout_container"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"

    Android:layout_below="@+id/div">

    <ListView
        Android:id="@+id/listView"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:clickable="true"
        Android:divider="@null"
        Android:focusable="false"
        Android:focusableInTouchMode="false"
        Android:listSelector="@Android:color/transparent"
        Android:scrollbars="none" />

    <FrameLayout
        Android:id="@+id/header"
        Android:layout_width="match_parent"
        Android:layout_height="290dp"
        Android:layout_marginTop="0dp"
        Android:orientation="vertical">

        <FrameLayout
            Android:id="@+id/images_header"
            Android:layout_width="fill_parent"
            Android:layout_height="250dp"
            Android:layout_marginBottom="40dp">

            <Android.support.v4.view.ViewPager
                Android:id="@+id/gallery"
                Android:layout_width="fill_parent"
                Android:layout_height="250dp"
                Android:clickable="true"
                Android:focusable="false"
                Android:focusableInTouchMode="false"
                Android:overScrollMode="never" />

            <RelativeLayout
                Android:id="@+id/gallery_back"

                Android:layout_width="40dp"
                Android:layout_height="60dp"
                Android:layout_gravity="left|center_vertical">

                <ImageView
                    Android:layout_width="20dp"
                    Android:layout_height="52dp"
                    Android:layout_alignParentLeft="true"
                    Android:layout_centerVertical="true"
                    Android:background="@drawable/arrow_back" />
            </RelativeLayout>

            <RelativeLayout
                Android:id="@+id/gallery_next"
                Android:layout_width="40dp"
                Android:layout_height="60dp"
                Android:layout_gravity="right|center_vertical">

                <ImageView

                    Android:layout_width="20dp"
                    Android:layout_height="52dp"
                    Android:layout_alignParentRight="true"
                    Android:layout_centerVertical="true"
                    Android:background="@drawable/arrow_next" />
            </RelativeLayout>

            <View
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:layout_marginBottom="-150dp"
                Android:layout_marginTop="170dp"
                Android:background="@drawable/horizontal_gradient" />

            <TextView
                Android:id="@+id/pagenum"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_gravity="right|bottom"
                Android:layout_marginBottom="10dp"
                Android:layout_marginRight="10dp"
                Android:text="3/15"
                Android:textColor="#FFF"
                Android:textSize="14sp" />

        </FrameLayout>

        <FrameLayout
            Android:id="@+id/header_text_layout"
            Android:layout_width="match_parent"

            Android:layout_height="@dimen/min_height_textheader_materiallike"
            Android:layout_gravity="bottom"
            Android:background="#FFF">

            <!--<TextView-->
            <!--Android:id="@+id/text_header"-->
            <!--Android:layout_width="match_parent"-->
            <!--Android:layout_height="wrap_content"-->
            <!--Android:layout_gravity="center_vertical"-->
            <!--Android:layout_marginLeft="70dp"-->
            <!--Android:text="ttttt"-->
            <!--Android:textColor="@Android:color/white"-->
            <!--Android:textSize="18sp"-->

            <!--Android:textStyle="bold" />-->
            <RelativeLayout
                Android:id="@+id/button_header"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent">

                <LinearLayout
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent"
                    Android:layout_centerHorizontal="true"
                    Android:layout_centerVertical="true"
                    Android:layout_marginLeft="83dp"
                    Android:layout_marginRight="83dp">

                    <RelativeLayout
                        Android:id="@+id/photo"
                        Android:layout_width="match_parent"
                        Android:layout_height="match_parent"
                        Android:layout_gravity="center"
                        Android:layout_weight="2.5">

                        <ImageView
                            Android:layout_width="17dp"
                            Android:layout_height="14dp"
                            Android:layout_centerInParent="true"
                            Android:background="@drawable/photo_blue_icon"

                            />
                    </RelativeLayout>

                    <RelativeLayout
                        Android:id="@+id/video"
                        Android:layout_width="match_parent"
                        Android:layout_height="match_parent"
                        Android:layout_weight="2.5">

                        <ImageView
                            Android:layout_width="14dp"
                            Android:layout_height="16dp"
                            Android:layout_centerInParent="true"
                            Android:background="@drawable/video_blue_icon" />
                    </RelativeLayout>

                    <RelativeLayout
                        Android:id="@+id/share"
                        Android:layout_width="match_parent"
                        Android:layout_height="match_parent"
                        Android:layout_weight="2.5">

                        <ImageView
                            Android:layout_width="15dp"
                            Android:layout_height="20dp"
                            Android:layout_centerInParent="true"
                            Android:background="@drawable/share_blue_icon" />
                    </RelativeLayout>

                    <RelativeLayout
                        Android:id="@+id/fav"
                        Android:layout_width="match_parent"
                        Android:layout_height="match_parent"
                        Android:layout_weight="2.5">

                        <ImageView
                            Android:layout_width="20dp"
                            Android:layout_height="19dp"
                            Android:layout_centerInParent="true"
                            Android:background="@drawable/fav_blue_icon" />
                    </RelativeLayout>

                </LinearLayout>

                <View
                    Android:layout_width="match_parent"
                    Android:layout_height="2px"
                    Android:layout_alignParentBottom="true"
                    Android:background="#d7d7d7" />
            </RelativeLayout>
        </FrameLayout>

    </FrameLayout>

</FrameLayout>

そしてJavaコードでこれを追加する必要があります

  StikkyHeaderBuilder.ListViewBuilder.stickTo(mListView)
                .setHeader(R.id.header, (ViewGroup) contentView)
                .minHeightHeaderDim(R.dimen.min_height_textheader_materiallike)
                .animator(new ParallaxStikkyAnimator())
                .attatch_Acitivty(Attractions.this)
                .castTo("Attractions")
                .build();

ここに library が使用されています

しかし、私は私が望むように動作するようにこのライブラリを変更しました

変更はstcikylistviewビルダーのaddメソッドで、使用されているアクティビティを把握し、スクロール用のデリゲートを渡す

彼女は私の修正です

ライブラリの修正版をここにアップロードします https://drive.google.com/file/d/0BxdN8PyW5nmHMmFFeFY2aW9zdlk/view?usp=sharing

Answer 5

私もこの問題を抱えていました。 RecyclerViewを使用する必要があります。 ListViewとGridGiewを使用する必要があることを理解しましたが、RecyclerView内で使用できます。

たとえば、RecyclerViewでGridLayoutを実装する方法を紹介します。

（GridViewを実装する）フラグメントレイアウトに、次のXMLを追加します

<Android.support.v7.widget.RecyclerView
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
        Android:id="@+id/recyclerviewGRID"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        />

次に、フラグメントJavaで、

フラグメントonCreateViewで、RecyclerViewを定義し、

RecyclerView rv = (RecyclerView) v.findViewById(R.id.recyclerviewGRID);
setupRecyclerView(rv);

メソッドsetupRecyclerViewを作成し、

 private void setupRecyclerView(RecyclerView recyclerView) {
        recyclerView.setHasFixedSize(true);

            recyclerView.setLayoutManager(new GridLayoutManager(recyclerView.getContext(), 2));
            mAdapter = new AdapterGridView(getActivity().getApplicationContext(), mItems);
            recyclerView.setAdapter(mAdapter);

    }

MAdapterを最初にRecyclerView.Adapterとして定義する必要があります。次に、RecyclerView用のアダプターを作成します。 mItemsは、リストのコンテンツを含むArrayListであることに注意してください。

AdapterGridView.Java

public class AdapterGridView extends RecyclerView.Adapter<AdapterGridView.ViewHolder> {

    ArrayList<AdItem> mItems;
    Context context, contxt;

    public AdapterGridView(Context context, ArrayList<AdItem> mItems) {
        this.context = context;
        this.mItems = mItems;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {

//attach your list item layout here, mine in this case is called list_item_grid_item
        View v = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.list_item_grid_item, viewGroup, false);
        ViewHolder viewHolder = new ViewHolder(v);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i) {
AdItem singleItem = mItems.get(i);

//attach data to your layout as the following manner
viewHolder.tvspecies.setText(singleItem.getName());

    }

    @Override
    public int getItemCount() {

//return the number of list items
        return mItems.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{

        public ImageView imgThumbnail, avatar;
        public TextView tvspecies, adIDLBL;


        public ViewHolder(View itemView) {
            super(itemView);
            itemView.setClickable(true);
            itemView.setOnClickListener(this);

//define your list item views, basically the stuff in list_item_grid_item
            imgThumbnail = (ImageView)itemView.findViewById(R.id.img_thumbnail);
            tvspecies = (TextView)itemView.findViewById(R.id.tv_species);

        }

        @Override
        public void onClick(View v) {
            //handle item click events
        }
    }
}