Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Android CollapsingToolbarLayout con vista personalizada

Estoy siguiendo el ejemplo de Cheesesquare para entender la nueva biblioteca de materiales de diseño.

Me pregunto si hay una manera de utilizar una opinión de encargo (como Telegram) con ImageView, título y subtítulo en vez del título simple proporcionado por el widget de CollapsingToolbarLayout.

Gracias.

  • Herramientas para crear AnimatedVectorDrawable
  • Android Material Design: No se pudo encontrar el estilo 'toolbarStyle' en el tema actual
  • Cómo cambiar el color del icono de la hamburguesa en el diseño del material cajón de navegación
  • Implementación de Gmail Tablet como Gaveta de navegación
  • ¿Cómo mantener un único modo checkableBehavior en el menú del cajón para NavigationView cuando agregamos sección?
  • Cómo agregar un elemento de submenú mediante programación al nuevo diseño de material android support library
  • Cómo hacer el nuevo efecto de paralaje de PlayStore
  • Animación personalizada para el cajón de navegación abierta y cerrada
  • 3 Solutions collect form web for “Android CollapsingToolbarLayout con vista personalizada”

    Tuve el mismo problema y pasar muchas horas tratando de encontrar una solución. Mi solución fue agregar las vistas de colapso (ImageView y TextView) dentro de la CollapsingToolbarLayout y luego manejar la transición en el código. De esta manera es más flexible y más simple que extenderse desde CollapsingToolbarLayout.

    Primero tendrás que agregar tus vistas dentro del CollapsingToolbarLayout con las propiedades de paralaje:

      <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop:"80dp" android:src="@drawable/icon" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.8"/> //set vertical transition here 

    A continuación, establezca la escala de las vistas con la ayuda de un OnOffsetchangeListner :

      private static final float SCALE_MINIMUM=0.5f; appBarLayout.setOnWorkingOffsetChange(new ControllableAppBarLayout.OnWorkingOffsetChange() { @Override public void onOffsetChange(int offSet, float collapseDistance) { imageView.setScaleX(1 + (collapseDistance * SCALE_MINIMUM)); imageView.setScaleY(1 + (collapseDistance * SCALE_MINIMUM)); textView.setScaleX(1 + (collapseDistance * SCALE_MINIMUM)); textView.setScaleY(1 + (collapseDistance * SCALE_MINIMUM)); // You can also setTransitionY/X, setAlpha, setColor etc. } }); 

    De alguna manera el offsetChangedListener defecto no funcionó correctamente para mí (probablemente todavía debería probarlo con el oyente predeterminado primero), así que utilicé el ControllableAppBarLayout de https://gist.github.com/blipinsk/3f8fb37209de6d3eea99 y agregó lo siguiente:

     private OnWorkingOffsetChange onWorkingOffsetChange; @Override public void onOffsetChanged(AppBarLayout appBarLayout, int i) { if (!isInEditMode()) { onWorkingOffsetChange.onOffsetChange(i, (float) i / appBarLayout.getTotalScrollRange()); } } public void setOnWorkingOffsetChange(OnWorkingOffsetChange listener) { this.onWorkingOffsetChange = listener; } public interface OnWorkingOffsetChange { void onOffsetChange(int offSet, float collapseDistance); } 

    El único problema es que deberías configurar app:contentScrim="#00000000" (transparente) para tu CollapsingToolbarLayout , por lo que tus vistas seguirán visibles cuando la barra de herramientas se colapsa. Si realmente necesita el efecto de fondo colapsado estoy seguro de que podría "falsificar" esto al establecer el alfa de un ImageView de fondo en el OffsetChangeListener . 😉

    Desde el propio widget no parece haber una forma de habilitarlo directamente, como si fuera posible agregar vistas personalizadas a la barra de herramientas.

    Lo que podría intentar hacer sin embargo, está abierto el origen de la CollapsingToolbarLayout.class y compruebe cómo el CollapsingTextHelper.class se utiliza para tener el conjunto de títulos. Podría intentar crear su propio widget extendiéndolo desde el CollapsingToolbarLayout .

    Estos vínculos pueden ayudarle a crear componentes / vistas personalizadas si no los ha creado antes: vistas personalizadas , componentes personalizados

    No he probado esto todavía, pero es realmente algo que estaba pensando en tratar de lograr una solución similar como usted está buscando. Pasos I tihkn Seguiría, hasta ahora:

    1. Crear atributos personalizados para la configuración de subtítulos en attrs.xml
    2. Cree su propio MyCollapsingToolbarLayout extendiendo el original.
    3. Asegúrese de llamar a super en los constructores, por lo que el componente original se mantendrá intacto.
    4. Cree un subtitleTextHelper agregando un nuevo CollapsingTextHelper a su componente.
    5. onDraw para dibujar tu subtítulo.
    6. Actualice el diseño que contiene su CollapingsToolbarLayout con los atributos de sus subtítulos (estilo predeterminado y tal, tal vez un texto de subtítulo fijo).
    7. Aplique los cambios en la Activity contiene su CollapsingToolbar . (Convierta CollapsingToolbarlayout a MyCollapingsToolbarLayout , establezca subtítulos, ajustes personalizados adicionales, etc.).
    8. Cruza los dedos, prueba.

    Voy a echarle un vistazo ahora.

    Va a editar la respuesta de Christopher un poco para mostrar cómo puede lograr que su vista personalizada no desaparezca al colapsar:

    Primero tendrás que agregar tus vistas dentro del CollapsingToolbarLayout con las propiedades de paralaje:

      <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop:"80dp" android:src="@drawable/icon" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.8"/> //set vertical transition here 

    En su lugar, agregue la vista personalizada de forma programática y no desaparecerá al colapsar. Por ejemplo, aquí hay una vista que contiene un título y un subtítulo:

      final FrameLayout frameLayout = new FrameLayout(mActivity); FrameLayout.LayoutParams frameLayoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT); frameLayout.setLayoutParams(frameLayoutParams); // Create new LinearLayout final LinearLayout linearLayout = new LinearLayout(mActivity); frameLayoutParams =new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, dpToPixels(78)); frameLayoutParams.gravity = Gravity.BOTTOM; linearLayout.setLayoutParams(frameLayoutParams); linearLayout.setOrientation(LinearLayout.VERTICAL); // Add textviews final TextView textView1 = new TextView(mActivity); LinearLayout.LayoutParams linearLayoutParams =new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); frameLayoutParams.gravity = Gravity.BOTTOM; textView1.setLayoutParams(linearLayoutParams); textView1.setText("Title"); textView1.setTextColor(ContextCompat.getColor(mActivity, R.color.colorWhite)); textView1.setTextSize(TypedValue.COMPLEX_UNIT_SP, 40); linearLayout.addView(textView1); final TextView textView2 = new TextView(mActivity); linearLayoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); textView2.setLayoutParams(linearLayoutParams); textView2.setText("Subtitle"); textView2.setTextColor(ContextCompat.getColor(mActivity, R.color.colorWhite)); textView2.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20); linearLayout.addView(textView2); frameLayout.addView(linearLayout); collapsingToolbar.addView(frameLayout); final float SCALE_MIN=0.4f; AppBarLayout appBarLayout = (AppBarLayout) mActivity.findViewById(R.id.appBarLayout); appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int offSet) { float collapsedRatio = (float) offSet / appBarLayout.getTotalScrollRange(); linearLayout.setScaleX(1 + (collapsedRatio * SCALE_MIN)); linearLayout.setScaleY(1 + (collapsedRatio * SCALE_MIN)); FrameLayout.LayoutParams frameLayoutParams =new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, dpToPixels(78)); frameLayoutParams.gravity = Gravity.BOTTOM; frameLayoutParams.setMargins(Math.round(dpToPixels(48) * (1+collapsedRatio)), 0, 0, Math.round(dpToPixels(15) * collapsedRatio)); linearLayout.setLayoutParams(frameLayoutParams); // You can also setTransitionY/X, setAlpha, setColor etc. } }); 

    /////

     float lastCollapsedRatio = -2; 

    ////

     private int dpToPixels(int padding_in_dp){ final float scale = getResources().getDisplayMetrics().density; int padding_in_px = (int) (padding_in_dp * scale + 0.5f); return padding_in_px; } 
    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.