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