réduire la disposition de la barre d'outils comme google play store

Question

je veux faire une disposition de la barre d'outils réductrice comme Google Play Store. comme ceci: https://sendvid.com/ugjspx8r

et voici ma mise en page: http://sendvid.com/s4mx3xem

comment puis-je le faire avec la nouvelle bibliothèque de support Android?

voici mon fichier XML de mise en page:

<Android.support.design.widget.CoordinatorLayout
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:focusableInTouchMode="true">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appBarLayout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:fitsSystemWindows="true">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/seffafCollapsingToolbarLayout"
            Android:layout_width="match_parent"
            Android:layout_height="240dp"
            app:expandedTitleMarginEnd="164dp"
            app:expandedTitleMarginStart="148dp"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

            <ImageView
                Android:id="@+id/header"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                Android:src="@drawable/haber_icerik_resim"
                Android:fitsSystemWindows="true"
                Android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/haber_toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:theme="@style/ToolbarColoredBackArrow"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways"/>

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



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


    <Android.support.v7.widget.RecyclerView
        Android:id="@+id/newsRecyclerView"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:scrollbars="vertical"
        Android:clickable="true"
        Android:background="@color/mainBackground"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Answer 1

Voici le code de travail, ce dont vous avez besoin.

<?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="@dimen/detail_backdrop_height"
        Android:fitsSystemWindows="true"
        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"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:fitsSystemWindows="true"
                Android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

    <fragment
        Android:name="com.support.Android.designlibdemo.CheeseListFragment"
        class="com.support.Android.designlibdemo.CheeseListFragment"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Et voici l'activité

public class SampleActivity extends AppCompatActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sample);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

J'espère que cela résoudra votre problème. S'il vous plaît faites le moi savoir, si vous avez besoin d'aide supplémentaire !!!

Answer 2

Voir à l'intérieur de CollapsingToolbarLayout pas besoin de définir app: layout_scrollFlags. Aucun effet . Sur la base de mon code, changez app: layout_scrollFlags dans CollapsingToolbarLayout en "App: layout_scrollFlags =" faire défiler | enterAlways | enterAlwaysCollapsed ".

Comme votre barre d’outils est "épingler", enterAlwaysCollapsed l’appellera lorsque vous faites défiler la liste.

<Android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.Android.com/apk/res-auto"
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:focusableInTouchMode="true">

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appBarLayout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/seffafCollapsingToolbarLayout"
        Android:layout_width="match_parent"
        Android:layout_height="240dp"
        Android:minHeight="?attr/actionBarSize"
        app:expandedTitleMarginEnd="164dp"
        app:expandedTitleMarginStart="148dp"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

        <ImageView
            Android:id="@+id/header"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:src="@drawable/haber_icerik_resim"
            Android:fitsSystemWindows="true"
            Android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/haber_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:theme="@style/ToolbarColoredBackArrow"
            app:layout_collapseMode="pin"/>

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

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


<Android.support.v7.widget.RecyclerView
    Android:id="@+id/newsRecyclerView"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:scrollbars="vertical"
    Android:clickable="true"
    Android:background="@color/mainBackground"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Answer 3

J'ai essayé presque toutes les réponses pour obtenir la même fonctionnalité, mais je l'ai fait fonctionner après quelques ajustements.

Il fonctionne de la même manière que PlayStore, où le titre de la barre d’outils apparaît uniquement lorsqu’il est réduit ou masqué.

Voici la mise en page

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

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:fitsSystemWindows="true"
        Android:theme="@style/AppTheme.AppBarOverlay">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:titleEnabled="false">

            <ImageView
                Android:id="@+id/banner"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:src="@drawable/image"
                Android:fitsSystemWindows="true"
                Android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <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/AppTheme.PopupOverlay" />
        </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>

    <!--Add your views here-->
    <Android.support.v7.widget.RecyclerView
        Android:id="@+id/recycler_view"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:clipToPadding="false"
        Android:fadeScrollbars="true"
        Android:paddingTop="10dp"
        Android:scrollbarStyle="insideOverlay"
        Android:scrollbars="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Ajoutez ce code à la méthode onCreate de votre activité

private Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
private AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
    appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (verticalOffset <= -appBarLayout.getTotalScrollRange() + toolbar.getHeight()) {
                //Toolbar Collapsed
                toolbar.setTitle("Your title here");
            } else {
                //Toolbar Expanded
                toolbar.setTitle(" ");
            }
        }
    });

Peu de choses à noter

• Ne définissez pas d'arrière-plan sur la barre d'outils, sinon il chevaucherait votre vue
• l'attribut contentScrim se chargera de la couleur de la barre d'outils lors du repli
• l'attribut titleEnabled est défini sur false pour désactiver l'effet de titre réduit.

J'espère que cela sera utile aux personnes recherchant le même comportement.

S'il vous plaît laissez-moi savoir comment ça marche. À votre santé!

Answer 4

J'ai implémenté ceci comme indiqué ci-dessous. Je n'ai pas pu trouver de meilleure solution. 

public enum State {
    EXPANDED,
    COLLAPSED,
}
mCurrentState = State.EXPANDED; 
 Boolean toolbarIsTransparent = true;
// Calculate ActionBar height
    TypedValue tv = new TypedValue();
    int actionBarHeight = 0;
    if (mContext.getTheme().resolveAttribute(Android.R.attr.actionBarSize, tv, true)) {
        actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
    }

    AppBarLayout appBarLayout = (AppBarLayout) rootView.findViewById(R.id.appbar_layout);
    final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) rootView.findViewById(R.id.collapsible_toolbar);
    if (appBarLayout != null) {
        final int finalActionBarHeight = actionBarHeight;
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
                if (i == 0) {
                    mCurrentState = State.EXPANDED;
                } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
                    mCurrentState = State.COLLAPSED;
                }
                if ((collapsingToolbarLayout.getHeight() + i <= finalActionBarHeight) && mCurrentState.equals(State.COLLAPSED)) {
                    toolbar.setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary));
                    toolbarIsTransparent = false;
                } else if (!toolbarIsTransparent) {
                    mCurrentState = State.EXPANDED;
                    toolbar.setBackgroundColor(ContextCompat.getColor(mContext, Android.R.color.transparent));
                    toolbarIsTransparent = true;
                }
            }
        });
    }

et le code XML est `

<Android.support.design.widget.CollapsingToolbarLayout
    Android:id="@+id/collapsible_toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

    <ImageView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:fitsSystemWindows="true"
        Android:orientation="vertical"
        Android:src="@drawable/image"
        app:layout_collapseMode="parallax" />

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"/>
</Android.support.design.widget.CollapsingToolbarLayout>

`

Answer 5

Voici ma mise en place

Code de mise en page

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appBarLayout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:fitsSystemWindows="true"
    Android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsingToolbarLayout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">


        <ImageView
            Android:id="@+id/img"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:fitsSystemWindows="true"
            Android:scaleType="centerCrop"
            Android:layout_gravity="center_horizontal|top"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:theme="@style/ThemeOverlay.AppCompat.Light" />

    </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:clipToPadding="false"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <!-- YOUR LAYOUT CODE --->

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


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

Code Java

à l'intérieur de onCreateView

if (toolbar != null) {
            ((AppCompatActivity)getActivity()).setSupportActionBar(toolbar);
            ((AppCompatActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }

// dans votre code

img.setImageResource(R.drawable.img1);
collapsingToolbarLayout.setTitle("<TITLE>");

Answer 6

Il suffit d'ajouter la balise ci-dessous dans CollapsingToolbarLayout

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

et supprimez la même balise ci-dessus dans ImageView, ce n'est pas nécessaire.

Et cela fonctionne exactement comme vous le voyez dans Google Play

J'espère que cela aide quelqu'un :)