首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android开发笔记(一百二十)两种侧滑布局

Android开发笔记(一百二十)两种侧滑布局

作者头像
aqi00
发布2019-01-18 14:37:55
1.8K0
发布2019-01-18 14:37:55
举报
文章被收录于专栏:老欧说安卓老欧说安卓

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());
    }

	@Override
	public void onClick(View v) {
		if (v.getId() == R.id.tv_sliding) {
			if (sp_layout.isOpen()) {
				sp_layout.closePane();
			} else {
				sp_layout.openPane();
			}
		}
	}
	
	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
		vp_sliding.setCurrentItem(position);
		sp_layout.closePane();
	}

	public class SlidingPanelListener implements PanelSlideListener {
		@Override
		public void onPanelClosed(View arg0) {
			tv_sliding.setText("打开侧滑菜单");
		}

		@Override
		public void onPanelOpened(View arg0) {
			tv_sliding.setText("关闭侧滑菜单");
		}

		@Override
		public void onPanelSlide(View arg0, float arg1) {
		}
	}

	public class ColorPagerListener implements OnPageChangeListener {
		@Override
		public void onPageScrollStateChanged(int arg0) {
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}

		@Override
		public 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));
			}
		}

		@Override
		public int getCount() {
			return mFragments.size();
		}

		@Override
		public 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;
	}

	@Override
	public 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;
	}

	@Override
	public 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());
    }

	@Override
	public 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 {
		@Override
		public 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 {
		@Override
		public 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 {
		@Override
		public void onDrawerSlide(View paramView, float paramFloat) {
		}

		@Override
		public void onDrawerOpened(View paramView) {
			if (paramView.getId() == R.id.lv_drawer_left) {
				tv_drawer_left.setText("关闭左边侧滑");
			} else {
				tv_drawer_right.setText("关闭右边侧滑");
			}
		}

		@Override
		public void onDrawerClosed(View paramView) {
			if (paramView.getId() == R.id.lv_drawer_left) {
				tv_drawer_left.setText("打开左边侧滑");
			} else {
				tv_drawer_right.setText("打开右边侧滑");
			}
		}

		@Override
		public 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开发笔记的完整目录

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016年08月19日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • SlidingPaneLayout
  • DrawerLayout
  • SlidingPaneLayout和DrawerLayout的区别
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档