NavigationDrawer+Fragment实现侧滑菜单效果

学习了NavigationDrawer 官方Support包中的SlidingMenu版本,练了下手.用到了ListView中item不同的布局

以后会升级加上ViewPager和GridView实现多页面图片切换

代码:

 

[java][/java] view plaincopy

  1. package com.light.study.android;
  2. import android.view.LayoutInflater;
  3. import android.view.View;
  4. import android.widget.TextView;
  5. import com.light.study.android.MyListAdapter.RowType;
  6. public class EventItem implements Item {
  7.     private final String content;
  8.     public EventItem(String content){
  9.         this.content = content;
  10.     }
  11.     @Override
  12.     public int getViewType() {
  13.         return RowType.LIST_ITEM.ordinal();
  14.     }
  15.     @Override
  16.     public View getView(LayoutInflater inflater, View convertView) {
  17.         if(convertView==null){
  18.             convertView = inflater.inflate(R.layout.list_item, null);
  19.         }
  20.         TextView tv = (TextView) convertView.findViewById(R.id.list_content);
  21.         tv.setText(content);
  22.         return convertView;
  23.     }
  24.     @Override
  25.     public boolean isClickable() {
  26.         return true;
  27.     }
  28. }

 

[java][/java] view plaincopy

  1. package com.light.study.android;
  2. import com.light.study.android.MyListAdapter.RowType;
  3. import android.view.LayoutInflater;
  4. import android.view.View;
  5. import android.widget.TextView;
  6. public class HeaderItem implements Item {
  7.     private String name;
  8.     public HeaderItem(String name){
  9.         this.name = name;
  10.     }
  11.     @Override
  12.     public int getViewType() {
  13.         return RowType.HEAD_ITEM.ordinal();
  14.     }
  15.     @Override
  16.     public View getView(LayoutInflater inflater, View convertView) {
  17.         if(convertView==null){
  18.             convertView = inflater.inflate(R.layout.head_item, null);
  19.         }
  20.         TextView tv = (TextView) convertView.findViewById(R.id.headerText);
  21.         tv.setText(name);
  22.         return convertView;
  23.     }
  24.     @Override
  25.     public boolean isClickable() {
  26.         return false;
  27.     }
  28. }

 

[java][/java] view plaincopy

  1. package com.light.study.android;
  2. import android.view.LayoutInflater;
  3. import android.view.View;
  4. public interface Item {
  5.     public int getViewType();
  6.     public boolean isClickable();
  7.     public View getView(LayoutInflater inflater, View convertView);
  8. }

 

[java][/java] view plaincopy

  1. package com.light.study.android;
  2. import java.util.List;
  3. import android.content.Context;
  4. import android.view.LayoutInflater;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. import android.widget.ArrayAdapter;
  8. public class MyListAdapter extends ArrayAdapter<Item> {
  9.     private Context mContext;
  10.     private LayoutInflater inflater;
  11.     private List<Item> list;
  12.     public MyListAdapter(Context context, List<Item> list) {
  13.         super(context, 0, list);
  14.         this.mContext = context;
  15.         this.inflater = LayoutInflater.from(mContext);
  16.         this.list = list;
  17.     }
  18.     public enum RowType{
  19.         HEAD_ITEM,LIST_ITEM
  20.     }
  21.      @Override
  22.      public boolean isEnabled(int position) {
  23.         return this.list.get(position).isClickable();
  24.      }
  25.     @Override
  26.     public int getViewTypeCount() {
  27.         return RowType.values().length;
  28.     }
  29.     @Override
  30.     public int getItemViewType(int position) {
  31.         return list.get(position).getViewType();
  32.     }
  33.     @Override
  34.     public View getView(int position, View convertView, ViewGroup parent) {
  35.         return list.get(position).getView(inflater, convertView);
  36.     }
  37. }

 

[java][/java] view plaincopy

  1. package com.light.study.android;
  2. import android.app.Fragment;
  3. import android.os.Bundle;
  4. import android.view.LayoutInflater;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. import android.widget.TextView;
  8. public class PageFragment extends Fragment {
  9.    public final static String ITEM_POSITION_NUMBER = “item_position_num”;
  10.    public PageFragment(){}
  11.    @Override
  12.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  13.             Bundle savedInstanceState) {
  14.         View convertView = inflater.inflate(R.layout.page_fragment_layout, null);
  15.         TextView tv = (TextView) convertView.findViewById(R.id.textView);
  16.         int num = getArguments().getInt(ITEM_POSITION_NUMBER);
  17.         //選擇對應的項目
  18.         String[] dynastyList = getResources().getStringArray(R.array.list_item);
  19.         tv.setText(dynastyList[num]);
  20.         return convertView;
  21.     }
  22. }

 

[java][/java] view plaincopy

  1. package com.light.study.android;
  2. import java.util.ArrayList;
  3. import java.util.List;
  4. import android.app.Activity;
  5. import android.app.FragmentManager;
  6. import android.content.res.Configuration;
  7. import android.os.Bundle;
  8. import android.support.v4.app.ActionBarDrawerToggle;
  9. import android.support.v4.view.GravityCompat;
  10. import android.support.v4.widget.DrawerLayout;
  11. import android.util.Log;
  12. import android.view.MenuItem;
  13. import android.view.View;
  14. import android.widget.AdapterView;
  15. import android.widget.ListView;
  16. public class MainActivity extends Activity {
  17.     private DrawerLayout drawLayout;
  18.     private ListView menuList;
  19.     private ActionBarDrawerToggle toggle;
  20.     private CharSequence mDrawerTitle;
  21.     private String[] mMenuTitles;
  22.     private String[] historyTitles;
  23.     private String[] musicTitles;
  24.     private String[] movieTitles;
  25.     private String[] listTitles;
  26.     @Override
  27.     public void onCreate(Bundle savedInstanceState) {
  28.         super.onCreate(savedInstanceState);
  29.         setContentView(R.layout.activity_main);
  30.         init();
  31.         initListener();
  32.         if (savedInstanceState == null) {
  33.                 selectItem(0);
  34.         }
  35.     }
  36.     private void init() {
  37.         mDrawerTitle = getTitle();
  38.         //历史栏
  39.         historyTitles = getResources().getStringArray(R.array.history);
  40.         //音乐栏
  41.         musicTitles = getResources().getStringArray(R.array.music);
  42.         //电影栏
  43.         movieTitles = getResources().getStringArray(R.array.movie);
  44.         //标题数组
  45.         mMenuTitles = getResources().getStringArray(R.array.title);
  46.         //每一項的標題
  47.         listTitles =  getResources().getStringArray(R.array.list_item);
  48.         drawLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  49.         menuList = (ListView) findViewById(R.id.left_menu);
  50.         //设置菜单阴影效果
  51.         drawLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
  52.         List<Item> list = new ArrayList<Item>();
  53.         //菜单加入历史标题和历史项
  54.         HeaderItem historyHeader = new HeaderItem(mMenuTitles[0]);
  55.         list.add(historyHeader);
  56.         for(int i =0;i<historyTitles.length;i++){
  57.            EventItem historyitem = new EventItem(historyTitles[i]);
  58.            list.add(historyitem);
  59.         }
  60.         //菜单加入音乐标题和音乐项
  61.         HeaderItem musicHeader = new HeaderItem(mMenuTitles[1]);
  62.         list.add(musicHeader);
  63.         for(int i =0;i<musicTitles.length;i++){
  64.            EventItem musicItem = new EventItem(musicTitles[i]);
  65.            list.add(musicItem);
  66.         }
  67.         //菜单加入电影标题和电影项
  68.         HeaderItem movieHeader = new HeaderItem(mMenuTitles[2]);
  69.         list.add(movieHeader);
  70.         for(int i =0;i<movieTitles.length;i++){
  71.            EventItem movieItem = new EventItem(movieTitles[i]);
  72.            list.add(movieItem);
  73.         }
  74.         MyListAdapter adapter = new MyListAdapter(this, list);
  75.         menuList.setAdapter(adapter);
  76.         // enable ActionBar app icon to behave as action to toggle nav drawer
  77.         getActionBar().setDisplayHomeAsUpEnabled(true);
  78.         getActionBar().setHomeButtonEnabled(true);
  79.         toggle = new ActionBarDrawerToggle(this,
  80.                                            drawLayout,
  81.                                            R.drawable.ic_drawer,
  82.                                            R.string.drawer_open,
  83.                                            R.string.drawer_close){
  84.             public void onDrawerClosed(View view) {
  85.                 invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
  86.             }
  87.             public void onDrawerOpened(View drawerView) {
  88.                 getActionBar().setTitle(mDrawerTitle);
  89.                 invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
  90.             }
  91.         };
  92.         drawLayout.setDrawerListener(toggle);
  93.     }
  94.     private void initListener() {
  95.         //菜单单击事件监听器
  96.         menuList.setOnItemClickListener(new DrawerItemClickListener());
  97.     }
  98.     /* The click listner for ListView in the navigation drawer */
  99.     private class DrawerItemClickListener implements ListView.OnItemClickListener {
  100.         @Override
  101.         public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  102.             Log.i(“Light”, “position:”+position);
  103.             selectItem(position);
  104.         }
  105.     }
  106.     private void selectItem(int position) {
  107.         // update the main content by replacing fragments
  108.         PageFragment fragment = new PageFragment();
  109.         //将当前选择的项传递到Fragment
  110.         Bundle args = new Bundle();
  111.         args.putInt(PageFragment.ITEM_POSITION_NUMBER, position);
  112.         fragment.setArguments(args);
  113.         FragmentManager fragmentManager = getFragmentManager();
  114.         fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();
  115.         drawLayout.closeDrawer(menuList);
  116.         // update selected item and title, then close the drawer
  117.         menuList.setItemChecked(position, true);
  118.         //注意这里改变的是ActionBar的标题
  119.         getActionBar().setTitle(listTitles[position]);
  120.     }
  121.     @Override
  122.     protected void onPostCreate(Bundle savedInstanceState) {
  123.         super.onPostCreate(savedInstanceState);
  124.         toggle.syncState();
  125.     }
  126.     @Override
  127.     public void onConfigurationChanged(Configuration newConfig) {
  128.          super.onConfigurationChanged(newConfig);
  129.          // Pass any configuration change to the drawer toggls
  130.          toggle.onConfigurationChanged(newConfig);
  131.     }
  132.     @Override
  133.     public boolean onOptionsItemSelected(MenuItem item) {
  134.          // The action bar home/up action should open or close the drawer.
  135.          // ActionBarDrawerToggle will take care of this.
  136.         if (toggle.onOptionsItemSelected(item)) {
  137.             return true;
  138.         }
  139.         return super.onOptionsItemSelected(item);
  140.     }
  141. }

activity_main.xml:

 

 

[html][/html] view plaincopy

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <android.support.v4.widget.DrawerLayout
  3.     xmlns:android=”http://schemas.android.com/apk/res/android”
  4.     android:id=”@+id/drawer_layout”
  5.     android:layout_width=”match_parent”
  6.     android:layout_height=”match_parent”>
  7.     <!– The main content view–>
  8.     <FrameLayout android:id=”@+id/content_frame”
  9.                  android:layout_width=”match_parent”
  10.                  android:layout_height=”match_parent” />
  11.     <!– The navigation drawer –>
  12.     <ListView android:id=”@+id/left_menu”
  13.               android:layout_height=”match_parent”
  14.               android:layout_width=”240dp”
  15.               android:layout_gravity=”start”
  16.               android:choiceMode=”singleChoice”
  17.               android:divider=”@android:color/transparent”
  18.               android:dividerHeight=”0dp”
  19.               android:background=”#111″/>
  20. </android.support.v4.widget.DrawerLayout>

head_item.xml:

 

 

[html][/html] view plaincopy

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
  3.     android:layout_width=”match_parent”
  4.     android:layout_height=”match_parent”
  5.     android:orientation=”vertical” >
  6.     <TextView
  7.         android:id=”@+id/headerText”
  8.         style=”?android:attr/listSeparatorTextViewStyle”
  9.         android:layout_width=”fill_parent”
  10.         android:layout_height=”wrap_content”
  11.         android:background=”#757678″
  12.         android:paddingBottom=”3dp”
  13.         android:paddingTop=”3dp”
  14.         android:textColor=”#f5c227″
  15.         android:clickable=”false”
  16.         />
  17. </LinearLayout>

list_item.xml

 

 

[html][/html] view plaincopy

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
  3.     android:layout_width=”match_parent”
  4.     android:layout_height=”match_parent”
  5.     android:orientation=”vertical” >
  6.     <TextView
  7.         android:id=”@+id/list_content”
  8.         android:layout_width=”wrap_content”
  9.         android:layout_height=”match_parent”
  10.         android:layout_margin=”5dip”
  11.         android:gravity=”center”
  12.         android:linksClickable=”false”
  13.         android:longClickable=”false”
  14.         android:paddingBottom=”1dip”
  15.         android:paddingTop=”1dip”
  16.         android:textColor=”#6d6d6d”
  17.         android:textSize=”17sp” />
  18. </LinearLayout>

page_fragment_layout.xml:

 

 

[html][/html] view plaincopy

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <FrameLayout xmlns:android=”http://schemas.android.com/apk/res/android”
  3.     android:layout_width=”match_parent”
  4.     android:layout_height=”match_parent”
  5.     android:orientation=”vertical” >
  6.     <TextView android:id=”@+id/textView”
  7.               android:layout_width=”wrap_content”
  8.               android:layout_height=”wrap_content”
  9.               android:layout_gravity=”center”
  10.               />
  11. </FrameLayout>

arrays.xml:

 

 

[html][/html] view plaincopy

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <resources>
  3.     <string-array name=”history”>
  4.         <item >三国</item>
  5.         <item >楚汉</item>
  6.         <item >春秋</item>
  7.         <item >战国</item>
  8.     </string-array>
  9.      <string-array name=”music”>
  10.         <item >爵士</item>
  11.         <item >古典</item>
  12.         <item >现代</item>
  13.         <item >民谣</item>
  14.     </string-array>
  15.      <string-array name=”movie”>
  16.         <item >悬疑</item>
  17.         <item >爱情</item>
  18.         <item >历史</item>
  19.         <item >恐怖</item>
  20.     </string-array>
  21.     <string-array name=”title”>
  22.         <item >历史</item>
  23.         <item >音樂</item>
  24.         <item >电影</item>
  25.     </string-array>
  26.     <string-array name=”list_item”>
  27.         <item >歷史</item>
  28.         <item >三国</item>
  29.         <item >楚汉</item>
  30.         <item >春秋</item>
  31.         <item >战国</item>
  32.         <item >音樂</item>
  33.         <item >爵士</item>
  34.         <item >古典</item>
  35.         <item >现代</item>
  36.         <item >民谣</item>
  37.         <item >電影</item>
  38.         <item >悬疑</item>
  39.         <item >爱情</item>
  40.         <item >历史</item>
  41.         <item >恐怖</item>
  42.     </string-array>
  43. </resources>

效果:

 

标签