Фрагменты вкладок Android с сворачивающейся панелью инструментов

У меня рушитсяToolbar в моем приложении. Я используюNavigationDrawer и переключаться между элементами с разными фрагментами, заменяя при этомFrameLayoutи оставив панель инструментов через приложение.

Один из фрагментов имеет макет вкладки.
Когда я показываю этот фрагмент, он показан подToolbar, с тенью на панели инструментов.
Я хочу, чтобы он был на одном уровне с панелью инструментов, и чтобы он выглядел и действовал так жеAppBarLayout.
Также я хочу сделать вкладки прозрачными, когда панель инструментов развернута.

Как мне реорганизовать мои макеты так, чтобы это работало?

Вот мой XML:

Основной XML:

<android.support.v4.widget.DrawerLayout 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:layout_gravity="right"
    android:clickable="true"
    android:layoutDirection="rtl"
    android:fitsSystemWindows="true"
    android:id="@+id/drawer_layout">
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/mainCoordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutDirection="rtl"
    android:background="#EEEEEE"
    android:clickable="true">
    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/toolbar_layout">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            app:collapsedTitleGravity="right"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
            app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp">
            <ImageView
                android:id="@+id/headerImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:src="@drawable/soldier" />
            <View
                android:layout_width="match_parent"
                android:layout_height="88dp"
                android:background="@drawable/scrim_top"
                app:layout_collapseMode="pin" />
            <View
                android:layout_width="match_parent"
                android:layout_height="88dp"
                android:layout_gravity="bottom"
                android:layout_alignBottom="@+id/headerImage"
                android:background="@drawable/scrim_bottom" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:theme="@style/WhiteTitle"
                app:layout_scrollFlags="scroll|enterAlways"
                app:titleTextColor="@color/White"
                android:fitsSystemWindows="true"
                android:layout_gravity="right"
                android:layoutDirection="rtl"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/content_frame"
        android:animateLayoutChanges="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:fillViewport="true" />
    </FrameLayout>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/mainFab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_gravity="bottom|end"
        android:layout_marginLeft="16dp"
        android:layout_marginBottom="16dp"
        android:layout_marginTop="5dp"
        android:elevation="8dp"
        app:pressedTranslationZ="12dp"
        app:backgroundTint="?android:colorAccent"
        android:src="@drawable/ic_perm_phone_msg_white_24px" />
    <LinearLayout
        android:id="@+id/miniFabFrame"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:layout_alignParentLeft="true"
        android:layout_gravity="bottom|end"
        android:layout_marginLeft="20dp"
        android:layout_marginBottom="80dp"
        android:padding="0dp">
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/messageFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:elevation="8dp"
            android:layout_marginTop="5dp"
            android:layout_marginRight="0dp"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="5dp"
            app:pressedTranslationZ="12dp"
            app:backgroundTint="?android:colorPrimary"
            app:fabSize="mini"
            android:src="@drawable/ic_textSMS_white_24px" />
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/callFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="5dp"
            android:layout_marginRight="0dp"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="5dp"
            android:elevation="8dp"
            app:pressedTranslationZ="12dp"
            app:backgroundTint="?android:colorPrimary"
            app:fabSize="mini"
            android:src="@drawable/ic_call_white_24px" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:id="@+id/nav_view"
    android:layoutDirection="rtl"
    app:headerLayout="@layout/header"
    app:menu="@menu/nav_menu" />

Фрагмент с макетом вкладок:

<LinearLayout 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:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fitsSystemWindows="true"
    android:id="@+id/halachot_layout"
    android:layoutDirection="ltr"
    android:animateLayoutChanges="true">
  <android.support.design.widget.AppBarLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:elevation="0dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <com.refractored.PagerSlidingTabStrip
        android:id="@+id/halachotTabs"
        android:layout_below="@id/halachot_layout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/transparent"
        android:fitsSystemWindows="true"
        pstsPaddingMiddle="false"
        app:pstsShouldExpand="true" />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
       android:id="@+id/halachotPager"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1" />
</LinearLayout>

Любое руководство будет оценено.

Благодарю.

 amitairos15 июл. 2016 г., 12:32
Спасибо за ваш ответ, но я предпочел сделать это по-другому. Смотрите мой ответ ниже.
 Digvijay Singh15 июл. 2016 г., 11:45
проверь мой ответ

Ответы на вопрос(5)

У меня была похожая проблема. Я решил удалитьelevation панели действий при отображении фрагмента с нежелательной тенью.

Я добавил эти два метода в Activity:

public void setToolbarElevation(){
        if (Build.VERSION.SDK_INT >= 21){
            if (toolbar!=null) {
                toolbar.setElevation(getResources().getDimensionPixelSize(R.dimen.actionbar_elevation));
            }
        }
    }

public void removeToolbarElevation(){
        if (Build.VERSION.SDK_INT >= 21){
            if (toolbar!=null) {
                toolbar.setElevation(0);
            }
        }
    }

Поэтому, когда вы вызываете фрагмент с вкладками, вы вызываетеremoveToolbarElevation() в деятельности и тень должна исчезнуть.

Дайте мне знать, если это работает для вас.

 amitairos15 июл. 2016 г., 12:33
Спасибо за ваш ответ, но я предпочел сделать это более чистым способом. Смотрите мой ответ ниже. Спасибо!

Вы прошли через это. Как я упоминаю этоБлог.

Это сочетание того, что вам нужно, означает сочетаниеDrawerLayout + Fragments + CollapsingToolbarLayout.

activity_main.xml

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

<android.support.v4.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

app_bar_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"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="192dp"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            andro,id:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <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_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

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

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/app_bar_main">

    <FrameLayout
        android:id="@+id/content_main_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>

Выход :

 amitairos15 июл. 2016 г., 12:33
Смотрите мой ответ ниже.
 amitairos15 июл. 2016 г., 11:57
Спасибо за ответ, но это не показывает, как использовать вкладки, когда они находятся только в одном фрагменте. Но все равно спасибо!
 Ironman15 июл. 2016 г., 09:00
@amitairos ты проверил мой ответ?

Вы должны сделать структуру как это

<?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.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        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="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                app:tabMode="scrollable"
                app:tabContentStart="72dp" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="parallax" />

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

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="8dp"
        android:src="@drawable/ic_done"
        app:layout_anchor="@id/tabs"
        app:layout_anchorGravity="center|left|start"
        app:fabSize="mini"
        app:layout_behavior="com.support.android.designlibdemo.ScrollAwareFABBehavior"
        app:borderWidth="0dp" />

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

Взято изВот

Также смэтот ответь там хорошо объяснили.

Если вам нужны дальнейшие объяснения, тогда читайте эти блоги

http://blog.grafixartist.com/parallax-scrolling-tabs-design-support-library

http://blog.nkdroidsolutions.com/collapsing-toolbar-with-tabs-android-example

https://lab.getbase.com/nested-scrolling-with-coordinatorlayout-on-android/

 amitairos12 июл. 2016 г., 09:58
Хорошо. Я проверю это. Благодарю.
 amitairos09 июл. 2016 г., 22:02
Вы знаете, как сделать это в моем макете?
 amitairos12 июл. 2016 г., 09:45
Есть идеи? Щедрость заканчивается через 3 дня ... :-)
 amitairos08 июл. 2016 г., 14:48
Спасибо, но это не очень помогает в моей ситуации, так как мой макет вкладки находится только на одном из фрагментов. Я положил его в основной XML, он появится во всех фрагментах, которые я не хочу.
 TapanHP10 июл. 2016 г., 03:21
Нет но обязательно проверю
 TapanHP12 июл. 2016 г., 09:53
Нет @amitairos Очень жаль, что уже много пробовал, но все еще не совсем решение, хотя в моем поиске я нашел хороший блог обо всех случаях, связанных с расположением вкладок и фрагментов с изображением, так что вы можете прочитать его, может быть, это поможет вам.inthecheesefactory.com/blog/...
Решение Вопроса

Спасибо всем за вклад.
Что я в итоге сделал, это:

Основной XML:

<android.support.v4.widget.DrawerLayout 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:layout_gravity="right"
android:clickable="true"
android:layoutDirection="rtl"
android:fitsSystemWindows="true"
android:id="@+id/drawer_layout">
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/mainCoordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutDirection="rtl"
    android:background="#EEEEEE"
    android:clickable="true">
    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/toolbar_layout">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:collapsedTitleGravity="right"
            app:expandedTitleGravity="bottom|right"
            app:expandedTitleMarginBottom="50dp"
            app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
            app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp">

            <ImageView
                android:id="@+id/headerImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:background="@drawable/soldier" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:gravity="top"
                app:titleTextColor="@color/White"
                android:fitsSystemWindows="true"
                android:layout_gravity="right"
                android:layoutDirection="rtl"
                app:layout_collapseMode="pin"
                android:minHeight="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:titleMarginTop="15dp" />
        </android.support.design.widget.CollapsingToolbarLayout>
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            app:tabIndicatorHeight="3dp"
            android:layoutDirection="ltr"
            app:tabIndicatorColor="@android:color/white"
            app:tabSelectedTextColor="@color/White"
            app:tabTextColor="@color/Black"
            app:tabMode="fixed"
            app:tabGravity="fill" />
    </android.support.design.widget.AppBarLayout>
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/content_frame"
        android:animateLayoutChanges="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:fillViewport="true" />
    </FrameLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:id="@+id/nav_view"
    android:layoutDirection="rtl"
    app:headerLayout="@layout/header"
    app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>

Затем, когда я переключаю фрагменты, я показываю вкладки только на фрагменте, в котором я хочу их видеть, и скрываю их, когда я не хочу, чтобы они отображались:

toolbar_layout.SetExpanded(true);
tabs.Visibility = ViewStates.Gone;

И когда я хочу показать им:

toolbar_layout.SetExpanded(false,false);
tabs.Visibility = ViewStates.Visible;

Хотя я не получаю их прозрачными, но я решил просто свернуть панель инструментов, когда я их показываю, и отключить развертывание ее во фрагменте с вкладками.
Возможно, не лучшее решение, но оно работает для меня довольно хорошо.

Эти ссылки действительно помогли мне:
- http://blog.iamsuleiman.com/parallax-scrolling-tabs-design-support-library/
- http://blog.iamsuleiman.com/material-design-tabs-with-android-design-support-library/
- Как использовать TabLayout с панелью инструментов внутри CollapsingToolbarLayout?
- http://manishkpr.webheavens.com/android-material-design-tabs-collapsible-example/
- Отключить прокрутку в детской Recyclerview Android - Как отключить расширение панели инструментов на фрагменте с помощью вкладок (в котором также есть обзор рециркулятора).

Посмотрите, как это выглядит здесь:https://youtu.be/y2xLVSQ_NGM

Возможно, это не лучшее решение, но я хотел более чистый способ, который выглядит хорошо.
Спасибо за вашу помощь!

 Ironman15 июл. 2016 г., 14:58
Хорошее исследование. Счастливо знать, что это работает для вас ..

Когда я показываю этот фрагмент, он отображается под панелью инструментов, с тенью на панели инструментов. Я хочу, чтобы он был на одном уровне с панелью инструментов, и чтобы он выглядел и действовал так же, как в том же AppBarLayout.

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

Также я хочу сделать вкладки прозрачными, когда панель инструментов развернута.

для этого добавьте такой класс

public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {

public enum State {
    EXPANDED,
    COLLAPSED,
    IDLE
}

private State mCurrentState = State.IDLE;

@Override
public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
    if (i == 0) {
        if (mCurrentState != State.EXPANDED) {
            onStateChanged(appBarLayout, State.EXPANDED);
        }
        mCurrentState = State.EXPANDED;
    } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
        if (mCurrentState != State.COLLAPSED) {
            onStateChanged(appBarLayout, State.COLLAPSED);
        }
        mCurrentState = State.COLLAPSED;
    } else {
        if (mCurrentState != State.IDLE) {
            onStateChanged(appBarLayout, State.IDLE);
        }
        mCurrentState = State.IDLE;
    }
}

public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
 }

тогда в своей деятельности используйте это как

appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
@Override
public void onStateChanged(AppBarLayout appBarLayout, State state) {
    Log.d("STATE", state.name());

    //if state is expanded then set your tab layout background to transparent
  }
});

Ваш ответ на вопрос