DrawerLayout(官方側(cè)滑菜單)的簡(jiǎn)單使用

本節(jié)引言:

本節(jié)給大家?guī)砘A(chǔ)UI控件部分的最后一個(gè)控件:DrawerLayout题翻,官方給我們提供的一個(gè)側(cè)滑菜單 控件热康,和上一節(jié)的ViewPager一樣亚茬,3.0以后引入铸题,低版本使用它,需要v4兼容包翰萨,說到側(cè)滑脏答,相信 很多人都用過github上的SlidingMenu

不過說起來SlidingMenu和官方的Drawerlayout的區(qū)別,小編這里只能說各有千秋吧亩鬼,如果論穩(wěn)定性殖告,當(dāng)然是官方的控件了,如果說效果方面雳锋,當(dāng)然是開源庫(kù)的SlidingMenu當(dāng)仁不讓了

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

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!!!

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

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

6.要說一點(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:?jiǎn)蝹€(gè)側(cè)滑菜單的實(shí)現(xiàn)
運(yùn)行效果圖

實(shí)現(xiàn)關(guān)鍵代碼
首先是我們的主布局虑凛,注意:最外層要是DrawerLayout哦1纭!I5延柠!,DrawerLayout里面的布局可以自定義锣披,但是一定要有個(gè)布局是android:layout_gravity="start"

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比較簡(jiǎn)單捕仔,就不給出了匕积,直接上中間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以及對(duì)應(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>

對(duì)應(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>

然后對(duì)應(yīng)的是RightFragment.java:

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:

ContentFragment.java:
```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代表右邊
    1. drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.END); 鎖定右面的側(cè)滑菜單晒他,不能通過手勢(shì)關(guān)閉或者打開吱型,只能通過代碼打開!即調(diào)用openDrawer方法陨仅! 接著 drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.END); 解除鎖定狀態(tài)津滞,即可以通過手勢(shì)關(guān)閉側(cè)滑菜單 最后在drawer關(guān)閉的時(shí)候調(diào)用: drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END); 再次鎖定右邊的側(cè)滑菜單!
    1. 布局代碼中的Tag屬性的作用灼伤? 答:這里沒用到触徐,在重寫DrawerListener的onDrawerSlide方法時(shí),我們可以通過他的第一個(gè) 參數(shù)drawerView狐赡,調(diào)用drawerView.getTag().equals("START")判斷觸發(fā)菜單事件的是哪個(gè) 菜單撞鹉!然后可以進(jìn)行對(duì)應(yīng)的操作!
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市鸟雏,隨后出現(xiàn)的幾起案子享郊,更是在濱河造成了極大的恐慌,老刑警劉巖孝鹊,帶你破解...
    沈念sama閱讀 206,839評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件炊琉,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡又活,警方通過查閱死者的電腦和手機(jī)苔咪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來柳骄,“玉大人团赏,你說我怎么就攤上這事∧褪恚” “怎么了舔清?”我有些...
    開封第一講書人閱讀 153,116評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)可柿。 經(jīng)常有香客問我鸠踪,道長(zhǎng),這世上最難降的妖魔是什么复斥? 我笑而不...
    開封第一講書人閱讀 55,371評(píng)論 1 279
  • 正文 為了忘掉前任营密,我火速辦了婚禮,結(jié)果婚禮上目锭,老公的妹妹穿的比我還像新娘评汰。我一直安慰自己,他們只是感情好痢虹,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評(píng)論 5 374
  • 文/花漫 我一把揭開白布被去。 她就那樣靜靜地躺著,像睡著了一般奖唯。 火紅的嫁衣襯著肌膚如雪惨缆。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,111評(píng)論 1 285
  • 那天丰捷,我揣著相機(jī)與錄音坯墨,去河邊找鬼。 笑死病往,一個(gè)胖子當(dāng)著我的面吹牛捣染,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播停巷,決...
    沈念sama閱讀 38,416評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼耍攘,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼榕栏!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蕾各,我...
    開封第一講書人閱讀 37,053評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤扒磁,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后示损,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體渗磅,經(jīng)...
    沈念sama閱讀 43,558評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評(píng)論 2 325
  • 正文 我和宋清朗相戀三年检访,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片仔掸。...
    茶點(diǎn)故事閱讀 38,117評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡脆贵,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出起暮,到底是詐尸還是另有隱情卖氨,我是刑警寧澤,帶...
    沈念sama閱讀 33,756評(píng)論 4 324
  • 正文 年R本政府宣布负懦,位于F島的核電站筒捺,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏纸厉。R本人自食惡果不足惜系吭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望颗品。 院中可真熱鬧肯尺,春花似錦、人聲如沸躯枢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)锄蹂。三九已至氓仲,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間得糜,已是汗流浹背敬扛。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留掀亩,地道東北人舔哪。 一個(gè)月前我還...
    沈念sama閱讀 45,578評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像槽棍,于是被迫代替她去往敵國(guó)和親捉蚤。 傳聞我的和親對(duì)象是個(gè)殘疾皇子抬驴,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容