Implementação de Menu Deslizante no Android

Para criar um menu lateral deslizante similar ao QQ, utilizamos o componente HorizontalScrollView. Este elemanto permite a navegação horizontal com gestos de arrasto.

Layout do menu (menu_esquerdo.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/fundo_menu"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">
        
        <ImageView
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:src="@drawable/icone_perfil"/>
            
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Perfil"
            android:textColor="#FFFFFF"
            android:layout_marginStart="16dp"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">
        
        <ImageView
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:src="@drawable/icone_config"/>
            
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Configurações"
            android:textColor="#FFFFFF"
            android:layout_marginStart="16dp"/>
    </LinearLayout>
</LinearLayout>

Layout principal (activity_principal.xml):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.exemplo.menu.MenuDeslizante
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            
            <include layout="@layout/menu_esquerdo"/>
            
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/fundo_principal"/>
        </LinearLayout>
    </com.exemplo.menu.MenuDeslizante>
</RelativeLayout>

Classe personalizada MenuDeslizante:

package com.exemplo.menu;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

public class MenuDeslizante extends HorizontalScrollView {

    private LinearLayout container;
    private LinearLayout menu;
    private int larguraTela;
    private int larguraMenu;
    private int paddingMenu = 50;
    private boolean configurado = false;

    public MenuDeslizante(Context context, AttributeSet attrs) {
        super(context, attrs);
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics metrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(metrics);
        larguraTela = metrics.widthPixels;
        paddingMenu = (int) TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP, 
            paddingMenu, 
            getResources().getDisplayMetrics()
        );
    }

    @Override
    protected void onMeasure(int widthSpec, int heightSpec) {
        super.onMeasure(widthSpec, heightSpec);
        
        if(!configurado) {
            container = (LinearLayout) getChildAt(0);
            menu = (LinearLayout) container.getChildAt(0);
            larguraMenu = larguraTela - paddingMenu;
            menu.getLayoutParams().width = larguraMenu;
            container.getChildAt(1).getLayoutParams().width = larguraTela;
            configurado = true;
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if(changed) this.scrollTo(larguraMenu, 0);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if(event.getAction() == MotionEvent.ACTION_UP) {
            int deslocamento = getScrollX();
            if(deslocamento > larguraMenu / 2) {
                this.smoothScrollTo(larguraMenu, 0);
            } else {
                this.smoothScrollTo(0, 0);
            }
            return true;
        }
        return super.onTouchEvent(event);
    }
}

Activity principal:

public class PrincipalActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_principal);
    }
}

Tags: android HorizontalScrollView SlidingMenu layout

Publicado em 6-12 01:15 por Thomas