本節(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ì)有的疑惑:
- drawer_layout.openDrawer(Gravity.END);
這句是設(shè)置打開的哪個(gè)菜單START代表左邊,END代表右邊
- drawer_layout.openDrawer(Gravity.END);
- 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è)滑菜單!
- 布局代碼中的Tag屬性的作用灼伤? 答:這里沒用到触徐,在重寫DrawerListener的onDrawerSlide方法時(shí),我們可以通過他的第一個(gè) 參數(shù)drawerView狐赡,調(diào)用drawerView.getTag().equals("START")判斷觸發(fā)菜單事件的是哪個(gè) 菜單撞鹉!然后可以進(jìn)行對(duì)應(yīng)的操作!