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.

  • Android Studio - ADB Error - "... dispositivo no autorizado. Comprueba el cuadro de diálogo de confirmación en tu dispositivo. "
  • Persa / búsqueda árabe en sqlite android da mal resultado
  • Android Lint: ignore los proyectos de biblioteca
  • No se puede iniciar la intención del servicio
  • Android studio no puede resolver com.google.android.gms.location.places.AutocompleteFilter
  • ¿Qué IDE para Phonegap? ¿Eclipse es suficiente?
  • Gracias.

  • Android: Cómo cambiar el tamaño del RadioButton
  • ¿Qué sucede detrás de las escenas cuando hago una sincronización de repo?
  • Extraer código de archivo .aar Android
  • Mover el sherlock de la barra de acción con el menú de navegación del cajón
  • ¿Cómo puedo crear una actividad visible en la parte superior de la pantalla de bloqueo
  • Proxy transparente para probar las respuestas del servidor sin conexión en Android
  • 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.