使用按钮创建侧边栏导航抽屉

时间:2017-01-02 06:49:40

标签: android android-layout

我尝试创建一个侧边栏导航抽屉,当用户点击该按钮时,该抽屉会滑动。我试图将此功能添加到我现有的布局中,但我遇到了问题。正如您在我的布局中看到的,我创建了一个菜单资源文件并包含在我的主布局中但它无法正常工作。任何帮助,将不胜感激。

这是我的主要布局

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"

    >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:background="?attr/colorPrimaryDark"
        android:layout_width="match_parent"
        android:layout_height="113dp"
        android:fitsSystemWindows="true"
        app:popupTheme="@style/Theme.AppCompat.DayNight.DarkActionBar"
        app:menu="@menu/navigation_menu"
        android:layout_gravity="start"
        />

</android.support.design.widget.AppBarLayout>

<FrameLayout
    android:id="@+id/frameLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <EditText
            android:id="@+id/search_box"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:paddingLeft="8dp"
            android:paddingBottom="12dp"
            android:paddingTop="12dp"
            android:textSize="14sp"
            android:hint="@string/search_hint"
            android:background="@drawable/bottom_border"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />

        <include
            layout="@layout/item_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/relativeAd"
            android:layout_below="@+id/search_box"
            />

        <LinearLayout
            android:id="@+id/relativeAd"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@color/divider"
            android:gravity="center"
            android:orientation="vertical">
        </LinearLayout>
    </RelativeLayout>
</FrameLayout>

<android.support.design.widget.FloatingActionButton
    android:layout_width="50dp"
    android:layout_height="53dp"
    android:clickable="true"
    app:fabSize="mini"
    app:srcCompat="@drawable/menu_1"
    android:id="@+id/floatingActionButton9"
    app:backgroundTint="?attr/actionModeSplitBackground"
    app:rippleColor="@android:color/holo_red_dark"
    android:layout_gravity="bottom|left"
    app:layout_anchor="@+id/frameLayout"
    app:layout_anchorGravity="center_vertical|right" />

这是我的布局截图

我现有的布局

enter image description here

2 个答案:

答案 0 :(得分:0)

试一试。 这是一个导航抽屉的代码,使用按钮打开和关闭并同时滑动。

以下是设置导航抽屉的布局代码。 xml 文件代码:

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start"
    android:theme="@style/NavigationTheme">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context="com.whiskey.servicedog.TrainingProgrammes">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.AppBarLayout>

        <include layout="@layout/content_main" />

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/menu_navigation"
        android:background="@drawable/nav_bg"
        android:theme="@style/NavigationViewStyle"
        app:itemTextColor="@color/White"
        app:itemIconTint="@color/White"

        />

</android.support.v4.widget.DrawerLayout>

现在 java 代码,用于设置导航抽屉。

NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(MenuItem menuItem) {

        int id = menuItem.getItemId();

        switch (id) {
            case R.id._aboutus:

                Intent aboutusintent = new Intent(TrainingProgrammes.this, AboutUS.class);
                aboutusintent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(aboutusintent);
                break;
            case R.id._trainingprog:
                Toast.makeText(getApplicationContext(), "Training Programmes", Toast.LENGTH_SHORT).show();
                drawerLayout.closeDrawers();

                break;
            case R.id._taskhis:
                Intent historyintent = new Intent(TrainingProgrammes.this, TaskHistory.class);
                historyintent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(historyintent);
                break;
            case R.id.taskrem:
                Intent newintent = new Intent(TrainingProgrammes.this, TaskReminders.class);
                newintent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(newintent);

                break;
            case R.id.settingschange:
                Intent settingIintent = new Intent(TrainingProgrammes.this, Settings.class);
                settingIintent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(settingIintent);

                break;

            case R.id.help_btn:
                Intent helpIintent = new Intent(TrainingProgrammes.this, Help.class);
                helpIintent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(helpIintent);

                break;
            case R.id.logout:
                Intent intent = new Intent(TrainingProgrammes.this, MainActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);

                SharedPreferences preferences = getSharedPreferences("MyPREFERENCES", Context.MODE_PRIVATE);
                if (preferences.contains("password")) {
                    SharedPreferences.Editor editor = preferences.edit();
                    editor.remove("password");
                    editor.commit();
                }
                finish(); // Call once you redirect to another activity.


        }
        return true;
    }
});

希望这会帮助你。 以下是上述工作代码的屏幕截图。 enter image description here

答案 1 :(得分:0)

xml下面添加Drawer Layoutinclude您之前的layout <include layout="@layout/content_home_page" />替换此

将其命名为activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:openDrawer="start">

    <!--Main Content Goes Here-->
    <include layout="@layout/content_home_page" />

    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header_main"
        app:itemIconTint="@color/colorPrimary"
        app:itemTextColor="@color/colorPrimary"
         app:menu="@menu/navigation_menu"

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/nav_header_height"
            android:background="@drawable/side_menu_header_bg">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="70dp"
                    android:layout_height="70dp"
                    android:src="@drawable/user_placeholder" />

                <com.sslwireless.gulshanclub.Fonts.RobotoCondensedBold
                    android:id="@+id/memberFullName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="Mr. John Doe"
                    android:textColor="@color/colorWhite"
                    android:textSize="18sp" />

                <com.sslwireless.gulshanclub.Fonts.RobotoCondensedRegular
                    android:id="@+id/memberEmail"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="john.doe@mail.com"
                    android:textColor="@color/colorWhite"
                    android:textSize="16sp" />

            </LinearLayout>

        </RelativeLayout>

    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

在您的活动中:

private DrawerLayout drawer;
private NavigationView navigationView;

@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

     drawer = (DrawerLayout) findViewById(R.id.drawerLayout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.setDrawerListener(toggle);
        toggle.syncState();

        navigationView = (NavigationView) findViewById(R.id.navigationView);
        navigationView.setNavigationItemSelectedListener(this);
}

@Override
    public void onBackPressed() {
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }
按钮内的

单击侦听器单击事件,

致电drawer.openDrawer(GravityCompat.START);