当前位置: 代码迷 >> 综合 >> SlidingPaneLayout,DrawerLayout,ActionBar,NavigationView 详解 三 NavigationView,DrawerLayout 结合ActionB
  详细解决方案

SlidingPaneLayout,DrawerLayout,ActionBar,NavigationView 详解 三 NavigationView,DrawerLayout 结合ActionB

热度:23   发布时间:2023-12-16 15:42:16.0

 NavigationView,DrawerLayout 结合ActionBar

参考:http://blog.csdn.net/Rodulf/article/details/50419899

代码:NavigationView和DrawerLayout的结合


这个结合主要分为两步:

0:实现DrawerLayout 和ActionBar的联动,在第二个子控件(就是NavigationView)里面添加一个参数android:layout_gravity="left|start"

1:NavigationView的设置。里面有两个重要的自有参数就是设置menu和headerLayout

 


具体步骤:

0:布局,里面最关键的就是android:layout_gravity="left|start"

注意NavaigationView 是design包里面的需要导入。

布局里面要要导入自定义的appNs,xmlns:app="http://schemas.android.com/apk/res-auto"



<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"  android:layout_height="match_parent"  xmlns:app="http://schemas.android.com/apk/res-auto"  android:id="@+id/drawerlayout"  tools:context=".MainActivity"><LinearLayout  android:layout_width="match_parent"  android:layout_height="match_parent"><TextView android:text="Hello World!"  android:textSize="45sp"  android:layout_width="wrap_content"  android:layout_height="wrap_content" /></LinearLayout><android.support.design.widget.NavigationView  android:layout_width="match_parent"  android:layout_height="match_parent"  android:id="@+id/navigationView"  android:layout_gravity="left|start"  app:menu="@menu/navigation_menu"  app:headerLayout="@layout/layout_menu_header"/></android.support.v4.widget.DrawerLayout>

1:然后在主函数添加ActionBar,并且设置这个联动的设置:


    mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,0,0);getSupportActionBar().setDisplayHomeAsUpEnabled(true);//设置显示为3条杠的形式  mToggle.syncState();//看 源码 ActionBarDrawerToggle有 实现 Drawerlistener所以 可以添加  mDrawerLayout.setDrawerListener(mToggle);//ActionBar来控制DrawerLayout @Override
public boolean onOptionsItemSelected(MenuItem item) {if(mToggle.onOptionsItemSelected(item)){return true;}return super.onOptionsItemSelected(item);
}
 
 

2:在res下面创建menu的文件夹,

然后在menu的文件夹下面创建navigation_menu文件

这个文件可以设置导航布局NavigationView的菜单栏,

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><group>
<item android:id="@+id/menu_1" android:title="First" android:icon="@mipmap/ic_launcher" android:checked="true"/>
<item android:id="@+id/menu_2" android:title="Second" android:icon="@mipmap/ic_launcher"/>
<item android:id="@+id/menu_3" android:title="Third" android:icon="@mipmap/ic_launcher"/>
<item android:id="@+id/menu_exit" android:title="退出" android:icon="@mipmap/ic_launcher"/></group><item android:title="小分组"><menu><item android:id="@+id/group_1" android:title="设置"></item><item android:id="@+id/group_2" android:title="我的"></item><item android:id="@+id/group_3" android:title="退出"></item></menu></item>
</menu>

在布局里面的NavigationView 里面的

app:menu="@menu/navigation_menu"
 

然后在activity 里面创建监听器来监听点击事件:

        //NavigationView 设置监听事件  mNavigationView = (NavigationView)findViewById(R.id.navigationView);mNavigationView.setNavigationItemSelectedListener(this);}//Returns:true to display the item as the selected item  //返回true,可以展示选中的 item  @Override
    public boolean onNavigationItemSelected(MenuItem item) {int itemId = item.getItemId();switch (itemId){case R.id.menu_1:Toast.makeText(this,"111",Toast.LENGTH_LONG).show();break;case R.id.menu_2:Toast.makeText(this,"222",Toast.LENGTH_LONG).show();break;case R.id.menu_3:Toast.makeText(this,"333",Toast.LENGTH_LONG).show();break;case R.id.menu_exit:finish();break;}
// return false;  return true;}

3:在layout文件夹下面创建layout_menu_header文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical" android:layout_width="match_parent"  android:layout_height="match_parent">
<ImageView  android:layout_width="100dp"  android:layout_height="100dp"  android:src="@mipmap/yoyo"/><TextView  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:text="用户名"/><TextView  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:text="高级 会员 "/>
</LinearLayout>

然后在NavigationView里面添加属性

app:headerLayout="@layout/layout_menu_header"

4:Activity的全部代码:

package tech.androidstudio.navigationviewdrawerlayoutdemo;import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {private DrawerLayout mDrawerLayout;private ActionBarDrawerToggle mToggle;private NavigationView mNavigationView;@Override
    protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mDrawerLayout = (DrawerLayout)findViewById(R.id.drawerlayout);mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,0,0);getSupportActionBar().setDisplayHomeAsUpEnabled(true);//设置显示为3条杠的形式  mToggle.syncState();//看 源码 ActionBarDrawerToggle有 实现 Drawerlistener所以 可以添加  mDrawerLayout.setDrawerListener(mToggle);//NavigationView 设置监听事件  mNavigationView = (NavigationView)findViewById(R.id.navigationView);mNavigationView.setNavigationItemSelectedListener(this);}@Override
    public boolean onOptionsItemSelected(MenuItem item) {if(mToggle.onOptionsItemSelected(item)){return true;}return super.onOptionsItemSelected(item);}//Returns:true to display the item as the selected item  //返回true,可以展示选中的 item  @Override
    public boolean onNavigationItemSelected(MenuItem item) {int itemId = item.getItemId();switch (itemId){case R.id.menu_1:Toast.makeText(this,"111",Toast.LENGTH_LONG).show();break;case R.id.menu_2:Toast.makeText(this,"222",Toast.LENGTH_LONG).show();break;case R.id.menu_3:Toast.makeText(this,"333",Toast.LENGTH_LONG).show();break;case R.id.menu_exit:finish();break;}
// return false;  return true;}//TODO 注意了这里ActionBar DrawerLayout联动,需要重写的方法是 onOptionsItemSelected而不是onContextItemSelected   /**  @Override  public boolean onContextItemSelected(MenuItem item) { // return super.onContextItemSelected(item);  Toast.makeText(this,"Toggle Clicked",Toast.LENGTH_LONG).show();  if(mToggle.onOptionsItemSelected(item)){  return true;  }  return super.onContextItemSelected(item);  }  */ }

  相关解决方案