DrawerLayout的簡單使用及側(cè)滑菜單實(shí)現(xiàn)詳解

更新時(shí)間：2023年04月11日 10:29:41 作者：向陽逐夢

這篇文章主要為大家介紹了DrawerLayout的簡單使用及側(cè)滑菜單實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1.使用的注意事項(xiàng)

本節(jié)給大家?guī)砘A(chǔ)UI控件部分的最后一個(gè)控件：DrawerLayout，官方給我們提供的一個(gè)側(cè)滑菜單控件，和上一節(jié)的ViewPager一樣，3.0以后引入，低版本使用它，需要v4兼容包，說到側(cè)滑，相信很多人都用過github上的SlidingMenu，不過好像有兩個(gè)版本，一個(gè)是單獨(dú)的，另一個(gè)需要依賴另一個(gè)開源項(xiàng)目：ActionBarSherlock；既然Google為我們提供了這個(gè)控件，為何不用咧，而且在Material Design設(shè)計(jì)規(guī)范中，隨處可見的很多側(cè)滑菜單的動(dòng)畫效果，大都可以通過Toolbar +DrawerLayout來實(shí)現(xiàn)。

1.主內(nèi)容視圖一定要是DrawerLayout的第一個(gè)子視圖
2.主內(nèi)容視圖寬度和高度需要match_parent
3.必須顯示指定側(cè)滑視圖的android:layout_gravity屬性android:layout_gravity = "start"時(shí)，從左向右滑出菜單android:layout_gravity = "end"時(shí)，從右向左滑出菜單不推薦使用left和right!!!

側(cè)滑視圖的寬度以dp為單位，不建議超過320dp(為了總能看到一些主內(nèi)容視圖)

設(shè)置側(cè)滑事件：mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener);

要說一點(diǎn)：可以結(jié)合Actionbar使用當(dāng)用戶點(diǎn)擊Actionbar上的應(yīng)用圖標(biāo)，彈出側(cè)滑菜單！這里就要通過ActionBarDrawerToggle，它是DrawerLayout.DrawerListener的具體實(shí)現(xiàn)類，我們可以重寫ActionBarDrawerToggle的onDrawerOpened()和onDrawerClosed()以監(jiān)聽抽屜拉出或隱藏事件！但是這里我們不講，因?yàn)?.0后我們使用的是Toolbar！有興趣的可以自行查閱相關(guān)文檔！

2.使用代碼示例

示例1：單個(gè)側(cè)滑菜單的實(shí)現(xiàn)

運(yùn)行效果圖：

實(shí)現(xiàn)關(guān)鍵代碼：

首先是我們的主布局，注意：最外層要是DrawerLayout哦！?。?！

activity_main.xml：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/ly_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ListView
        android:id="@+id/list_left_drawer"
        android:layout_width="180dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#080808"
        android:choiceMode="singleChoice"
        android:divider="#FFFFFF"
        android:dividerHeight="1dp" />
</android.support.v4.widget.DrawerLayout>

接著ListView的布局代碼和domain類：Item比較簡單，就不給出了，直接上中間Fragment的布局以及代碼吧！另外Adapter直接復(fù)用我們之前寫的那個(gè)可復(fù)用的MyAdapter！

fg_content.xml：

<?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="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="25sp" />
</RelativeLayout>

ContentFragment.java：

/**
 * Created by Jay on 2015/10/8 0008.
 */
public class ContentFragment extends Fragment {
    private TextView tv_content;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_content, container, false);
        tv_content = (TextView) view.findViewById(R.id.tv_content);
        String text = getArguments().getString("text");
        tv_content.setText(text);
        return view;
    }
}

最后是我們的Activity類

MainActivity.java：

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener{
    private DrawerLayout drawer_layout;
    private ListView list_left_drawer;
    private ArrayList<Item> menuLists;
    private MyAdapter<Item> myAdapter = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);
        list_left_drawer = (ListView) findViewById(R.id.list_left_drawer);
        menuLists = new ArrayList<Item>();
        menuLists.add(new Item(R.mipmap.iv_menu_realtime,"實(shí)時(shí)信息"));
        menuLists.add(new Item(R.mipmap.iv_menu_alert,"提醒通知"));
        menuLists.add(new Item(R.mipmap.iv_menu_trace,"活動(dòng)路線"));
        menuLists.add(new Item(R.mipmap.iv_menu_settings,"相關(guān)設(shè)置"));
        myAdapter = new MyAdapter<Item>(menuLists,R.layout.item_list) {
            @Override
            public void bindView(ViewHolder holder, Item obj) {
                holder.setImageResource(R.id.img_icon,obj.getIconId());
                holder.setText(R.id.txt_content, obj.getIconName());
            }
        };
        list_left_drawer.setAdapter(myAdapter);
        list_left_drawer.setOnItemClickListener(this);
    }
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        ContentFragment contentFragment = new ContentFragment();
        Bundle args = new Bundle();
        args.putString("text", menuLists.get(position).getIconName());
        contentFragment.setArguments(args);
        FragmentManager fm = getSupportFragmentManager();
        fm.beginTransaction().replace(R.id.ly_content,contentFragment).commit();
        drawer_layout.closeDrawer(list_left_drawer);
    }
}

示例2.左右兩個(gè)側(cè)滑菜單的實(shí)現(xiàn)

嗯，不知道你有沒有發(fā)現(xiàn)，從上面的DrawerLayout的布局，我們大概可以猜到，DrawerLayout 最多由三個(gè)部分組成，中間的內(nèi)容部分，左邊的側(cè)滑菜單部分，右邊的側(cè)滑菜單部分組成！下面我們來寫一個(gè)帶有兩個(gè)側(cè)滑菜單的示例！

運(yùn)行效果圖：

代碼實(shí)現(xiàn)：

首先我們創(chuàng)建兩個(gè)Fragment以及對應(yīng)的布局，他們分別是左右側(cè)滑菜單！

左邊Fragment：

布局：fg_left.xml，這里就用了一個(gè)圖片而以，點(diǎn)擊后彈出一個(gè)新的Activity；當(dāng)然你可以根據(jù)自己的需求進(jìn)行擴(kuò)展！

<?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="match_parent">
    <ImageView
        android:id="@+id/img_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/bg_menu_left"/>
</LinearLayout>

對應(yīng)的LeftFragment.java：

/**
 * Created by Jay on 2015/10/9 0009.
 */
public class LeftFragment extends Fragment{
    private DrawerLayout drawer_layout;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_left, container, false);
        ImageView img_bg = (ImageView) view.findViewById(R.id.img_bg);
        img_bg.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getActivity().startActivity(new Intent(getActivity(),OtherActivity.class));
                drawer_layout.closeDrawer(Gravity.START);
            }
        });
        return view;
    }
    //暴露給Activity，用于傳入DrawerLayout，因?yàn)辄c(diǎn)擊后想關(guān)掉DrawerLayout
    public void setDrawerLayout(DrawerLayout drawer_layout){
        this.drawer_layout = drawer_layout;
    }
}

右面的Fragment：

布局就三個(gè)按鈕，點(diǎn)擊后替換中間部分的Fragment，布局fg_right.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:background="#2F9AF2"
    android:gravity="center"
    android:orientation="vertical">
    <Button
        android:id="@+id/btn_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="菜單項(xiàng)一" />
    <Button
        android:id="@+id/btn_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="菜單項(xiàng)二" />
    <Button
        android:id="@+id/btn_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="菜單項(xiàng)三" />
</LinearLayout>

然后對應(yīng)的是RightFragment.java：

/**
 * Created by Jay on 2015/10/9 0009.
 */
public class RightFragment extends Fragment implements View.OnClickListener{
    private DrawerLayout drawer_layout;
    private FragmentManager fManager;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_right, container, false);
        view.findViewById(R.id.btn_one).setOnClickListener(this);
        view.findViewById(R.id.btn_two).setOnClickListener(this);
        view.findViewById(R.id.btn_three).setOnClickListener(this);
        fManager = getActivity().getSupportFragmentManager();
        return view;
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_one:
                ContentFragment cFragment1 = new ContentFragment("1.點(diǎn)擊了右側(cè)菜單項(xiàng)一",R.color.blue);
                fManager.beginTransaction().replace(R.id.fly_content,cFragment1).commit();
                drawer_layout.closeDrawer(Gravity.END);
                break;
            case R.id.btn_two:
                ContentFragment cFragment2 = new ContentFragment("2.點(diǎn)擊了右側(cè)菜單項(xiàng)二",R.color.red);
                fManager.beginTransaction().replace(R.id.fly_content,cFragment2).commit();
                drawer_layout.closeDrawer(Gravity.END);
                break;
            case R.id.btn_three:
                ContentFragment cFragment3 = new ContentFragment("3.點(diǎn)擊了右側(cè)菜單項(xiàng)三",R.color.yellow);
                fManager.beginTransaction().replace(R.id.fly_content,cFragment3).commit();
                drawer_layout.closeDrawer(Gravity.END);
                break;
        }
    }
    public void setDrawerLayout(DrawerLayout drawer_layout){
        this.drawer_layout = drawer_layout;
    }
}

另外還有一個(gè)中間部分填充的ContentFragment，布局：fg_content.xml如下：

<?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="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="25sp" />
</RelativeLayout>

ContentFragment.java：

public class ContentFragment extends Fragment {
    private TextView tv_content;
    private String strContent;
    private int bgColor;
    public ContentFragment(String strContent,int bgColor) {
        this.strContent = strContent;
        this.bgColor = bgColor;
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_content, container, false);
        view.setBackgroundColor(getResources().getColor(bgColor));
        tv_content = (TextView) view.findViewById(R.id.tv_content);
        tv_content.setText(strContent);
        return view;
    }
}

編寫好以后，就到我們的Activity的布局了以及Activity的代碼了：在此之前我們還需要些一個(gè)頂部條形欄的布局：

view_topbar.xml：

<?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="wrap_content"
    android:background="#DCDEDB">
    <Button
        android:id="@+id/btn_right"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:background="@drawable/btn_selctor"/>
</RelativeLayout>

然后是activity_main.xml：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <include
            android:id="@+id/topbar"
            layout="@layout/view_topbar"
            android:layout_width="wrap_content"
            android:layout_height="48dp" />
        <FrameLayout
            android:id="@+id/fly_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
    <fragment
        android:id="@+id/fg_left_menu"
        android:name="jay.com.drawerlayoutdemo2.LeftFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:tag="LEFT"
        tools:layout="@layout/fg_left" />
    <fragment
        android:id="@+id/fg_right_menu"
        android:name="jay.com.drawerlayoutdemo2.RightFragment"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:tag="RIGHT"
        tools:layout="@layout/fg_right" />
</android.support.v4.widget.DrawerLayout>

最后是MainActivity.java：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private DrawerLayout drawer_layout;
    private FrameLayout fly_content;
    private View topbar;
    private Button btn_right;
    private RightFragment fg_right_menu;
    private LeftFragment fg_left_menu;
    private FragmentManager fManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fManager = getSupportFragmentManager();
        fg_right_menu = (RightFragment) fManager.findFragmentById(R.id.fg_right_menu);
        fg_left_menu = (LeftFragment) fManager.findFragmentById(R.id.fg_left_menu);
        initViews();
    }
    private void initViews() {
        drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);
        fly_content = (FrameLayout) findViewById(R.id.fly_content);
        topbar = findViewById(R.id.topbar);
        btn_right = (Button) topbar.findViewById(R.id.btn_right);
        btn_right.setOnClickListener(this);
        //設(shè)置右面的側(cè)滑菜單只能通過編程來打開
        drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,
                Gravity.END);
        drawer_layout.setDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View view, float v) {
            }
            @Override
            public void onDrawerOpened(View view) {
            }
            @Override
            public void onDrawerClosed(View view) {
                drawer_layout.setDrawerLockMode(
                        DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END);
            }
            @Override
            public void onDrawerStateChanged(int i) {
            }
        });
        fg_right_menu.setDrawerLayout(drawer_layout);
        fg_left_menu.setDrawerLayout(drawer_layout);
    }
    @Override
    public void onClick(View v) {
        drawer_layout.openDrawer(Gravity.RIGHT);
        drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,
                Gravity.END);    //解除鎖定
    }
}

好的，至此就大功告成了~，呼呼，下面說下看代碼時(shí)可能會(huì)有的疑惑：

1. drawer_layout.openDrawer(Gravity.END);

這句是設(shè)置打開的哪個(gè)菜單START代表左邊，END代表右邊

2. drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.END);鎖定右面的側(cè)滑菜單，不能通過手勢關(guān)閉或者打開，只能通過代碼打開！即調(diào)用openDrawer方法！接著 drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.END);解除鎖定狀態(tài)，即可以通過手勢關(guān)閉側(cè)滑菜單最后在drawer關(guān)閉的時(shí)候調(diào)用：drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END);再次鎖定右邊的側(cè)滑菜單！

3. 布局代碼中的Tag屬性的作用？答：這里沒用到，在重寫DrawerListener的onDrawerSlide方法時(shí)，我們可以通過他的第一個(gè)參數(shù)drawerView，調(diào)用drawerView.getTag().equals("START")判斷觸發(fā)菜單事件的是哪個(gè)菜單！然后可以進(jìn)行對應(yīng)的操作！

以上就是DrawerLayout的簡單使用及側(cè)滑菜單實(shí)現(xiàn)詳解的詳細(xì)內(nèi)容，更多關(guān)于DrawerLayout側(cè)滑菜單的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: