NavigationView實現側滑效果
阿新 • • 發佈:2019-01-28
NavigationView是design包下的一個元件使用前導design包 compile
'com.android.support:support-vector-drawable:25.3.1'
NavigationView與drawlayout一起實現側滑效果,如果有必要還可以fragment一起連用實現點選側滑列表中的項更改佈局。下面是實現效果
這裡的狀態列是透明的,這種被叫做沉浸式,不過關於沉浸式有兩種說法,沉浸式就是完成佔滿嘛。所以有的人認為沉浸式狀態列就是狀態列完全被隱藏了,還有的人認為狀態列透明也是沉浸式,關於這沒有官方說法,畢竟沉浸式這個詞都不是官方的。這裡就暫且算是沉浸式。沉浸式狀態列的設計我的方法比較簡單。就是style檔案中把狀態列背景設透明,<item
name="colorPrimaryDark">#00000000</item> 然後需要沉浸式的佈局裡面的根佈局加上這麼一句android:fitsSystemWindows="true"。
關於NavigationView實現側滑,其實也就是將這個控制元件放在drawerlayout裡面,然後android:layout_gravity="start" 設定左邊側滑,app:headerLayout="@layout/nv_head"設定頭部佈局。app:menu="@menu/nv_menu"
設定選單佈局。類檔案裡面新增各個事件監聽就可以了。
提醒一下,如果要有下劃線效果,在選單檔案中使用group分組就行了。使用詳解在程式碼裡面主佈局
nv_head.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/container" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:fitsSystemWindows="true" tools:context="com.example.design2.MainActivity"> <!--android:fitsSystemWindows="true"--> <!--將調整系統窗口布局以適應你自定義的佈局--> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" android:textSize="24sp"/> <android.support.design.widget.NavigationView android:id="@+id/nv" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/nv_head" app:menu="@menu/nv_menu"> </android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout>
<?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="200dp"
android:background="#22cccf">
<ImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>
nv_menu.xml選單佈局<?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/g1_i1"
android:title="一組一號"
android:icon="@mipmap/ic_launcher" />
<item android:id="@+id/g1_i2"
android:title="一組二號"
android:icon="@mipmap/ic_launcher"/>
</group>
<group android:id="@+id/g2">
<item android:id="@+id/g2_i1"
android:title="二組一號"
android:icon="@mipmap/ic_launcher"/>
<item android:id="@+id/g2_i2"
android:title="二組二號"
android:icon="@mipmap/ic_launcher"/>
</group>
</menu>
類檔案public class MainActivity extends AppCompatActivity {
public TextView textView;
public NavigationView navigationView;
//定義一個drawerlayout用於關閉側滑選單。
public DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView= (TextView) findViewById(R.id.textView);
drawerLayout= (DrawerLayout) findViewById(R.id.container);
navigationView= (NavigationView) findViewById(R.id.nv);
//獲取頭部佈局
View headview=navigationView.getHeaderView(0);
ImageView img= (ImageView) headview.findViewById(R.id.img);
//設定圖示顏色為原始顏色,不設定則為灰色
navigationView.setItemIconTintList(null);
//選單的點選事件
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
case R.id.g1_i1:
textView.setText(item.getTitle());
break;
case R.id.g1_i2:
textView.setText(item.getTitle());
break;
case R.id.g2_i1:
textView.setText(item.getTitle());
break;
case R.id.g2_i2:
textView.setText(item.getTitle());
break;
}
//側滑選單關閉
drawerLayout.closeDrawer(Gravity.START);
return true;
}
});
}