Android开发笔记(一百二十)两种侧滑布局
16lz
2021-01-26
SlidingPaneLayout
SlidingPaneLayout是Android在android-support-v4.jar中推出的一个可滑动面板的布局,在前面《 Android开发笔记(一百零一)滑出式菜单》中,我们提到水平布局时的LinearLayout无法自动左右拉伸,必须借助于手势事件才能拉出左侧隐藏的布局,现在SlidingPaneLayout便是为了解决LinearLayout无法自动拉伸的缺陷。只要我们在布局文件的SlidingPaneLayout节点下定义两个子布局,那么页面默认会把第一个子布局作为左侧隐藏面板,一旦用户的手势从左向右滑动,左侧面板就被拉了出来。SlidingPaneLayout的使用挺简单的,下面是它的几个常用方法:
setSliderFadeColor : 设置主页面的阴影渐变色。即拉出左侧面板时,右边主页面的渐变阴影色,主页面变得越小则阴影色救越浓。阴影色默认为灰色。
setCoveredFadeColor : 设置左侧面板缩进去时的阴影渐变色。
setPanelSlideListener : 设置左侧面板的拉出监听器。该监听器实现了下面三个方法:
--onPanelClosed : 左侧面板已关闭。
--onPanelOpened : 左侧面板已打开。
--onPanelSlide : 左侧面板在滑动。
openPane : 打开左侧面板。
closePane : 关闭左侧面板。
isOpen : 判断左侧面板是否打开。
下面是使用SlidingPaneLayout的效果截图:
下面是使用SlidingPaneLayout的布局文件示例:
<?xml version="1.0" encoding="UTF-8"?><android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/sp_layout" android:layout_width="match_parent" android:layout_height="match_parent" > <ListView android:id="@+id/lv_sliding" android:layout_width="150dp" android:layout_height="match_parent" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/tv_sliding" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ffffdd" android:paddingLeft="100dp" android:text="打开侧滑菜单" android:textColor="#000000" android:textSize="20sp" /> <android.support.v4.view.ViewPager android:id="@+id/vp_sliding" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout></android.support.v4.widget.SlidingPaneLayout>
下面是使用SlidingPaneLayout的页面代码示例:
import java.util.ArrayList;import com.example.exmdrawer.fragment.ColorFragment;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.support.v4.widget.SlidingPaneLayout;import android.support.v4.widget.SlidingPaneLayout.PanelSlideListener;import android.util.Log;import android.view.View;import android.view.View.OnClickListener;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.ArrayAdapter;import android.widget.ListView;import android.widget.TextView;public class SlidingActivity extends FragmentActivity implements OnClickListener, OnItemClickListener { private final static String TAG = "SlidingActivity"; private SlidingPaneLayout sp_layout; private ListView lv_sliding; private ViewPager vp_sliding; private TextView tv_sliding;private String[] colorDescArray = {"红色", "绿色", "蓝色", "白色", "黑色"};private int[] colorArray = {Color.RED, Color.GREEN, Color.BLUE, Color.WHITE, Color.BLACK};private ColorPagerAdapter vp_adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_sliding); sp_layout = (SlidingPaneLayout) findViewById(R.id.sp_layout); lv_sliding = (ListView) findViewById(R.id.lv_sliding); vp_sliding = (ViewPager) findViewById(R.id.vp_sliding); tv_sliding = (TextView) findViewById(R.id.tv_sliding); tv_sliding.setOnClickListener(this); //sp_layout.setSliderFadeColor(Color.YELLOW); sp_layout.setCoveredFadeColor(Color.RED); sp_layout.setPanelSlideListener(new SlidingPanelListener()); ArrayAdapter<String> lv_adapter = new ArrayAdapter<String>(this,R.layout.list_item, colorDescArray); lv_sliding.setAdapter(lv_adapter); lv_sliding.setOnItemClickListener(this); vp_adapter = new ColorPagerAdapter(getSupportFragmentManager()); vp_sliding.setAdapter(vp_adapter); vp_sliding.addOnPageChangeListener(new ColorPagerListener()); }@Overridepublic void onClick(View v) {if (v.getId() == R.id.tv_sliding) {if (sp_layout.isOpen()) {sp_layout.closePane();} else {sp_layout.openPane();}}}@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {vp_sliding.setCurrentItem(position);sp_layout.closePane();}public class SlidingPanelListener implements PanelSlideListener {@Overridepublic void onPanelClosed(View arg0) {tv_sliding.setText("打开侧滑菜单");}@Overridepublic void onPanelOpened(View arg0) {tv_sliding.setText("关闭侧滑菜单");}@Overridepublic void onPanelSlide(View arg0, float arg1) {}}public class ColorPagerListener implements OnPageChangeListener {@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int position) {//tv_sliding.setText(colorDescArray[position]);}}private ArrayList<Fragment> mFragments;public class ColorPagerAdapter extends FragmentPagerAdapter {public ColorPagerAdapter(FragmentManager fm) {super(fm);mFragments = new ArrayList<Fragment>();for (int color : colorArray) {mFragments.add(new ColorFragment(color));}}@Overridepublic int getCount() {return mFragments.size();}@Overridepublic Fragment getItem(int position) {return mFragments.get(position);}}}
下面是页面用到的Fragment代码示例:
import android.content.Context;import android.os.Bundle;import android.support.v4.app.Fragment;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.ViewGroup.LayoutParams;import android.widget.LinearLayout;public class ColorFragment extends Fragment {private static final String TAG = "ColorFragment";protected Context mContext;private int mColor = -1;public ColorFragment(int colorRes) {mColor = colorRes;}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {mContext = getActivity();if (savedInstanceState != null) {mColor = savedInstanceState.getInt("mColor");}LinearLayout layout = new LinearLayout(mContext);layout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));layout.setBackgroundColor(mColor);return layout;}@Overridepublic void onSaveInstanceState(Bundle outState) {super.onSaveInstanceState(outState);if (mColor != -1) {outState.putInt("mColor", mColor);}}}
DrawerLayout
DrawerLayout也是android-support-v4.jar中新加的抽屉式布局,它的用法更加类似于滑出式菜单的开源框架SlidingMenu,有关SlidingMenu的说明参见《 Android开发笔记(一百零一)滑出式菜单》。DrawerLayout应该也是Android与时俱进的产物,它比SlidingPaneLayout更强大,不但可以拉出左侧抽屉面板,还可以拉出右侧抽屉面板。左侧面板与右侧面板的区别在于,左侧面板在布局文件中的layout_gravity属性为left,而右侧面板在布局文件中的layout_gravity属性为right。下面是DrawerLayout的几个常用方法说明:
setDrawerShadow : 设置主页面的渐变阴影图形。
addDrawerListener : 添加抽屉面板的拉出监听器。该监听器实现了下面三个方法:
--onDrawerSlide : 抽屉面板在滑动。
--onDrawerOpened : 抽屉面板已打开。
--onDrawerClosed : 抽屉面板已关闭。
--onDrawerStateChanged : 抽屉面板的状态发生变化。
removeDrawerListener : 移除抽屉面板的拉出监听器。
closeDrawers : 关闭所有抽屉面板。
openDrawer : 打开指定抽屉面板。
closeDrawer : 关闭指定抽屉面板。
isDrawerOpen : 判断指定抽屉面板是否打开。
下面是使用DrawerLayout的效果截图:
下面是使用DrawerLayout的布局文件示例:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/dl_layout" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/tv_drawer_left" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="打开左边侧滑" android:textColor="#000000" android:textSize="20sp" /> <TextView android:id="@+id/tv_drawer_right" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="打开右边侧滑" android:textColor="#000000" android:textSize="20sp" /> </LinearLayout> <TextView android:id="@+id/tv_drawer_center" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="top|center" android:paddingTop="30dp" android:text="首页" android:textColor="#000000" android:textSize="20sp" /> </LinearLayout> <ListView android:id="@+id/lv_drawer_left" android:layout_width="150dp" android:layout_height="match_parent" android:layout_gravity="left" android:background="#ffdd99" /> <ListView android:id="@+id/lv_drawer_right" android:layout_width="150dp" android:layout_height="match_parent" android:layout_gravity="right" android:background="#99ffdd" /></android.support.v4.widget.DrawerLayout>
下面是使用DrawerLayout的页面代码示例:
import java.lang.reflect.Field;import android.app.Activity;import android.os.Bundle;import android.support.v4.widget.DrawerLayout;import android.support.v4.widget.DrawerLayout.DrawerListener;import android.support.v4.widget.ViewDragHelper;import android.util.DisplayMetrics;import android.view.View;import android.view.View.OnClickListener;import android.widget.AdapterView;import android.widget.ArrayAdapter;import android.widget.ListView;import android.widget.TextView;import android.widget.AdapterView.OnItemClickListener;public class DrawerActivity extends Activity implements OnClickListener { private final static String TAG = "DrawerActivity"; private DrawerLayout dl_layout; private TextView tv_drawer_left; private TextView tv_drawer_right; private TextView tv_drawer_center; private ListView lv_drawer_left; private ListView lv_drawer_right;private String[] titleArray = {"首页", "新闻", "娱乐", "博客", "论坛"};private String[] settingArray = {"我的", "设置", "关于"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_drawer); dl_layout = (DrawerLayout) findViewById(R.id.dl_layout); dl_layout.addDrawerListener(new SlidingListener()); //setDrawerLeftEdgeSize(this, dl_layout, 0.3f); tv_drawer_left = (TextView) findViewById(R.id.tv_drawer_left); tv_drawer_right = (TextView) findViewById(R.id.tv_drawer_right); tv_drawer_center = (TextView) findViewById(R.id.tv_drawer_center); tv_drawer_left.setOnClickListener(this); tv_drawer_right.setOnClickListener(this); lv_drawer_left = (ListView) findViewById(R.id.lv_drawer_left); ArrayAdapter<String> left_adapter = new ArrayAdapter<String>(this,R.layout.list_item, titleArray); lv_drawer_left.setAdapter(left_adapter); lv_drawer_left.setOnItemClickListener(new LeftListListener()); lv_drawer_right = (ListView) findViewById(R.id.lv_drawer_right); ArrayAdapter<String> right_adapter = new ArrayAdapter<String>(this,R.layout.list_item, settingArray); lv_drawer_right.setAdapter(right_adapter); lv_drawer_right.setOnItemClickListener(new RightListListener()); }@Overridepublic void onClick(View v) {if (v.getId() == R.id.tv_drawer_left) {if (dl_layout.isDrawerOpen(lv_drawer_left)) {dl_layout.closeDrawer(lv_drawer_left);} else {dl_layout.openDrawer(lv_drawer_left);}} else if (v.getId() == R.id.tv_drawer_right) {if (dl_layout.isDrawerOpen(lv_drawer_right)) {dl_layout.closeDrawer(lv_drawer_right);} else {dl_layout.openDrawer(lv_drawer_right);}}} private class LeftListListener implements OnItemClickListener {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {String text = titleArray[position];tv_drawer_center.setText(text+text+text+text+text);dl_layout.closeDrawers();} } private class RightListListener implements OnItemClickListener {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {String text = settingArray[position];tv_drawer_center.setText(text+text+text+text+text);dl_layout.closeDrawers();} } private class SlidingListener implements DrawerListener {@Overridepublic void onDrawerSlide(View paramView, float paramFloat) {}@Overridepublic void onDrawerOpened(View paramView) {if (paramView.getId() == R.id.lv_drawer_left) {tv_drawer_left.setText("关闭左边侧滑");} else {tv_drawer_right.setText("关闭右边侧滑");}}@Overridepublic void onDrawerClosed(View paramView) {if (paramView.getId() == R.id.lv_drawer_left) {tv_drawer_left.setText("打开左边侧滑");} else {tv_drawer_right.setText("打开右边侧滑");}}@Overridepublic void onDrawerStateChanged(int paramInt) {} } //设置左边侧滑的边缘大小private void setDrawerLeftEdgeSize(Activity act, DrawerLayout layout, float percentage) {if (act == null || layout == null)return;try {Field leftDraggerField = layout.getClass().getDeclaredField("mLeftDragger");leftDraggerField.setAccessible(true);ViewDragHelper leftDragger = (ViewDragHelper) leftDraggerField.get(layout);Field edgeSizeField = leftDragger.getClass().getDeclaredField("mEdgeSize");edgeSizeField.setAccessible(true);int edgeSize = edgeSizeField.getInt(leftDragger);DisplayMetrics dm = new DisplayMetrics();act.getWindowManager().getDefaultDisplay().getMetrics(dm);edgeSizeField.setInt(leftDragger, Math.max(edgeSize, (int) (dm.widthPixels * percentage)));} catch (Exception e) {e.printStackTrace();}}}
SlidingPaneLayout和DrawerLayout的区别
这两个侧滑布局都实现了侧滑菜单效果,当然它们之间也有些使用上的不同,下面是博主总结的几点区别:1、SlidingPaneLayout只能定义一个侧滑面板,而且必须位于左侧;而DrawerLayout可定义两个侧滑面板,一个位于左侧,另一个位于右侧,当然如果你只定义一个侧滑面板也是可以的。
2、SlidingPaneLayout的侧滑面板在滑动时,主页面也跟着往右滑;而DrawerLayout的侧滑面板在滑动时,主页面是不会滑动的,也就是说,侧滑面板会遮盖住主页面的部分UI;
3、SlidingPaneLayout在主页面任何位置水平向右滑动,都会拉出左侧面板;而DrawerLayout只有在主页面左右边缘水平滑动时,才能拉出侧滑面板;
4、拉出侧滑面板时,SlidingPaneLayout主页面的灰色阴影较浅,不容易看到;而DrawerLayout主页面的灰色阴影较深,一下子就能看出来;
点击下载本文用到的两种侧滑布局的工程代码
点此查看Android开发笔记的完整目录
更多相关文章
- Android8.1 Launcher3 去掉抽屉(二)
- Android(安卓)基于源码的科学计算器——Calculator浅析
- Android侧滑菜单之DrawerLayout用法详解
- Android(安卓)Studio介绍及使用
- android 对话框Dialog背景透明
- Android(安卓)Studio错误org.gradle.api.resources.ResourceExce
- android 6.0 Launcher3 去掉抽屉式,显示所有 app
- Android开发底部点击按钮从屏幕底部滑出面板(一)
- Android友盟分享的调不起分享面板,友盟分享的集成;