Сворачивающаяся панель инструментов с дополнительной информацией и пейджером

Я хочу создать макет, как показано выше, с эффектом сворачивания панели инструментов, я уже пробовал сворачивать панель инструментов с помощью viewpager, но с этим я могу добавить только изображение и viewpgaer, я хочу добавить приведенную ниже информацию, а затем viewpager, пожалуйста, помогите мне здесь, если у кого-нибудь есть идеи.

Заранее большое спасибо!!!

<?xml version="1.0" encoding="utf-8"?>


<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.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="@dimen/collapsing_tool_bar_margin_end"
        app:expandedTitleMarginBottom="@dimen/collapsing_tool_bar_margin_bottom"
        app:expandedTitleMarginStart="@dimen/collapsing_tool_bar_margin_bottom">


         <ImageView
            android:id="@+id/coverImage"
            android:layout_width="match_parent"
            android:layout_height="200dp"
             app:layout_collapseMode="parallax"
            android:scaleType="centerCrop"/>

        <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"
            app:layout_collapseMode="pin"
            android:background="@drawable/gradient_bg" />


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

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlways">

    <android.support.design.widget.TabLayout
        android:id="@+id/slidingTabs"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        app:tabMode="scrollable"
        app:tabGravity="fill"
        android:background="@color/transparent"
        android:layout_height="wrap_content"/>

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

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

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>


android android-collapsingtoolbarlayout
person Prithniraj Nicyone    schedule 09.09.2015    source источник
comment
Я поделился своим кодом, пожалуйста, проверьте приведенный выше код.   -  person Prithniraj Nicyone    schedule 09.09.2015

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете добавить другой вид на сворачивающуюся панель инструментов, например:

<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"
                          android:id="@+id/header_layout"
                          android:orientation="vertical"
                          android:layout_marginLeft="20dp"
                          android:layout_marginBottom="10dp"
                          android:layout_gravity="bottom|left">
                <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
                          android:text="Title"
                          android:textColor="#ffffff"
                          android:textSize="25dp"/>
                <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
                          android:text="subtitle"
                          android:textColor="#ffffff"/>
            </LinearLayout>

Отрегулируйте размер текста, поля и все остальное по своему усмотрению.

Но затем добавьте этот код, чтобы убедиться, что ваш добавленный макет исчезает, когда панель инструментов сворачивается.

headerLayout=(LinearLayout) findViewById(R.id.header_layout);

AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout);
    appBarLayout.addOnOffsetChangedListener(this);

И сделайте свой класс активности реализовать AppBarLayout.OnOffsetChangedListener

Тогда ваш метод onOffsetChanged должен быть таким.

 @Override
public void onOffsetChanged(AppBarLayout appBarLayout, int offset) {
    float scaleFactor=1+(offset*0.005f);
    if(!(scaleFactor<0)){

        headerLayout.setAlpha(scaleFactor);
    }
    if(scaleFactor<0.3){
        headerLayout.setAlpha(0);
    }

}

Отрегулируйте плавающее значение «0,005f» для получения желаемого эффекта.

Я надеюсь, что это полезно

person Collins Abitekaniza    schedule 11.09.2015

arrow_upward
0
arrow_downward

Я изменил тему, чтобы решить эту проблему:

вы должны использовать ThemeOverlay.AppCompat.Light;

person محمد جواد حسنی    schedule 02.07.2018