Android技术知识Android开发经验谈android学习之路

NavigationView(导航抽屉)

2019-03-03  本文已影响12人  愿一切似sky

NavigationView(导航抽屉)做一个简单的侧滑菜单

实现效果

1.activity_main.xml布局如下:

<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_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:fitsSystemWindows="true"

    android:background="#fffff0"

    tools:openDrawer="start">

  <TextView

      android:textSize="20dp"

     android:id="@+id/main"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="这是一个主界面!!!"/>

    <android.support.design.widget.NavigationView

        android:layout_gravity="left"

        app:headerLayout="@layout/head"

        app:menu="@menu/menu"

        android:id="@+id/navi"

        android:layout_width="wrap_content"

        android:layout_height="match_parent" />

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

注意最外层应该使用:android.support.v4.widget.DrawerLayout

新建head.xml文件显示左侧栏头部,布局如下:

head.xml

<ImageView    

    android:id="@+id/iamgeView"    

    android:layout_gravity="center"   

    android:layout_width="wrap_content"  

    android:layout_height="wrap_content"

    android:src="@mipmap/ic_launcher"/>

    <TextView       

    android:id="@+id/text1"     

    android:layout_width="wrap_content"    

    android:layout_height="wrap_content"       

    android:text="抽屉组件的应用"     

    android:layout_gravity="center"         />    

<TextView        

     android:id="@+id/text2"    

     android:layout_width="wrap_content"   

     android:layout_height="wrap_content"      

     android:text="主标题"        

     android:layout_marginTop="20dp"         />

在res/新建menu/menu.xml用于显示菜单栏:

<注意:group为中间的分割线>

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

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:id="@+id/g1">

        <item

            android:id="@+id/item1"

            android:title="灯笼"

            android:icon="@mipmap/img1"

            ></item>

    </group>

   <group android:id="@+id/g2">

       <item

           android:id="@+id/item2"

           android:title="福字"

           android:icon="@mipmap/img2"

           ></item>

   </group>

    <group android:id="@+id/g3">

        <item

            android:id="@+id/item3"

            android:title="糖葫芦"

            android:icon="@mipmap/img3"

            ></item>

    </group>

    <group android:id="@+id/g4">

        <item

            android:id="@+id/item4"

            android:title="中国结"

            android:icon="@mipmap/img4"

            ></item>

    </group>

</menu>

在activity_main.xml文件中:

在Navigation中添加头部和菜单栏

android:layout_gravity="left"

app:headerLayout="@layout/head"

此时运行程序可以看到在主界面中可以看到效果,但是没有向左滑动的效果

在Navigation中添加android:layout_gravity="left"这句,向左滑的菜单就做好了。

但是往左滑之后图片显示确实灰色的,需要在MainActivity中添加几行代码

private NavigationView navigationView;

navigationView=findViewById( R.id.navi );

navigationView.setItemIconTintList( null );

左滑菜单图片颜色

在这之后我们需要点击例如灯笼这个按钮就可以在头部获取您点击的是灯笼这一Toast提醒

继续是在MainActivity中添加几行代码:

View view=navigationView.getHeaderView( 0 );

//从navigationView中获取头文件,给值为0,从0开始ImageView imageView=view.findViewById( R.id. iamgeView);

//利用定义的属性view,获取到navigationView视图中的头部信息中的ImageView的idimageView.setOnClickListener( new View.OnClickListener() {

public void onClick(View v) {

        Toast.makeText( MainActivity.this,"您选择的是头部",Toast.LENGTH_SHORT ).show();

    }

} );

此时点击灯笼时会弹出"您选择的是灯笼"这一提示

//利用定义的属性view,获取到navigationView视图中的头部信息中的TextView的idfinal TextView textView1=view.findViewById( R.id.text2 );

navigationView.setNavigationItemSelectedListener( new NavigationView.OnNavigationItemSelectedListener() {

public boolean onNavigationItemSelected( MenuItem item) {

textView1.setText( "您选择的是:"+"  "+item.getTitle().toString() );

return true;

    }

} );

全部MainActivity的代码:

public class MainActivity extends AppCompatActivity{

private NavigationView navigationView;

protected void onCreate(Bundle savedInstanceState) {

super.onCreate( savedInstanceState );

 setContentView( R.layout.activity_main );

navigationView=findViewById( R.id.navi );

navigationView.setItemIconTintList( null );

        View view=navigationView.getHeaderView( 0 );

//从navigationView中获取头文件,给值为0,从0开始

        ImageView imageView=view.findViewById( R.id. iamgeView);

//利用定义的属性view,获取到navigationView视图中的头部信息中的ImageView的id

        imageView.setOnClickListener( new View.OnClickListener() {

public void onClick(View v) {

                Toast.makeText( MainActivity.this,"您选择的是头部",Toast.LENGTH_SHORT ).show();

            }

        } );

//利用定义的属性view,获取到navigationView视图中的头部信息中的TextView的id

        final TextView textView1=view.findViewById( R.id.text2 );

navigationView.setNavigationItemSelectedListener( new NavigationView.OnNavigationItemSelectedListener() {

public boolean onNavigationItemSelected( MenuItem item) {

textView1.setText( "您选择的是:"+"  "+item.getTitle().toString() );

return true;

            }

        } );

此时就可以成功运行啦!

注:自己还是一个安卓实习生,很多知识点可能了解的不太全面,有不足请各位大佬指正!!!谢谢观看  哒哒哒~~~嘻嘻

项目地址:

链接:https://pan.baidu.com/s/1QDUUg-Fc9n8fDtnAQG_nVw

提取码:h0zd

上一篇下一篇

猜你喜欢

热点阅读