Implementasi Navigation Drawer dengan Slide Content

Kebanyakan aplikasi biasanya menggunakan navigation drawer standar, yang dimana ketika navigation drawer itu dibuka, maka contentnya akan tertutup (berada dibelakang navigation drawer). Implementasi hal tersebut, banyak ditemukan di tutorial-tutorial atau contoh kasus. Namun, bagaimana jika anda ingin ketika navigation drawer tersebut dibuka, maka akan menggeser content yang ada (slide content).

Implementasi slide content ini pada awalnya dilakukan dengan menggunakan slide menu, padahal kita tidak ingin banyak mengubah codingan yang sudah ada atau tetap menggunakan drawerlayout yang sudah digunakan.

Untuk mengatasi hal tersebut dapat dilakukan dengan trik seperti berikut :

berikut contoh gambaran xml implementasi navigation drawer :



    

    


    

    

    

        
    

Lalu pada file java :

public class ProfileActivity extends ActionBarActivity {
    ....
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;

    RelativeLayout drawerView;
    RelativeLayout mainView;
    ....

    @Override
    protected void onCreate(Bundle savedInstanceState) {


        ............. //
        .............//
        drawerView = (RelativeLayout) findViewById(R.id.drawerView);
        mainView = (RelativeLayout) findViewById(R.id.mainView);

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.app_name, R.string.app_name) {
            public void onDrawerClosed(View view) {
                supportInvalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                supportInvalidateOptionsMenu();
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
                mainView.setTranslationX(slideOffset * drawerView.getWidth());
                mDrawerLayout.bringChildToFront(drawerView);
                mDrawerLayout.requestLayout();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

    }

}

Yang menjadi catatan adalah pada mDrawerToggle melakuan method onDrawerSlide. Silahkan mencoba

Mungkin Anda juga menyukai

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *