鱼鱼Chen之学写自己的apk（二）使用SlidingPaneLayout实现漂亮的布局

最新推荐文章于 2024-05-30 09:57:03 发布

Inori酱

最新推荐文章于 2024-05-30 09:57:03 发布

阅读量1.3k

点赞数 1

首先，这是原代码的链接：http://www.eoeandroid.com/thread-545123-1-1.html

可惜的是，当初原作者只上了代码，并没有作解释。一开始理解的时候的确有点费劲。于是这篇算作是译文吧，基本是自己的理解，所以也许有点出入，当然了，也加入了ActionBar的部分知识点。

一、分析一下结构

1个Activity以及它的2个Fragment，布局是对应的，还有一个自定义的ActionProvider，background_gradient是一个自定义的<shape>

关于Fragment的完全解析：http://blog.csdn.net/lmj623565791/article/details/37970961

二、原理分析

其实呢，原理并不复杂。就是将两个Fragment放在Activity里，通过SlidingPaneLayout这个组件（在v4包里），实现监听滑动达到从右Fragment完全打开到左Fragment完全打开的过程。当中实现动态地改变外边距（Margin）

三、新建两个Fragment

以左侧（菜单）Fragment为例

public class MenuFragment extends Fragment {
	private View fragmentView;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		fragmentView = inflater.inflate(R.layout.slidingpane_menu, container,
				false);
		return fragmentView;
	}

	public View getFragmentView() {
		return fragmentView;
	}

}

这边还是很好理解的，只要用LayoutInflater类的inflate方法把不觉导入，为Fragmemnt创建自己的布局即可。

getFragment方法在接下来的MainActivity中会用到，先放着。

右侧（内容）Fragment差不多

public class ContentFragment extends Fragment {
	private View fragmentView;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		fragmentView = inflater.inflate(R.layout.slidingpane_content,
				container, false);
		return fragmentView;
	}

	public FrameLayout.LayoutParams getCurrentParams() {
		return (LayoutParams) fragmentView.getLayoutParams();
	}

	public void setCurrentParams(FrameLayout.LayoutParams params) {
		fragmentView.setLayoutParams(params);
	}
}

自定义一组get、set方法同样稍后解释

两个布局文件，首先是左侧Fragment的

<?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" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="30dp" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/io" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="   小精灵"
            android:textColor="@android:color/white"
            android:textSize="20sp" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@android:color/white" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_weight="1"
        android:orientation="vertical" >

        <Button
            android:id="@+id/btn01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            android:drawableLeft="@drawable/icon01"
            android:gravity="left|center"
            android:text="松饼人"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

        <Button
            android:id="@+id/btn02"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            android:drawableLeft="@drawable/icon02"
            android:gravity="left|center"
            android:text="圣诞树"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

        <Button
            android:id="@+id/btn03"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            android:drawableLeft="@drawable/icon03"
            android:gravity="left|center"
            android:text="雪人"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

        <Button
            android:id="@+id/btn04"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            android:drawableLeft="@drawable/icon04"
            android:gravity="left|center"
            android:text="礼物"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

        <Button
            android:id="@+id/btn05"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            android:drawableLeft="@drawable/icon05"
            android:gravity="left|center"
            android:text="糖果"
            android:textColor="@android:color/white"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableLeft="@drawable/icon_mini01"
            android:gravity="left|center"
            android:text="铲子"
            android:textColor="@android:color/darker_gray" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:drawableLeft="@drawable/icon_mini02"
            android:gravity="left|center"
            android:text="斧头"
            android:textColor="@android:color/darker_gray" />
    </LinearLayout>

</LinearLayout>

接着是右侧Fragment的

<?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"
    android:background="@android:color/black" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是内容部分"
        android:layout_gravity="center_horizontal"
        android:textColor="@android:color/white"
        android:textSize="25sp"/>

</LinearLayout>

这里有一个注意点哦！！右侧Fragment布局的背景色设为任意颜色，而左侧Fragment布局的颜色设为透明。为什么呢？我就不多解释，稍微改一下，跑跑看就知道喽~！

四、完成Activity的布局文件

先上代码，再一点点分析

<FrameLayout 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="com.dota.example.fishychenofslidingpanelayout.MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" >

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/background_darksider" />

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/background_gradient" />
        </FrameLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:background="@android:color/black" />
    </LinearLayout>

    <android.support.v4.widget.SlidingPaneLayout
        android:id="@+id/slidingPaneLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent" >

        <FrameLayout
            android:id="@+id/menuLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="100dp" />
        <FrameLayout
            android:id="@+id/contentLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </android.support.v4.widget.SlidingPaneLayout>

</FrameLayout>

关于结构呢，我给个更清晰的图

这边要用到帧布局（FrameLayout）

关于FrameLayout，这是个最简单的布局，所有的控件都会自动排到左上角，可能你会问了，这有什么用呢？首先，它很简单，吃的系统资源很少。其次，很很好的满足我们的需求，就像是ps里的图层一样。

好了，接着我们分析布局原理。我们定义一个内嵌的LinearLayout，在内部再写一个FrameLayotu和一个空View，高度比为1:3。空View填充黑色。子FrameLayout里填两个空View，一个背景是图片，一个是渐变背景，用来覆盖在前者上。关于<shape>，如下所示，用来做一个自定义形状的背景。

几个属性简单说一下：<corners>用来生成圆角矩形

<padding>用来设置内边距

<size>用来设置尺寸

<solid>填充色

<stroke>边框线

<gradient>渐变色

我这边只用到了最后一条，分别设置起始色，结束色，以及变化角度（270是自上而下）

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:startColor="@android:color/transparent"
        android:endColor="@android:color/black"
        android:angle="270"/>
   
</shape>

背景的效果如下

接着把SlidingPaneLayout放上去（FrameLayout里后来的会覆盖在先写的），里面再放两个帧布局。还记得之前说的吗？实现的是右侧Fragment完整显示到左侧Fragment完整显示。所以，这边给左边的布局一个MarginRight属性

五、主Activity

这边就是写关于变换的地方了

先实例化一个DisplayMetrics对象，接着我们要用这个来获取一些屏幕的显示信息

private DisplayMetrics metrics = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(metrics);

这样，我们就可以用metrics的一些field来获得屏幕的一些显示信息了

完整地看一下，声明的变量

private DisplayMetrics metrics = new DisplayMetrics();
	private SlidingPaneLayout slidingPaneLayout;
	private MenuFragment menuFragment;
	private ContentFragment contentFragment;
	private int maxMargin = 0;
	private ActionBar actionBar;

oncreate（）方法

@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initActionBar();
		initPaneLayout();
		slidingPaneLayout.setPanelSlideListener(new PanelSlideListener() {

			@Override
			public void onPanelSlide(View arg0, float percent) {
				int contentMargin = (int) (percent * maxMargin);
				FrameLayout.LayoutParams params = contentFragment
						.getCurrentParams();
				params.setMargins(0, 0, 0, contentMargin);
				contentFragment.setCurrentParams(params);

				float scale = 1 - ((1 - percent) * maxMargin * 4)
						/ (float) metrics.heightPixels;
				menuFragment.getFragmentView().setScaleX(scale);
				menuFragment.getFragmentView().setScaleY(scale);
				menuFragment.getFragmentView().setPivotX(0);
				menuFragment.getFragmentView().setPivotY(
						metrics.heightPixels / 2);
				menuFragment.getFragmentView().setAlpha(percent);
			}

			@Override
			public void onPanelOpened(View arg0) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onPanelClosed(View arg0) {
				// TODO Auto-generated method stub

			}
		});
	}

好，我们一点点看。

initActionBar（）方法我就不讲了。里面是我自己写的关于actionbar的一些操作，可以参考我写的关于ActionBar的学习 http://blog.csdn.net/zerolovesc1993/article/details/43338675

接着我们看initPaneLayout（）方法，用来初始化SlidingPaneLayout的

private void initPaneLayout() {
		getWindowManager().getDefaultDisplay().getMetrics(metrics);
		slidingPaneLayout = (SlidingPaneLayout) findViewById(R.id.slidingPaneLayout);
		menuFragment = new MenuFragment();
		contentFragment = new ContentFragment();
		FragmentTransaction transaction = getFragmentManager()
				.beginTransaction();
		transaction.replace(R.id.menuLayout, menuFragment);
		transaction.replace(R.id.contentLayout, contentFragment);
		transaction.commit();
		maxMargin = metrics.heightPixels / 5;
	}

关于Fragment的话，用一个FragmentTransaction对象的replace方法，来将activity_main中的控件和Fragment绑起来

完成之后用commit方法提交。当然，再此之前需要得到一个FragmentManager类的对象来开始事务（beginTransaction）。这边的maxMargin定的是屏幕高的5分之1，有什么用，我们接下来说。

我们基本快完成了，为我们的slidingpaneLayout组件设置对应的滑动监听器

setPanelSlideListener

完成3个抽象方法，我们只要写滑动监听的那个

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

float percent对应的那个是啥呢？是一个0~1的浮点型，用来模拟一个滑动进度条一样（可以这么理解，所以我把变量名改成了percent）

<span style="white-space:pre">				</span>int contentMargin = (int) (percent * maxMargin);
				FrameLayout.LayoutParams params = contentFragment
						.getCurrentParams();
				params.setMargins(0, 0, 0, contentMargin);
				contentFragment.setCurrentParams(params);

这一段用来设置右边的动态变化的。原理很简单，先得到右侧的LayoutParams，这个东西相当于一个layout的信息包，里面封装了关于layout的信息。再重置Margin，四个参数对应左、上、右、下，这边的contentMargin就是我们根据前边定的maxMargin结合percent来实现动态根据滑动距离改变右侧的下边距。

接着是左边的动态变化的

float scale = 1 - ((1 - percent) * maxMargin * 4)
						/ (float) metrics.heightPixels;
				menuFragment.getFragmentView().setScaleX(scale);
				menuFragment.getFragmentView().setScaleY(scale);
				menuFragment.getFragmentView().setPivotX(0);
				menuFragment.getFragmentView().setPivotY(
						metrics.heightPixels / 2);
				menuFragment.getFragmentView().setAlpha(percent);

用到了三个方法，setScale用来设置变换的 1代表不变，setPivot 用来设置变换的起点的（从左侧的当中开始），setAlpha用来设置透明度，float 0为不可见，1为100%显示。X,Y分别对象变换的坐标，至于scale，是自己改的，要是嫌麻烦，可以直接用percent，不过效果没这个好。（一开始的时候，就有一个不错的大小，用percent的话，一开始的大小太小了）

Activity完整的代码

public class MainActivity extends Activity {
	private DisplayMetrics metrics = new DisplayMetrics();
	private SlidingPaneLayout slidingPaneLayout;
	private MenuFragment menuFragment;
	private ContentFragment contentFragment;
	private int maxMargin = 0;
	private ActionBar actionBar;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initActionBar();
		initPaneLayout();
		slidingPaneLayout.setPanelSlideListener(new PanelSlideListener() {

			@Override
			public void onPanelSlide(View arg0, float percent) {
				int contentMargin = (int) (percent * maxMargin);
				FrameLayout.LayoutParams params = contentFragment
						.getCurrentParams();
				params.setMargins(0, 0, 0, contentMargin);
				contentFragment.setCurrentParams(params);

				float scale = 1 - ((1 - percent) * maxMargin * 4)
						/ (float) metrics.heightPixels;
				menuFragment.getFragmentView().setScaleX(scale);
				menuFragment.getFragmentView().setScaleY(scale);
				menuFragment.getFragmentView().setPivotX(0);
				menuFragment.getFragmentView().setPivotY(
						metrics.heightPixels / 2);
				menuFragment.getFragmentView().setAlpha(percent);
			}

			@Override
			public void onPanelOpened(View arg0) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onPanelClosed(View arg0) {
				// TODO Auto-generated method stub

			}
		});
	}

	private void initPaneLayout() {
		getWindowManager().getDefaultDisplay().getMetrics(metrics);
		slidingPaneLayout = (SlidingPaneLayout) findViewById(R.id.slidingPaneLayout);
		menuFragment = new MenuFragment();
		contentFragment = new ContentFragment();
		FragmentTransaction transaction = getFragmentManager()
				.beginTransaction();
		transaction.replace(R.id.menuLayout, menuFragment);
		transaction.replace(R.id.contentLayout, contentFragment);
		transaction.commit();
		maxMargin = metrics.heightPixels / 5;
	}

	private void initActionBar() {
		actionBar = getActionBar();
		actionBar.setHomeButtonEnabled(true);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.menu_actionbar, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case android.R.id.home:
			slidingPaneLayout.openPane();
			break;
		case R.id.menu_candy:
			slidingPaneLayout.closePane();
			break;
		default:
			break;
		}
		return true;
	}
}

其中写到的openPane和closePane方法是对应的，用来打开左侧Fragment和关闭。其中，要用到actionBar.setHomeButtonEnabled(true)方法才能让home按钮可以被点击

百度云链接：

http://pan.baidu.com/s/1hqIPC6S

Inori酱

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
鱼鱼Chen之学写自己的apk（二）使用SlidingPaneLayout实现漂亮的布局

首先，这是原代码的链接：http://www.eoeandroid.com/thread-545123-1-1.html可惜的是，当初原作者只上了代码，并没有作解释。一开始理解的时候的确有点费劲。于是这篇算作是译文吧，基本是自己的理解，所以也许有点出入，当然了，也加入了ActionBar的部分知识点。一、分析一下结构1个Activity以及它的2个Fragment，布局是对应的
复制链接

扫一扫