天天看點
傳回

第一行代碼筆記 DrawerLayout 和NavigationView實作側滑抽屜布局

實作效果圖：

第一行代碼筆記 DrawerLayout 和NavigationView實作側滑抽屜布局

實作步驟：

第一步：先在gradle添加這兩個

//   使用nevigationview
    compile 'com.android.support:design:23.2.0'
//    實作圖檔圓形
    compile 'de.hdodenhof:circleimageview:2.1.0'

第二步

建立一個NavigationView頭部的布局檔案：在layout中new －>layout－>nav_header布局如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/head"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerInParent="true"
        android:src="@mipmap/a1" />

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="你的名字" />

    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/username"
        android:text="[email protected]" />

</RelativeLayout>

第三步

建立一個NavigationView的清單menu 先在res中建立一個menu檔案夾 new－>menu resurous file －>drawlayput_toobar.xml 示例如下

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <!--group表示一個組，checkableBehavior表示組中的菜單選項single單選-->
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            android:icon="@mipmap/ic_launcher"
            android:title="電話" />
        <item
            android:id="@+id/nav_friend"
            android:icon="@mipmap/a1"
            android:title="朋友" />
        <item
            android:id="@+id/nav_laction"
            android:icon="@mipmap/rn10"
            android:title="位置" />
        <item
            android:id="@+id/nav_mail"
            android:icon="@mipmap/rn12"
            android:title="郵箱" />
        <item
            android:id="@+id/nav_task"
            android:icon="@mipmap/rn09"
            android:title="任務" />

    </group>
</menu>

第四步

建立一個activity

import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

import com.lvyequeen.test.R;

//滑動菜單，
public class DrawerLayoutActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener, View.OnClickListener {

    private Toolbar toolbar;
    private DrawerLayout drawerlayout;
    private NavigationView nav;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer_layout);
        initView();
    }

    private void initView() {
        toolbar = ((Toolbar) findViewById(R.id.draw_toolbar));
        setSupportActionBar(toolbar);
        drawerlayout = ((DrawerLayout) findViewById(R.id.activity_drawer_layout));
//        給主界面的toolbar添加一個點選讓抽屜出現的導航按鈕
//        先擷取一個action的執行個體
        ActionBar actionBar = getSupportActionBar();
        if (null != actionBar) {
//            讓導航按鈕顯示出來
            actionBar.setDisplayHomeAsUpEnabled(true);
//            設定導航按鈕的圖示，如果不設定預設為一個傳回箭頭
//            actionBar.setHomeAsUpIndicator(R.mipmap.rn12);
        }

//      navigition的每一列
        nav = ((NavigationView) findViewById(R.id.nav));
        nav.setCheckedItem(R.id.nav_call);
        nav.setCheckedItem(R.id.nav_task);
        nav.setCheckedItem(R.id.nav_friend);
        nav.setCheckedItem(R.id.nav_laction);
        nav.setCheckedItem(R.id.nav_mail);
        nav.setNavigationItemSelectedListener(this);

//        擷取頭部控件的執行個體
        View headView = nav.getHeaderView(0);
        headView.findViewById(R.id.head).setOnClickListener(this);
        headView.findViewById(R.id.username).setOnClickListener(this);
        headView.findViewById(R.id.mail).setOnClickListener(this);

    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
//            toolbar最左邊的按鈕為HomeAsUp,他的id為android.R.id.home
            case android.R.id.home:
//                這裡讓抽屜出現
                drawerlayout.openDrawer(GravityCompat.START);
                break;
        }
        return true;
    }

    @Override
    public boolean onNavigationItemSelected(MenuItem item) {

        switch (item.getItemId()) {
            case R.id.nav_call:
                Toast.makeText(this, "電話被點選了", Toast.LENGTH_SHORT).show();

                break;
            case R.id.nav_friend:
                Toast.makeText(this, "朋友被點選了", Toast.LENGTH_SHORT).show();

                break;
            case R.id.nav_laction:
                Toast.makeText(this, "定位被點選了", Toast.LENGTH_SHORT).show();

                break;
            case R.id.nav_mail:
                Toast.makeText(this, "郵件被點選了", Toast.LENGTH_SHORT).show();

                break;
            case R.id.nav_task:
                Toast.makeText(this, "任務被點選了", Toast.LENGTH_SHORT).show();
                break;

        }

        return true;
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.head:
                Toast.makeText(this, "頭像被點選了", Toast.LENGTH_SHORT).show();

                break;
            case R.id.username:
                Toast.makeText(this, "使用者名被點選了", Toast.LENGTH_SHORT).show();

                break;
            case R.id.mail:
                Toast.makeText(this, "郵箱名被點選了", Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

布局檔案為

<?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"
    android:id="@+id/activity_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--這個為主界面-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/draw_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/Base.ThemeOverlay.AppCompat.ActionBar" />
    </FrameLayout>

    <!--這個為滑出的抽屜布局layout_gravity必須要指定，指定抽屜從那邊滑出-->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawlayout_toolbar" />

</android.support.v4.widget.DrawerLayout>
android基本控件使用 android常見功能 android常見功能，第一行代碼筆記 DrawerLayout NavigationView 抽屜布局 Android基礎
上一篇: 微型小說||手機
下一篇: BottomNavigationView使用，配合ViewPager、修改圖示大小、去掉文字等

繼續閱讀