android - noticias - play kiosco online

Cómo crear algo similar al diseño de Play Kiosco

Question

Estoy intentando "recrear" (algo similar a) el diseño de Play Kiosco. Según la documentación, la estructura general de CoordinatorLayout es

<CoordinatorLayout>
    <!—  view that shrinks —>
    <AppBarLayout>
        <CollapsingToolbarLayout>
            …
        </CollapsingToolbarLayout>
    </AppBarLayout>

    <!— view that scrolls —>
    <SomeScrollView >
        ….
    </SomeScrollView>
</CoordinatorLayout>

Excepto cuando miro la aplicación Kiosko, lo que puedo ver es que SomeScrollView es realmente una ViewPager para TabLayout. Para mi caso particular, mi principal problema es que SomeScrollView tiene que ser una especie de contenedor de fragmentos. Entonces, básicamente, lo que quiero es

-------
|   A |
|     |
-------
|  B  |
|     |
-------

Donde A es la porción colapsable y B es la porción de desplazamiento. Nuevamente, para mi caso B es un contenedor para fragmentos dinámicos. Entonces, A tendrá un TabLayout y cuando el usuario haga clic en una pestaña, hará que cambie el fragmento visible en B. El fragmento en B contendrá un RecycleView o un TextView desplazable. (En realidad, uno de los Fragmentos es un FrameLayout que contiene tanto un RecycleView como un TextView, cualquiera de los cuales está visible a la vez)

Aquí está mi código hasta ahora:

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

    <!-- collapsing view -->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

            <include
                …
                />

            <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags=“…”
                />

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

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

    <!-- scrolling view -->
    <android.support.v4.view.ViewPager
        android:id="@+id/main_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

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

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_add"
        android:layout_margin="@dimen/minor_horizontal_margin"
        android:clickable="true"/>

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

¿Alguien me puede ayudar a completarlo?

Answer 1

Este ObservableScrollView parece ser algo similar a lo que está buscando: https://github.com/ksoichiro/Android-ObservableScrollView

Answer 2

Ahora, esta biblioteca puede replicar exactamente el diseño de Play Newstand.

Es muy fácil de usar y tiene un gran margen de personalización . Soy consciente del hecho de que no estás dispuesto a usar una biblioteca como tal, pero esto puede hacerte las cosas más fáciles.

Solo agregue esto,

compile (''com.github.florent37:materialviewpager:1.0.7@aar''){
    transitive = true
}

y agregue el diseño en XML,

<com.github.florent37.materialviewpager.MaterialViewPager
    android:id="@+id/materialViewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:viewpager_logo="@layout/header_logo"
    app:viewpager_logoMarginTop="100dp"
    app:viewpager_color="@color/colorPrimary"
    app:viewpager_headerHeight="200dp"
    app:viewpager_headerAlpha="1.0"
    app:viewpager_hideLogoWithFade="false"
    app:viewpager_hideToolbarAndTitle="true"
    app:viewpager_enableToolbarElevation="true"
    app:viewpager_parallaxHeaderFactor="1.5"
    app:viewpager_headerAdditionalHeight="20dp"
    app:viewpager_displayToolbarWhenSwipe="true"
    app:viewpager_transparentToolbar="true"
    app:viewpager_animatedHeaderImage="true"
    />

y siga las pautas de personalización en la página de la biblioteca. Ahora, si aún no está convencido de usarlo, aún puede dirigirse a él y comprobar cómo se construyó la biblioteca. Puede darle suficiente información para crearlo usted mismo (pero tomará mucho tiempo)

Espero eso ayude.

Answer 3

Este proyecto de iPaulPro debe ajustarse a sus necesidades. Para que este comportamiento funcione correctamente, los fragmentos deben usar un RecyclerView o un NestedScrollView . Por cierto, NO es una biblioteca.