android 仿人人网滑动侧边栏



很多应用为了节省空间而又使界面能够充足的显示信息，大多数应用都采用了侧边栏的方式，如下图：
    
                     
    
    来说说它的思路，底下是两个或多个视图，分别通过控制它们的宽度、左边距来控制它们的显示，来看看代码
    activity_main.xml

查看源码

打印 ?

01	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

02	xmlns:tools="http://schemas.android.com/tools"

03	android:id="@+id/layout"

04	android:layout_width="match_parent"

05	android:layout_height="match_parent"

06	android:orientation="horizontal"

07	tools:context=".MainActivity" >

08

09	<LinearLayout

10	android:id="@+id/menu"

11	android:layout_width="match_parent"

12	android:layout_height="match_parent"

13	android:background="@drawable/menu" >

14	</LinearLayout>

15

16	<LinearLayout

17	android:id="@+id/content"

18	android:layout_width="match_parent"

19	android:layout_height="match_parent"

20	android:background="@drawable/content" >

21	</LinearLayout>

22

23	</LinearLayout>

    MainActivity.java

查看源码

打印 ?

01	public class MainActivity extends Activity implements OnTouchListener

02

{

03

04	private LinearLayout menu;

05	private LinearLayout content;

06	private LayoutParams menuParams;

07	private LayoutParams contentParams;

08

09	// menu完全显示时，留给content的宽度值。

10	private static final int menuPadding = 80;

11

12

// 分辨率

13	private int disPlayWidth;

14

15	private float xDown;

16	private float xMove;

17

18	private boolean mIsShow = false;

19	private static final int speed = 50;

20

21

@Override

22	protected void onCreate(Bundle savedInstanceState)

23

{

24	super.onCreate(savedInstanceState);

25	requestWindowFeature(Window.FEATURE_NO_TITLE);

26	setContentView(R.layout.activity_main);

27

28	disPlayWidth = getWindowManager().getDefaultDisplay().getWidth();

29

30	menu = (LinearLayout) findViewById(R.id.menu);

31	content = (LinearLayout) findViewById(R.id.content);

32	menuParams = (LayoutParams) menu.getLayoutParams();

33	contentParams = (LayoutParams) content.getLayoutParams();

34	findViewById(R.id.layout).setOnTouchListener(this);

35

36	menuParams.width = disPlayWidth - menuPadding;

37	contentParams.width = disPlayWidth;

38	showMenu(mIsShow);

39

}

40

41

@Override

42	public boolean onTouch(View v, MotionEvent event)

43

{

44	switch (event.getAction())

45

{

46	case MotionEvent.ACTION_DOWN:

47	showMenu(!mIsShow);

48

break;

49	case MotionEvent.ACTION_MOVE:

50

break;

51	case MotionEvent.ACTION_UP:

52

break;

53

}

54	return true;

55

}

56

57	private void showMenu(boolean isShow)

58

{

59	if (isShow)

60

{

61	mIsShow = true;

62	menuParams.leftMargin = 0;

63

} else

64

{

65	mIsShow = false;

66	menuParams.leftMargin = 0 - menuParams.width;

67

}

68	menu.setLayoutParams(menuParams);

69

}

70

}

    上述代码只是用两张图片代替了两个复杂的view(layout)，你会发现，两个视图虽然可以切换，但没有动画的感觉，再加上要有拖动效果，所以，我们再给它加个平移时间段，看起来有动画的效果
    

查看源码

打印 ?

001	package com.example.test;

002

003	import android.app.Activity;

004	import android.os.AsyncTask;

005	import android.os.Bundle;

006	import android.util.Log;

007	import android.view.MotionEvent;

008	import android.view.View;

009	import android.view.View.OnClickListener;

010	import android.view.View.OnTouchListener;

011	import android.view.Window;

012	import android.widget.LinearLayout;

013	import android.widget.LinearLayout.LayoutParams;

014

015	public class MainActivity extends Activity implements OnTouchListener, OnClickListener

016

{

017

018	private LinearLayout menu;

019	private LinearLayout content;

020	private LayoutParams menuParams;

021	private LayoutParams contentParams;

022

023	// menu完全显示时，留给content的宽度值。

024	private static final int menuPadding = 80;

025

026

// 分辨率

027	private int disPlayWidth;

028

029	private float xDown;

030	private float xMove;

031

032	private boolean mIsShow = false;

033	private static final int speed = 50;

034

035

@Override

036	protected void onCreate(Bundle savedInstanceState)

037

{

038	super.onCreate(savedInstanceState);

039	requestWindowFeature(Window.FEATURE_NO_TITLE);

040	setContentView(R.layout.activity_main);

041

042	disPlayWidth = getWindowManager().getDefaultDisplay().getWidth();

043

044	menu = (LinearLayout) findViewById(R.id.menu);

045	menu.setOnClickListener(this);

046	content = (LinearLayout) findViewById(R.id.content);

047	content.setOnClickListener(this);

048	menuParams = (LayoutParams) menu.getLayoutParams();

049	contentParams = (LayoutParams) content.getLayoutParams();

050	//findViewById(R.id.layout).setOnTouchListener(this);

051

052	menuParams.width = disPlayWidth - menuPadding;

053	contentParams.width = disPlayWidth;

054	showMenu(mIsShow);

055

}

056

057

@Override

058	public void onClick(View v)

059

{

060	switch (v.getId())

061

{

062	case R.id.menu:

063	new showMenuAsyncTask().execute(-50);

064

break;

065	case R.id.content:

066	new showMenuAsyncTask().execute(50);

067

break;

068

}

069

070

}

071

072

@Override

073	public boolean onTouch(View v, MotionEvent event)

074

{

075	switch (event.getAction())

076

{

077	case MotionEvent.ACTION_DOWN:

078	showMenu(!mIsShow);

079

break;

080	case MotionEvent.ACTION_MOVE:

081

break;

082	case MotionEvent.ACTION_UP:

083

break;

084

}

085	return true;

086

}

087

088	private void showMenu(boolean isShow)

089

{

090	if (isShow)

091

{

092	mIsShow = true;

093	menuParams.leftMargin = 0;

094

} else

095

{

096	mIsShow = false;

097	menuParams.leftMargin = 0 - menuParams.width;

098

}

099	menu.setLayoutParams(menuParams);

100

}

101

102

/**

103

*

104	*这是主要代码：模拟动画过程，也让我更熟悉了AsyncTask这玩意儿

105

*

106

*/

107	class showMenuAsyncTask extends AsyncTask<Integer, Integer, Integer>

108

{

109

110

@Override

111	protected Integer doInBackground(Integer... params)

112

{

113	int leftMargin = menuParams.leftMargin;

114

115	//这里也是值得学习的地方，如果在平常，自己肯定又是这样写:

116	//   if(){

117	//       while()

118

//  }

119	//   else if(){

120	//       while()

121

//  }

122	while (true)

123

{

124	leftMargin += params[0];

125	if (params[0] > 0 && leftMargin >= 0)

126

{

127

break;

128	} else if (params[0] < 0 && leftMargin <= -menuParams.width)

129

{

130

break;

131

}

132	publishProgress(leftMargin);

133

try

134

{

135	Thread.sleep(30);

136	} catch (InterruptedException e)

137

{

138	e.printStackTrace();

139

}

140

}

141	return leftMargin;

142

}

143

144

@Override

145	protected void onProgressUpdate(Integer... values)

146

{

147	super.onProgressUpdate(values);

148	menuParams.leftMargin = values[0];

149	menu.setLayoutParams(menuParams);

150

}

151

152

@Override

153	protected void onPostExecute(Integer result)

154

{

155	super.onPostExecute(result);

156	menuParams.leftMargin = result;

157	menu.setLayoutParams(menuParams);

158

}

159

160

}

161

162

}