当前位置: 代码迷 >> Android >> Android侧滑菜单DrawerLayout(屉子布局)实现
  详细解决方案

Android侧滑菜单DrawerLayout(屉子布局)实现

热度:65   发布时间:2016-04-28 05:18:26.0
Android侧滑菜单DrawerLayout(抽屉布局)实现

应用场景:

           由于侧滑菜单有更好的用户体验效果,所以更多的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;	}	@Overridepublic 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;	}}



  相关解决方案