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"> <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"> <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"> <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="主页面"/>
public class MainActivity extends AppCompatActivity { private Listlist; 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 adapter = new ArrayAdapter (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"> <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="主页面"/> <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"> <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"/>
public class MainActivity extends AppCompatActivity { private DrawerLayout drawerLayout; private Listlist; @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 adapter = new ArrayAdapter (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="主界面"/> <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: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"/>
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(); } }