今天我們要介紹的是NavigationView的使用,他是Design包是5.0之後出現的新特性,其包含了許多新具有特色的控件。其中還有TabLayout、RecyclerView、CardView、FloatActionButton、Snackbar、TextInputLayout,還有協調者佈局CoordinatorLayout等,有興趣的可以自己研究一下。
先看一下效果圖:
一、首先添加依賴
二、NavigationView的佈局文件,需要定義在DrawerLayout中。DrawerLayout爲根標籤。
首先看一下佈局文件 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"
android:fitsSystemWindows="true"
tools:context="com.example.administrator.navigationviewdemo.MainActivity">
<RelativeLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/baby"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="afanbaby"
android:textColor="#B0E2FF"
android:textSize="40sp" />
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:fitsSystemWindows="true"
android:scrollbars="none"
app:headerLayout="@layout/head_view"
app:menu="@menu/menu_navigation_main" />
</android.support.v4.widget.DrawerLayout>
1.介紹NavigationView屬性:
//顯示
NavigationView從哪邊彈出(這裏是左邊彈出)
android:layout_gravity="left"
//添加一個頭佈局(xml文件,這裏我們的頭部中顯示了一張圖片)
app:headerLayout="@layout/head_view"
//NavigationView中的每一個item,它是一個menu.
app:menu="@menu/menu_navigation_main"
三、head_view.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:id="@+id/head_view"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="@drawable/head_iv" />
</LinearLayout>
四、menu_navigation_main.xml(menu文件):
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--,想在NavigationView的item之間添加上一條分隔線呢,只需要在menu中將相應的item放到一個group中,並給該group取一個id即可-->
<item
android:id="@+id/item1"
android:icon="@mipmap/ic_launcher"
android:title="文件" />
<group android:id="@+id/item12">
<item
android:id="@+id/item2"
android:icon="@mipmap/ic_launcher"
android:title="錢包" />
</group>
<item
android:id="@+id/item3"
android:icon="@mipmap/ic_launcher"
android:title="相冊" />
<item
android:id="@+id/item4"
android:icon="@mipmap/ic_launcher"
android:title="收藏" />
<item
android:icon="@mipmap/ic_launcher"
android:title="聊天工具">
<menu>
<group android:checkableBehavior="single">
<item
android:id="@+id/item5"
android:icon="@mipmap/ic_launcher"
android:title="qq" />
<item
android:id="@+id/item6"
android:icon="@mipmap/ic_launcher"
android:title="微信" />
<item
android:id="@+id/item7"
android:icon="@mipmap/ic_launcher"
android:title="陌陌" />
</group>
</menu>
</item>
<item
android:icon="@mipmap/ic_launcher"
android:title="其他操作">
<menu>
<group android:checkableBehavior="single">
<item
android:id="@+id/item8"
android:icon="@mipmap/ic_launcher"
android:title="打電話" />
<item
android:id="@+id/item9"
android:icon="@mipmap/ic_launcher"
android:title="發短信" />
<item
android:id="@+id/item10"
android:icon="@mipmap/ic_launcher"
android:title="打開相機" />
<item
android:id="@+id/item11"
android:icon="@mipmap/ic_launcher"
android:title="打開文件" />
</group>
</menu>
</item>
</menu>
五、MainActivity中使用:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private NavigationView navigationView;
private DrawerLayout drawerLayout;
private View headView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
navigationView = (NavigationView) findViewById(R.id.navigationView);
//去掉navigationView的滾動條
disableNavigationViewScrollbars(navigationView);
//添加頭佈局
headView = navigationView.getHeaderView(0);
headView.setOnClickListener(this);
drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
//設置menu中的圖標是正常的顏色
navigationView.setItemIconTintList(null);
// 這裏我們可以設置導航菜單寬度(設置爲屏幕的二分之一)
// ViewGroup.LayoutParams params = navigationView.getLayoutParams();
// params.width = getResources().getDisplayMetrics().widthPixels * 1 / 2;
// navigationView.setLayoutParams(params);
//navigationView的菜單條目的點擊監聽
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.item1:
Toast.makeText(MainActivity.this, "點擊了一個item", Toast.LENGTH_SHORT).show();
break;
case R.id.item2:
Toast.makeText(MainActivity.this, "點擊了二個item", Toast.LENGTH_SHORT).show();
break;
case R.id.item3:
Toast.makeText(MainActivity.this, "點擊了三個item", Toast.LENGTH_SHORT).show();
break;
case R.id.item4:
Toast.makeText(MainActivity.this, "點擊了四個item", Toast.LENGTH_SHORT).show();
break;
case R.id.item5:
Toast.makeText(MainActivity.this, "點擊了五個item", Toast.LENGTH_SHORT).show();
break;
case R.id.item6:
Toast.makeText(MainActivity.this, "點擊了六個item", Toast.LENGTH_SHORT).show();
break;
case R.id.item7:
Toast.makeText(MainActivity.this, "點擊了七個item", Toast.LENGTH_SHORT).show();
break;
case R.id.item8:
Toast.makeText(MainActivity.this, "點擊了八個item", Toast.LENGTH_SHORT).show();
break;
case R.id.item9:
Toast.makeText(MainActivity.this, "點擊了九個item", Toast.LENGTH_SHORT).show();
break;
case R.id.item10:
Toast.makeText(MainActivity.this, "點擊了十個item", Toast.LENGTH_SHORT).show();
break;
case R.id.item11:
Toast.makeText(MainActivity.this, "點擊了十一個item", Toast.LENGTH_SHORT).show();
break;
}
//設置item選中
item.setCheckable(true);
//關閉抽屜,或者drawerLayout.closeDrawer(navigationView);
drawerLayout.closeDrawers();
return true;
}
});
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.head_view:
Toast.makeText(MainActivity.this, "點擊了頭佈局", Toast.LENGTH_SHORT).show();
//關閉抽屜,或者drawerLayout.closeDrawer(navigationView);
drawerLayout.closeDrawers();
break;
}
}
//去掉navigationView的滾動條(這個滾動條不在NavigationView中,而是在他的child—NavigationMenuView中,所以解決辦法就是對NavigationView調用 下面這個方法:)
private void disableNavigationViewScrollbars(NavigationView navigationView) {
if (navigationView != null) {
NavigationMenuView navigationMenuView = (NavigationMenuView) navigationView.getChildAt(0);
if (navigationMenuView != null) {
navigationMenuView.setVerticalScrollBarEnabled(false);
}
}
}
}
demo下載地址
本人菜鳥一個,有什麼不對的地方希望大家指出評論,大神勿噴,希望大家一起學習進步!