java - funciona - noscript firefox

Barra lateral de Android como Facebook o Firefox

Question

Esta pregunta ya tiene una respuesta aquí:

• Diapositiva de estilo de Facebook de Facebook 25 respuestas

Con la nueva aplicación de Facebook, viene con una barra lateral oculta que me encantaría usar algo así en mis aplicaciones. Parece un poco como las barras laterales que Firefox Mobile tiene ...

¿Tiene alguna idea de cómo implementarlo además de volver a implementar ViewPager? He intentado con un HorizontalScrollView pero eso también llevaría a la reimplementación de ...

No veo otra forma que no sean estas dos ... ¿alguna sugerencia?

Gracias por adelantado

Answer 1

Hice algo como lo siguiente:

Abajo está mi código para algo como la barra de menú lateral de Facebook

1. Puse 2 vistas superpuestas en un diseño de marco. La vista inferior es el menú, la vista superior es el cuerpo del contenido.
2. Y pongo el cuerpo del contenido en una vista de desplazamiento horizontal. También coloco una vista a la izquierda del cuerpo del contenido en la vista de desplazamiento horizontal. Y establece el fondo de la vista como transparente.
3. Luego, desplácese al contenido del cuerpo al principio. Así que la barra de menú lateral está bloqueada por el cuerpo del contenido.
4. Cuando hago clic en un botón para mostrar el menú, me desplazo la vista de desplazamiento horizontal para mostrar el marcador de posición transparente. Luego aparecerá el menú, ya que ahora está debajo del marcador de posición transparente.

No utilicé XML para la interfaz. Creo todo en el código de abajo. Creo que debería ser fácil de leer y poner en tu eclipse.

package com.chaoshen.androidstudy.facebooklikesidemenubar;


import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.Display;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity{

    private boolean Menu_Displayed=false;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Display display = getWindowManager().getDefaultDisplay();
        final int width = display.getWidth();

        // menu:
        LinearLayout li_menu = new LinearLayout(this);
        li_menu.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
        li_menu.setOrientation(1);//1 is vertical
        li_menu.setBackgroundColor(Color.GREEN);

        Button btn1 = new Button(this);
        btn1.setText("button 1");
        btn1.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  

        li_menu.addView(btn1);

        //body:
        final HorizontalScrollView hsv = new HorizontalScrollView(this){
            @Override
            // do not let hsv consume the click itself. Then the view under the hsv will also consume the click
            //so that the menu will be clicked
            //when menu is not showed up, let hsv be the only view to consume the click.
            //so that the menu will not be clicked
            public boolean onTouchEvent(MotionEvent ev) {
                if(Menu_Displayed){
                    return false;
                }
                else{
                    return true;
                }
            }
        };
        hsv.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
        hsv.setBackgroundColor(Color.TRANSPARENT);
        hsv.setHorizontalFadingEdgeEnabled(false);
        hsv.setVerticalFadingEdgeEnabled(false);

        final LinearLayout li_body = new LinearLayout(this);
        li_body.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.FILL_PARENT));  
        li_body.setOrientation(0);//0 is horizantal
        li_body.setBackgroundColor(Color.TRANSPARENT);

        hsv.addView(li_body);

        //body: place holder transparent
        TextView placeholder = new TextView(this);
        placeholder.setTextColor(Color.TRANSPARENT); 
        placeholder.setLayoutParams(new LayoutParams(width-100, LayoutParams.FILL_PARENT));  
        placeholder.setVisibility(View.INVISIBLE);
        li_body.addView(placeholder);

        //body: real content
        LinearLayout li_content = new LinearLayout(this);
        li_content.setLayoutParams(new LayoutParams(width, LayoutParams.FILL_PARENT));  
        li_content.setOrientation(1);//1 is vertical
        li_content.setBackgroundColor(Color.CYAN);

        TextView tv1 = new TextView(this);  
        tv1.setText("txt 1");  
        tv1.setTextSize(40);  
        tv1.setTextColor(Color.BLACK);  

        TextView tv2 = new TextView(this);  
        tv2.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));  
        tv2.setTextSize(50);  
        tv2.setText("txt 2");  
        tv2.setTextColor(Color.WHITE);  

        //use this button to scroll
        Button btn_showMenu = new Button(this);
        btn_showMenu.setText("Menu");
        btn_showMenu.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        btn_showMenu.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                hsv.post(new Runnable() {

                    @Override
                    public void run() {
                        if(Menu_Displayed){
                            hsv.smoothScrollTo(width-100, 0);
                        }
                        else{
                            hsv.smoothScrollTo(0, 0);
                        }
                        Menu_Displayed = !Menu_Displayed;
                    }
                });
            }
        });

        li_content.addView(tv1);
        li_content.addView(tv2);
        li_content.addView(btn_showMenu);

        li_body.addView(li_content);

        //add menu and body in to frame
        FrameLayout mainFrame = new FrameLayout(this);  
        mainFrame.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
        mainFrame.addView(li_menu);  
        mainFrame.addView(hsv);  

        //scroll to the body real content to block the menu
        hsv.post(new Runnable() {

            @Override
            public void run() {
                hsv.scrollBy(width-100, 0);             
            }
        });

        setContentView(mainFrame);         
    }
}

Answer 2

Puedes probar esto. Buen ejemplo. Compruebe la clase de control deslizante ..

https://github.com/gitgrimbo/android-sliding-menu-demo

Answer 3

Se me ocurrió una solución ... No sé si es perfecta pero está funcionando bien.

Entonces, lo que hice fue un solo FrameLayout con los dos diseños agrupados y luego animé el diseño superior para que se deslice hacia la derecha de la pantalla (solo tiene que llamar a slideTo o scrollBy. ¡Y ​​básicamente es eso! ! (aunque el código no es muy bonito: P)

EDITAR:

Algunos ejemplos de código.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FFF" >

        <include
        android:id="@+id/menu_layout"
            layout="@layout/menu_list"
            android:visibility="invisible"/>

        <include
            android:id="@+id/news_list_parent"
            layout="@layout/main_news_list" 
            />

</FrameLayout>

Este es el layout xml, bastante simpe. Los .xml incluidos son LinearLayouts simples con un encabezado y una vista de lista.

La "magia" pasa en la animación:

protected void applyTransformation(float interpolatedTime, Transformation t) {
    int newOffset;
    if(expanded) {
        newOffset = 0;
        newOffset = (int)(endOffset*(1-interpolatedTime));
    } else {
        newOffset = (int)(endOffset*(interpolatedTime));
    }
    view.scrollTo(-newOffset, 0);
}

El endOffset es el movimiento de destino. Lo configuro antes de comenzar la animación, y la vista que quiero animar (en este caso es la vista con id = news_list_parent) está configurada en el constructor.

Pero solo para entender cómo funciona eso, haga un botón y su oyente haría algo como esto:

if(viewBeneath.getVisibility() == View.INVISIBLE) {
    viewBeneath.setVisibility(View.Visible);
    viewToSlide.slideTo(-(width-50), 0);
}

Y, finalmente, anule el botón Atrás para hacer lo opuesto al botón

if(viewBeneath.getVisibility() == View.VISIBLE) {
    viewToSlide.slideTo(0, 0);
    viewBeneath.setVisibility(View.Visible);
}

Lee esto como pseudo-código =) Esto es lo que hice al principio, ese código se pierde: P

Answer 4

También he creado mi propia solución para esto, ya que muchas soluciones comunes parecían no funcionar en una versión anterior de Android o carecían de instrucciones adecuadas sobre cómo hacer que funcionara.

Mi solución tiene las siguientes características:

• Proporciona soporte para deslizar una vista para revelar un menú que se encuentra debajo de él
• El menú puede ser cualquier vista personalizada.
• La vista anterior puede ser cualquier vista personalizada también.
• Compatible con versiones antiguas de Android (probado para funcionar al menos en Android 2.2)

La solución utiliza un diseño personalizado, llamado SlidingMenuLayout , al que se espera que agregue 2 vistas. La primera vista que agrega es el menú, la segunda es la vista principal.

La forma más sencilla de agregar el diseño a su proyecto existente es anular el método setContentView() su Actividad:

@Override
public void setContentView(View view) {

    SlidingMenuLayout layout = new SlidingMenuLayout(this);
    layout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT, 0.0F));

    layout.addView(new MenuView(this));

    layout.addView(view);

    super.setContentView(layout);
}

En este ejemplo, MenuView es la vista que realmente mostrará el menú. Depende de usted implementar esta vista.

Finalmente, puede agregar un botón (normalmente en la esquina superior izquierda de su vista principal), que llama a openMenu() o closeMenu() en el diseño, según corresponda.

El código para SlidingMenuLayout se encuentra en la page proyecto GitHub: