您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“DrawerLayout的簡(jiǎn)單使用及側(cè)滑菜單實(shí)現(xiàn)方法是什么”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“DrawerLayout的簡(jiǎn)單使用及側(cè)滑菜單實(shí)現(xiàn)方法是什么”吧!
本節(jié)給大家?guī)?lái)基礎(chǔ)UI控件部分的最后一個(gè)控件:DrawerLayout,官方給我們提供的一個(gè)側(cè)滑菜單控件,和上一節(jié)的ViewPager一樣,3.0以后引入,低版本使用它,需要v4兼容包,說(shuō)到側(cè)滑,相信很多人都用過(guò)github上的SlidingMenu,不過(guò)好像有兩個(gè)版本,一個(gè)是單獨(dú)的,另一個(gè)需要依賴(lài)另一個(gè)開(kāi)源項(xiàng)目:ActionBarSherlock;既然Google為我們提供了這個(gè)控件,為何不用咧,而且在Material Design設(shè)計(jì)規(guī)范中,隨處可見(jiàn)的很多側(cè)滑菜單的動(dòng)畫(huà)效果,大都可以通過(guò)Toolbar +DrawerLayout來(lái)實(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為單位,不建議超過(guò)320dp(為了總能看到一些主內(nèi)容視圖)
設(shè)置側(cè)滑事件:mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener);
要說(shuō)一點(diǎn):可以結(jié)合Actionbar使用當(dāng)用戶(hù)點(diǎn)擊Actionbar上的應(yīng)用圖標(biāo),彈出側(cè)滑菜單!這里就要通過(guò)ActionBarDrawerToggle,它是DrawerLayout.DrawerListener的具體實(shí)現(xiàn)類(lèi),我們可以重寫(xiě)ActionBarDrawerToggle的onDrawerOpened()和onDrawerClosed()以監(jiān)聽(tīng)抽屜拉出或隱藏事件!但是這里我們不講,因?yàn)?.0后我們使用的是Toolbar!有興趣的可以自行查閱相關(guā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類(lèi):Item比較簡(jiǎn)單,就不給出了,直接上中間Fragment的布局以及代碼吧!另外Adapter直接復(fù)用我們之前寫(xiě)的那個(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類(lèi)
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); } }
嗯,不知道你有沒(méi)有發(fā)現(xiàn),從上面的DrawerLayout的布局,我們大概可以猜到,DrawerLayout 最多由三個(gè)部分組成,中間的內(nèi)容部分,左邊的側(cè)滑菜單部分,右邊的側(cè)滑菜單部分組成! 下面我們來(lái)寫(xiě)一個(gè)帶有兩個(gè)側(cè)滑菜單的示例!
代碼實(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:
/** * 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; } }
編寫(xiě)好以后,就到我們的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è)滑菜單只能通過(guò)編程來(lái)打開(kāi) 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); //解除鎖定 } }
好的,至此就大功告成了~,呼呼,下面說(shuō)下看代碼時(shí)可能會(huì)有的疑惑:
1. drawer_layout.openDrawer(Gravity.END);
這句是設(shè)置打開(kāi)的哪個(gè)菜單START代表左邊,END代表右邊
2. drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.END);鎖定右面的側(cè)滑菜單,不能通過(guò)手勢(shì)關(guān)閉或者打開(kāi),只能通過(guò)代碼打開(kāi)!即調(diào)用openDrawer方法!接著 drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.END);解除鎖定狀態(tài),即可以通過(guò)手勢(shì)關(guān)閉側(cè)滑菜單最后在drawer關(guān)閉的時(shí)候調(diào)用:drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END);再次鎖定右邊的側(cè)滑菜單!
3. 布局代碼中的Tag屬性的作用?答:這里沒(méi)用到,在重寫(xiě)DrawerListener的onDrawerSlide方法時(shí),我們可以通過(guò)他的第一個(gè)參數(shù)drawerView,調(diào)用drawerView.getTag().equals("START")判斷觸發(fā)菜單事件的是哪個(gè)菜單!然后可以進(jìn)行對(duì)應(yīng)的操作!
到此,相信大家對(duì)“DrawerLayout的簡(jiǎn)單使用及側(cè)滑菜單實(shí)現(xiàn)方法是什么”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún),關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。