1.SlidingPaneLayout
2.DrawerLayout
3.NavigationView
4.SlidingMenu
1.SlidingPaneLayout
布局v4包下，先左侧拉（只有左侧拉），后主页，布局的位置决定前面的是左侧拉
通过slidingPaneLayout.closePane();关闭侧拉
2.DrawerLayout
布局v4包下，先主页，后左侧拉或右侧拉（顺序不能变否则点击事件失效）
通过drawerLayout.closeDrawer(Gravity.LEFT/Gravity.RIGHT);关闭侧拉
3.NavigationView
布局v4包下DrawerLayout，先主页面，后左或右侧拉（引进design包下的NavigationView）
NavigationView可以关联headerLayout和menu
navigationView设置监听，可以响应menu的点击事件
通过drawerLayout.closeDrawer(Gravity.LEFT/Gravity.RIGHT);关闭侧拉
4.SlidingMenu
需要导入第三方控件(不推荐使用)
通过slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);设置两边都可以滑动
slidingMenu.setMenu(R.layout.left_layout);设置左边布局
slidingMenu.setSecondaryMenu(R.layout.right_layout);设置右边布局
第一种：SlidingPaneLayout
布局v4包下，先左侧拉（只有左侧拉），后主页
通过slidingPaneLayout.closePane();关闭侧拉
<android.support.v4.widget.SlidingPaneLayout android:id="@+id/sliding_pane_layout" 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" tools:context="org.mobiletrain.a7_2slidingpanelayout.MainActivity"> <!-- SlidingPaneLayout布局整体上分为两部分，第一部分为左边的侧拉菜单，第二部分为主页面 --> <LinearLayout android:id="@+id/left_layout" android:layout_width="200dp" android:layout_height="match_parent" android:background="#f90101" android:gravity="center" android:orientation="vertical"> <ListView android:id="@+id/lv" android:layout_width="match_parent" android:layout_height="match_parent"></ListView> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#08f504" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/tool_bar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary"></android.support.v7.widget.Toolbar> <Button android:id="@+id/toggle" android:layout_width="wrap_content" android:onClick="toggle" android:layout_height="wrap_content"/> <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="主页面"/> </LinearLayout> </android.support.v4.widget.SlidingPaneLayout>
public class MainActivity extends AppCompatActivity {
private List<String> list;
private SlidingPaneLayout slidingPaneLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
ListView listView = (ListView) findViewById(R.id.lv);
final TextView textView = (TextView) findViewById(R.id.tv);
LinearLayout leftLayout = (LinearLayout) findViewById(R.id.left_layout);
ViewGroup.LayoutParams layoutParams = leftLayout.getLayoutParams();
//将100px转为100dp
layoutParams.width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics());
leftLayout.setLayoutParams(layoutParams);
slidingPaneLayout = (SlidingPaneLayout) findViewById(R.id.sliding_pane_layout);
initData();
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list);
listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
textView.setText(list.get(position));
//关闭侧拉菜单
slidingPaneLayout.closePane();
}
});
}
//点击后退按钮
@Override
public void onBackPressed() {
//如果侧拉菜单打开，则点击后退按钮时关闭侧拉菜单，否则直接退出应用
if (slidingPaneLayout.isOpen()) {
slidingPaneLayout.closePane();
} else {
super.onBackPressed();
}
}
private void initData() {
list = new ArrayList<>();
list.add("收藏");
list.add("钱包");
list.add("相册");
list.add("文件");
}
public void toggle(View view) {
//点击按钮时，如果侧拉菜单已经打开，则关闭，否则打开侧拉菜单
if (slidingPaneLayout.isOpen()) {
slidingPaneLayout.closePane();
} else {
slidingPaneLayout.openPane();
}
}
}
第二种：DrawerLayout
布局v4包下，先主页，后左侧拉或右侧拉（顺序不能变否则点击事件失效）
通过drawerLayout.closeDrawer(Gravity.LEFT/Gravity.RIGHT);关闭侧拉
<android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" 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" tools:context="org.mobiletrain.a7_2drawerlayout.MainActivity"> <!-- DrawerLayout中整体上分为三大块，分别是主页面，左右两侧的侧拉菜单 android:layout_gravity="left"属性表示该页面是左边的侧拉菜单,注意要给侧拉菜单的布局添加一个背景 android:layout_gravity="right"属性表示该页面是右边侧拉菜单 注意三部分的位置： 第一部分为主界面 第二部分为左边侧拉菜单 第三部分为右边侧拉菜单 如果侧拉菜单写在了主页面之前，则侧拉菜单中的点击事件会失效 --> <RelativeLayout android:id="@+id/main_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="leftToggle" android:text="leftToggle"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:onClick="rightToggle" android:text="@string/righttoggle"/> <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="主页面"/> </RelativeLayout> <LinearLayout android:id="@+id/left_layout" android:layout_width="200dp" android:layout_height="match_parent" android:layout_gravity="left" android:background="#00fa08" android:orientation="vertical"> <ListView android:id="@+id/lv" android:layout_width="match_parent" android:layout_height="match_parent"></ListView> </LinearLayout> <LinearLayout android:id="@+id/right_layout" android:layout_width="200dp" android:layout_height="match_parent" android:layout_gravity="right" android:background="#fa0212" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="right"/> </LinearLayout> </android.support.v4.widget.DrawerLayout>
public class MainActivity extends AppCompatActivity {
private DrawerLayout drawerLayout;
private List<String> list;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ListView listView = (ListView) findViewById(R.id.lv);
final TextView textView = (TextView) findViewById(R.id.tv);
initData();
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list);
listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
textView.setText(list.get(position));
drawerLayout.closeDrawer(Gravity.LEFT);
}
});
}
@Override
public void onBackPressed() {
if (drawerLayout.isDrawerOpen(Gravity.LEFT)) {
drawerLayout.closeDrawer(Gravity.LEFT);
} else if (drawerLayout.isDrawerOpen(Gravity.RIGHT)) {
drawerLayout.closeDrawer(Gravity.RIGHT);
} else {
super.onBackPressed();
}
}
private void initData() {
list = new ArrayList<>();
list.add("收藏");
list.add("钱包");
list.add("文件");
list.add("相册");
}
public void leftToggle(View view) {
//判断左边的侧拉菜单是否打开
if (drawerLayout.isDrawerOpen(Gravity.LEFT)) {
//关闭掉左边的侧拉菜单
drawerLayout.closeDrawer(Gravity.LEFT);
} else {
//打开左边的侧拉菜单
drawerLayout.openDrawer(Gravity.LEFT);
}
}
public void rightToggle(View view) {
//打开右边的侧拉菜单
drawerLayout.openDrawer(Gravity.RIGHT);
}
}
第三种.NavigationView
布局v4包下DrawerLayout，先主页面，后左或右侧拉（引进design包下的NavigationView）
NavigationView可以关联headerLayout和menu
navigationView设置监听，可以响应menu的点击事件
通过drawerLayout.closeDrawer(Gravity.LEFT/Gravity.RIGHT);关闭侧拉
<android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="org.mobiletrain.a7_3drawerlayoutnavigationview.MainActivity"> <!-- 整个页面分为三大块，分别是主界面、左边侧滑界面、右边侧滑界面 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="主界面"/> </LinearLayout> <!-- android:layout_width="wrap_content"表示NavigaitonView的宽度为屏幕宽度的4/5 app:headerLayout="@layout/header_layout"设置NavigatinView的头布局 app:menu="@menu/main"设置NavigationView的点击项 app:itemBackground="@color/colorPrimary"设置NavigationView item的背景颜色 app:itemIconTint="@color/colorAccent"表示给NavigationView的item上的图片设置统一的颜色 app:itemTextColor=""表示设置NavigationView上item中文本的颜色 --> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="left" android:fitsSystemWindows="true" app:headerLayout="@layout/header_layout" app:menu="@menu/main"></android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="200dp" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="200dp" android:scaleType="centerCrop" android:src="@drawable/p1"/> <Button android:id="@+id/login" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="@null" android:gravity="center" android:text="请登录" android:textSize="24sp"/> </RelativeLayout>
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:id="@+id/g1"> <item android:id="@+id/favorite" android:icon="@mipmap/ic_launcher" android:title="收藏"/> <item android:id="@+id/wallet" android:icon="@mipmap/ic_launcher" android:title="钱包"/> </group> <group android:id="@+id/g2"> <item android:id="@+id/photo" android:icon="@mipmap/ic_launcher" android:title="相册"/> </group> <item android:id="@+id/file" android:icon="@mipmap/ic_launcher" android:title="文件"/> </menu>
public class MainActivity extends AppCompatActivity {
private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TextView textView = (TextView) findViewById(R.id.tv);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
//使item上图片的颜色正常显示
navigationView.setItemIconTintList(null);
//设置NavigationView中item的点击事件
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.favorite:
textView.setText("收藏");
break;
}
drawerLayout.closeDrawer(Gravity.LEFT);
return true;
}
});
/****************处理头部点击事件*************************/
//获得头布局
View headerView = navigationView.getHeaderView(0);
Button login = (Button) headerView.findViewById(R.id.login);
login.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "登录成功", Toast.LENGTH_SHORT).show();
}
});
}
@Override
public void onBackPressed() {
if (drawerLayout.isDrawerOpen(Gravity.LEFT)) {
drawerLayout.closeDrawer(Gravity.LEFT);
} else {
super.onBackPressed();
}
}
}
private void initGuide() {
//显示导航按钮
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//1.当前Activity
//2.侧拉菜单的根布局
//3.4.对于侧拉菜单打开或者关闭的一个描述
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(MainActivity.this,drawerLayout,0,0);
drawerLayout.setDrawerListener(actionBarDrawerToggle);
//表示让ActionBar的状态和DrawerLayout的状态同步
actionBarDrawerToggle.syncState();
}
第四种.SlidingMenu
通过slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);设置两边都可以滑动
slidingMenu.setMenu(R.layout.left_layout);设置左边布局
slidingMenu.setSecondaryMenu(R.layout.right_layout);设置右边布局
*侧滑内容是文本
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SlidingMenu slidingMenu = new SlidingMenu(this);
//设置SlidingMenu的侧滑方式为左右两边都可以滑动
slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);
//设置左边侧拉布局
slidingMenu.setMenu(R.layout.left_layout);
//设置右边侧拉布局
slidingMenu.setSecondaryMenu(R.layout.right_layout);
slidingMenu.setBehindWidth(getResources().getDisplayMetrics().widthPixels / 3);
//第二个参数表示侧拉菜单滑动模式
//1.SlidingMenu.SLIDING_WINDOW：表示侧拉菜单和页面一样高
//2.SlidingMenu.SLIDING_CONTENT:表示侧拉菜单在ActionBar下面活动
slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
}
}
*侧滑内容是Fragment
public class LeftFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
TextView textView = new TextView(getActivity());
textView.setText("left");
return textView;
}
}
public class RightFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
TextView textView = new TextView(getActivity());
textView.setText("right");
return textView;
}
}
public class MainActivity extends SlidingFragmentActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//设置左边侧滑菜单的布局
setBehindContentView(R.layout.left_layout);
SlidingMenu slidingMenu = getSlidingMenu();
slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);
slidingMenu.setSecondaryMenu(R.layout.right_layout);
//设置两边菜单侧拉偏移量为屏幕宽度的1/3
slidingMenu.setBehindWidth(getResources().getDisplayMetrics().widthPixels / 3);
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
//用Fragment替换左右两边的Linearlayout
transaction.replace(R.id.left_linearlayout, new LeftFragment());
transaction.replace(R.id.right_linearlayout, new RightFragment());
transaction.commit();
}
}