Android側滑菜單DrawerLayout(抽屜布局)實現

jopen 10年前發布 | 152K 次閱讀 Android Android開發 移動開發

應用場景:

           由于側滑菜單有更好的用戶體驗效果,所以更多的App使用側滑抽屜式菜單列表,如網易客戶端、百度影音、愛奇藝等等。至此,側滑菜單有了更多的使用需求。

知識點介紹:

        實現側滑菜單功能的方法有很多,如果開源的項目SlidingMenu,下載地址為https://github.com/jfeinstein10/SlidingMenu。該開源項目依賴于另一個開源項目ActionBarSherlock,下載地址為https://github.com/JakeWharton/ActionBarSherlock。這種實現方式,讀者可以平時有時間自行研究一下。本例主要介紹android-support-v4.jar提供的支持,android.support.v4.widget.DrawerLayout,可兼容低版本的系統。

使用方式:

第一步:新建測試項目DrawerLayout。
第二步:編寫相關的布局文件,主界面布局文件activity_main.xml。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical"  
    tools:context=".MainActivity" >  
    <android.support.v4.widget.DrawerLayout  
        android:id="@+id/drawer_layout"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:background="@android:color/white" >  
        <FrameLayout  
            android:id="@+id/fragment_layout"  
            android:layout_width="match_parent"  
            android:layout_height="match_parent"  
            android:background="@android:color/white" >  
            <TextView  
                android:layout_width="match_parent"  
                android:layout_height="wrap_content"  
                android:gravity="center"  
                android:text="主內容界面" />  
        </FrameLayout>  
        <!--   
        android:layout_gravity="start" 側滑菜單在左邊  
        android:layout_gravity="start" 側滑菜單在右邊  
         -->  
        <LinearLayout  
            android:id="@+id/menu_layout"  
            android:layout_width="180dp"  
            android:layout_height="match_parent"  
            android:layout_gravity="start"  
            android:background="@android:color/white"  
            android:orientation="vertical" >  
            <ImageView  
                android:layout_width="match_parent"  
                android:layout_height="wrap_content"  
                android:gravity="center"  
                android:src="@drawable/ic_launcher" />  
            <TextView  
                android:layout_width="match_parent"  
                android:layout_height="wrap_content"  
                android:gravity="center"  
                android:text="側拉菜單"  
                android:textColor="@android:color/black" />  
            <!--  
            android:cacheColorHint="#FFFFFF"  
            解決Android ListView 滾動 Item 背景變黑的問題  
            -->  
            <ListView  
                android:id="@+id/menu_listView"  
                android:layout_width="match_parent"  
                android:layout_height="match_parent"  
                android:cacheColorHint="#FFFFFF" >  
            </ListView>  
        </LinearLayout>  
    </android.support.v4.widget.DrawerLayout>  
</LinearLayout> 
Fragment類的布局文件layout_first.xml,layout_next.xml。
【layout_first.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:orientation="vertical" >  
        <TextView   
            android:layout_width="match_parent"  
            android:layout_height="20dp"  
            android:text="FirstFragment"  
            android:id="@+id/textTextView"/>  
        <LinearLayout android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:orientation="vertical">  
            <ListView android:layout_height="wrap_content"  
                android:layout_width="wrap_content"  
                android:cacheColorHint="#FFFFFF"  
                android:id="@+id/firstFragmentListView">  
            </ListView>  
        </LinearLayout>  
    </LinearLayout>  

【layout_next.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:orientation="vertical" >  
        <TextView   
            android:layout_height="wrap_content"  
            android:layout_width="match_parent"  
            android:text="NextFragment"/>  
    </LinearLayout>  

ListView的ListItem的布局文件main_listitem.xml。
【main_listitem.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:orientation="vertical" >  
        <TextView android:layout_width="match_parent"  
            android:layout_height="40dp"  
            android:id="@+id/menu"  
            android:textSize="20dp"  
            android:gravity="center_vertical"  
            android:text="加載中..."/>  
    </LinearLayout>  
第二步:編寫相關的java文件,FirstFragment.java、NextFragment、MainActivity.java、MenuListViewAdapter.java、DataBuiltUtils.java。
【FirstFragment.java】
    import android.os.Bundle;  
    import android.support.v4.app.Fragment;  
    import android.view.LayoutInflater;  
    import android.view.View;  
    import android.view.View.OnClickListener;  
    import android.view.ViewGroup;  
    import android.widget.ListView;  
    import android.widget.TextView;  
    import android.widget.Toast;  
    public class FirstFragment extends Fragment{  
        private TextView textView;  
        private ListView listView;   

        @Override  
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
        {  
            View layout = inflater.inflate(R.layout.layout_first, null);  
            textView = (TextView) layout.findViewById(R.id.textTextView);  
            textView.setOnClickListener(new OnClickListener() {  

                @Override  
                public void onClick(View arg0) {  
                    Toast.makeText(getActivity(), "FirstFragment", Toast.LENGTH_SHORT).show();  
                }  
            });  
            listView = (ListView) layout.findViewById(R.id.firstFragmentListView);  
            MenuListViewAdapter adapter = new MenuListViewAdapter(getActivity(), DataBuiltUtils.getFirstMapList());  
            listView.setAdapter(adapter);  
            return layout;  
        }  
    }  
【NextFragment.java】
    import android.os.Bundle;  
    import android.support.v4.app.Fragment;  
    import android.view.LayoutInflater;  
    import android.view.View;  
    import android.view.ViewGroup;  

    public class NextFragment extends Fragment{  

        @Override  
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){  
            View layout = inflater.inflate(R.layout.layout_next, null);  
            return layout;  
        }  
    }  

【MainActivity.java】
    import java.util.ArrayList;  
    import java.util.HashMap;  

    import android.os.Bundle;  
    import android.app.Activity;  
    import android.content.Context;  
    import android.support.v4.app.Fragment;  
    import android.support.v4.app.FragmentActivity;  
    import android.support.v4.app.FragmentTransaction;  
    import android.support.v4.widget.DrawerLayout;  
    import android.view.Menu;  
    import android.view.View;  
    import android.widget.AdapterView;  
    import android.widget.ArrayAdapter;  
    import android.widget.LinearLayout;  
    import android.widget.ListView;  
    import android.widget.RelativeLayout;  
    import android.widget.AdapterView.OnItemClickListener;  

    /** 
     * 抽屜效果 
     * DrawerLayout與Fragment的聯用 
     * DrawerLayout相關: 
     * 1.一般內容層使用framelayout 
     * 2.slidingLayout需要設置一個layout_grative屬性 
     *   文檔建議使用android:layout_gravity="start" 
     */  
    public class MainActivity extends FragmentActivity{  

        private DrawerLayout mDrawer_layout;  //抽屜式布局  
        private LinearLayout mMenu_layout;     

        @Override  
        protected void onCreate(Bundle savedInstanceState){  
            super.onCreate(savedInstanceState);  
            setContentView(R.layout.activity_main);  
            mDrawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);  
            mMenu_layout = (LinearLayout) findViewById(R.id.menu_layout);  
            ListView menu_listview = (ListView) mMenu_layout.findViewById(R.id.menu_listView);  
            ArrayList<HashMap<String, String>> tempMapList = DataBuiltUtils.getMainMapList();  
            menu_listview.setAdapter(new MenuListViewAdapter( getApplicationContext(), tempMapList));  
            //菜單ListView設置監聽事件  
            menu_listview.setOnItemClickListener(new DrawerItemClickListener());  
        }  

        public class DrawerItemClickListener implements OnItemClickListener {  

            @Override  
            public void onItemClick(AdapterView<?> parent, View view, int position, long id){  
                FragmentTransaction ft = getSupportFragmentManager().beginTransaction();  
                Fragment fragment = null;  
                //根據item點擊行號判斷啟用指定Fragment  
                switch (position){  
                    case 0:  
                        fragment = new FirstFragment();  
                        break;  
                    case 1:  
                        fragment = new NextFragment();  
                        break;  
                    default:  
                         fragment = new FirstFragment();  
                        break;  
                }  
                ft.replace(R.id.fragment_layout, fragment);  
                ft.commit();  
                mDrawer_layout.closeDrawer(mMenu_layout);//點擊后關閉mMenu_layout  
            }  
        }  
    }  

【MenuListViewAdapter.java】
    import java.util.HashMap;  
    import java.util.List;  
    import java.util.Map;  

    import android.content.Context;  
    import android.view.LayoutInflater;  
    import android.view.View;  
    import android.view.ViewGroup;  
    import android.widget.BaseAdapter;  
    import android.widget.TextView;  

    public class MenuListViewAdapter extends BaseAdapter {  
        private List<HashMap<String, String>> lists;  
        private LayoutInflater mInflater;  
        private Context mainContext;  

        public MenuListViewAdapter(Context context,  
                List<HashMap<String, String>> dataList) {  
            mInflater = LayoutInflater.from(context);  
            mainContext = context;  
            lists = dataList;  
        }  

        @Override  
        public int getCount() {  
            return lists.size();  
        }  

        @Override  
        public Object getItem(int position) {  
            return lists.get(position);  
        }  

        @Override  
        public long getItemId(int position) {  
            return position;  
        }  

        @Override  
    public View getView(final int position, View convertView, ViewGroup parent) {  
            ViewHolder holder = null;  
            if (convertView == null) {  
                holder = new ViewHolder();  
                convertView = mInflater.inflate(R.layout.main_listitem, null);  
                holder.menu = (TextView) convertView.findViewById(R.id.menu);  
                convertView.setTag(holder);  
            } else {  
                holder = (ViewHolder) convertView.getTag();  
            }  
            // 設置背景色  
            // if(position%2==1){  
            // convertView.setBackgroundColor(Color.rgb(220, 220, 220));  
            // }else {  
            // convertView.setBackgroundColor(Color.rgb(255, 250, 250));  
            // }  
            if (lists.size() > 0) {  
                final Map<String, String> map = lists.get(position);  
                String number = (String) map.get("menu");  
                holder.menu.setText(number);  
            }  
            return convertView;  
        }  

        static class ViewHolder {  
            TextView   menu;    //菜單名稱  
        }  
    }  
【DataBuiltUtils.java】
import java.util.ArrayList;  
import java.util.HashMap;  

public class DataBuiltUtils {  

    public static ArrayList<HashMap<String,String>> getMainMapList(){  
        ArrayList<HashMap<String, String>> tempMapList = new ArrayList<HashMap<String,String>>();  

        for(int i=0;i<5;i++){  
            HashMap<String, String> tempMap = new HashMap<String, String>();  
            tempMap.put("menu", "菜單【"+(i+1)+"】");  
            tempMapList.add(tempMap);  
        }  
        return tempMapList;  
    }  

    public static ArrayList<HashMap<String,String>> getFirstMapList(){  
        ArrayList<HashMap<String, String>> tempMapList = new ArrayList<HashMap<String,String>>();  

        for(int i=0;i<5;i++){  
            HashMap<String, String> tempMap = new HashMap<String, String>();  
            tempMap.put("menu", "FirstFragment菜單【"+(i+1)+"】");  
            tempMapList.add(tempMap);  
        }  
        return tempMapList;  
    }  
}  
 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!