1. 程式人生 > >NavigationView實現側滑效果

NavigationView實現側滑效果

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分組就行了。使用詳解在程式碼裡面
主佈局
<?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>
nv_head.xml頭部佈局
<?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;
            }
        });
    }