SlidingPaneLayout
来源:互联网 发布:cn.hn域名 编辑:程序博客网 时间:2024/05/29 05:56
In this post, we want to show how to use SlidingPaneLayout. This is an interesting component that can be used when we want to have a multi-pane horizontal layout. This component is divided in two different parts:
- left side: The master part. It usually contains a list of values (i.e. Contacts and so on)
- right side: The detail part. It contains the details of the values in the left side.
This component helps us to divide the available screen space in two different sides that doesn’t overlap and can be sledded horizontally. It is smart enough to know when it is the time to enable the sliding feature or when the screen width is enough to hold both parts.
In this post, we will show how to use this component implementing a bookmark list in one side and the corresponding web content view in the other side. SlidingPaneLayout can be used with fragment or with other standard components, we will show how to use it with fragments. One thing we have to remember is that in our main layout it has to be the root. At the end, we want to have something like the picture shown below:
Let’s start.
SlidingPaneLayout set up
The first thing we need is creating our main layout:
01
<
android.support.v4.widget.SlidingPaneLayout
02
xmlns:android
=
"http://schemas.android.com/apk/res/android"
03
android:layout_width
=
"match_parent"
04
android:layout_height
=
"match_parent"
05
android:id
=
"@+id/sp"
>
06
<!-- Left side pane. (Master) -->
07
<
fragment
android:id
=
"@+id/leftpane"
08
android:name
=
"com.survivingwithandroid.slidingpanelayout.ListBookmarkFragment"
09
android:layout_width
=
"190dp"
10
android:layout_height
=
"match_parent"
11
android:layout_gravity
=
"left"
/>
12
13
<!-- Right side page. (Slave) -->
14
<
fragment
android:id
=
"@+id/rightpane"
15
android:name
=
"com.survivingwithandroid.slidingpanelayout.ViewBookmarkFragment"
16
android:layout_width
=
"350dp"
17
android:layout_height
=
"match_parent"
18
android:layout_gravity
=
"right"
19
android:layout_weight
=
"1"
20
/>
21
22
</
android.support.v4.widget.SlidingPaneLayout
>
Notice we have two fragment: one on the left side called ListBookmarkFragment and the other one on the right side called ViewBookmarkFragment. At line 1, we have our SlidingPaneLayout as the root element. One thing we have to set up is the width of this two fragment, at line 9 and 16. If the screen width is more than the sum of the two fragments width then the two fragments are visible at the same time, otherwise we have to slide left and right to enable one of them.
I won’t spend much time talking about fragment implementation details because is out of the topic, if you are interested you can give a look at the source code.
The main activity that holds the two fragments and handle the sliding pane is shown below:
1
public
class
MainActivity
extends
Activity {
2
SlidingPaneLayout pane;
3
@Override
4
protected
void
onCreate(Bundle savedInstanceState) {
5
super
.onCreate(savedInstanceState);
6
setContentView(R.layout.activity_main);
7
}
8
...
9
}
Everything is very simple, but we need to implement more thing is we want to “use” the SlidingPaneLayout.
SlidingPaneLayout Listener
The api gives us the capability to listen when the user slide our panes left and right so that we can react in the right way and implement here our business logic. We have to implements an interface called SlidingPaneLayout.PanelSlideListener.
01
private
class
PaneListener
implements
SlidingPaneLayout.PanelSlideListener {
02
03
@Override
04
public
void
onPanelClosed(View view) {
05
System.out.println(
"Panel closed"
);
06
}
07
08
@Override
09
public
void
onPanelOpened(View view) {
10
System.out.println(
"Panel opened"
);
11
}
12
13
@Override
14
public
void
onPanelSlide(View view,
float
arg1) {
15
System.out.println(
"Panel sliding"
);
16
}
17
18
}
So in our Activity let’s add this piece of code. As you can notice at line 1 we implement that interface and we get notified when the left panel is closed, is opened and when the user is sliding. We are more interested on the first two events (closed and opened). Then we have to register our listener:
1
...
2
@Override
3
protected
void
onCreate(Bundle savedInstanceState) {
4
super
.onCreate(savedInstanceState);
5
setContentView(R.layout.activity_main);
6
pane = (SlidingPaneLayout) findViewById(R.id.sp);
7
pane.setPanelSlideListener(
new
PaneListener());
8
}
9
....
Running the code we can notice that when the left pane is closed or opened in the log we get the message. Now we can a way to get notified about the main two events. We can use it to set up correctly the action bar, for example.
SlidingPaneLayout and Actionbar
Using the listener, we can setup correctly the action bar. This aspect is very important because we can change the action bar icons according to the opened panel. In other words, when the left panel is open we can show some icons and when it is closed we can show other icons. To do it, we have simply implement our logic inside the listener methods:
01
private
class
PaneListener
implements
SlidingPaneLayout.PanelSlideListener {
02
03
@Override
04
public
void
onPanelClosed(View view) {
05
System.out.println(
"Panel closed"
);
06
07
getFragmentManager().findFragmentById(R.id.leftpane).setHasOptionsMenu(
false
);
08
getFragmentManager().findFragmentById(R.id.rightpane).setHasOptionsMenu(
true
);
09
}
10
11
@Override
12
public
void
onPanelOpened(View view) {
13
System.out.println(
"Panel opened"
);
14
getFragmentManager().findFragmentById(R.id.leftpane).setHasOptionsMenu(
true
);
15
getFragmentManager().findFragmentById(R.id.rightpane).setHasOptionsMenu(
false
);
16
}
17
18
@Override
19
public
void
onPanelSlide(View view,
float
arg1) {
20
System.out.println(
"Panel sliding"
);
21
}
22
23
}
We use setHasOptionMenu to turn on and off the fragment menu (line 7,8,14,15). Running the code we have:
As you can notice when you open the left panel the action bar icons change.
Inter fragment communication
One more thing we need to explain: how to exchange information between fragments. In other word, we want when user clicks on a bookmark list on the left side the corresponding web page is opened on the right side.
To get it, we can simply create our interface that acts as a listener and let our main activity implement it. So that when user select an item in the list on the left panel we notify the event to the main activity, that in turns call the right method in fragment that handles the right panel. So we have:
1
public
interface
BookmarkListener {
2
public
void
onChangeBookmark(String bookmark);
3
}
The interface. In the fragment that handles the left panel we have:
01
....
02
@Override
03
public
void
onAttach(Activity activity) {
04
05
// It's time we check if our activity implements the right inteface
06
if
(! (activity
instanceof
BookmarkListener) )
07
throw
new
ClassCastException();
08
09
super
.onAttach(activity);
10
11
}
12
...
13
14
@Override
15
public
View onCreateView(LayoutInflater inflater, ViewGroup container,
16
Bundle savedInstanceState) {
17
18
View v = inflater.inflate(R.layout.leftside_layout, container,
true
);
19
ListView lView = (ListView) v.findViewById(R.id.bookList);
20
LinkAdapter la =
new
LinkAdapter(bookmarkList, getActivity());
21
lView.setAdapter(la);
22
lView.setOnItemClickListener(
new
AdapterView.OnItemClickListener() {
23
24
@Override
25
public
void
onItemClick(AdapterView<?> parent, View view,
int
position,
26
long
id) {
27
( (BookmarkListener) getActivity()).onChangeBookmark( bookmarkList.get(position).link );
28
}
29
});
30
setHasOptionsMenu(
true
);
31
return
v;
32
}
33
...
In the main activity, we have:
01
public
class
MainActivity
extends
Activity
implements
BookmarkListener{
02
03
....
04
@Override
05
public
void
onChangeBookmark(String bookmark) {
06
// We get notified when user clicks on a bookmark in the ListBookmarkFragment
07
System.out.println(
"Bookmark ["
+bookmark+
"]"
);
08
ViewBookmarkFragment f = (ViewBookmarkFragment) getFragmentManager().findFragmentById(R.id.rightpane);
09
f.setBookmark(bookmark);
10
11
}
12
....
13
}
At the end we have:
The last thing we need to take care is to set up correctly the icons the first time the app is launched. In this case we need to add this piece of code to the onCreate method:
01
public
class
MainActivity
extends
Activity
implements
BookmarkListener{
02
SlidingPaneLayout pane;
03
@Override
04
protected
void
onCreate(Bundle savedInstanceState) {
05
super
.onCreate(savedInstanceState);
06
setContentView(R.layout.activity_main);
07
pane = (SlidingPaneLayout) findViewById(R.id.sp);
08
pane.setPanelSlideListener(
new
PaneListener());
09
10
if
(!pane.isSlideable()) {
11
getFragmentManager().findFragmentById(R.id.leftpane).setHasOptionsMenu(
false
);
12
getFragmentManager().findFragmentById(R.id.rightpane).setHasOptionsMenu(
true
);
13
}
14
}
- Source code available @ github
- SlidingPaneLayout
- SlidingPaneLayout
- SlidingPaneLayout
- SlidingPaneLayout入门
- Google support4 SlidingPaneLayout DrawerLayout
- SlidingPaneLayout的基本使用
- SlidingPaneLayout的基本使用
- Android SlidingPaneLayout: Tutorial
- Android SlidingPaneLayout的使用
- SlidingPaneLayout的基本使用
- 不能滑动的SlidingPaneLayout
- SlidingPaneLayout、Navigation Drawer、drawerlayout
- SlidingPaneLayout双栏滑动
- SlidingPaneLayout:侧拉菜单
- 安卓SlidingPaneLayout
- SlidingPaneLayout的基本使用
- SlidingPaneLayout使用用法
- SlidingPaneLayout常用设置
- SQL SERVER中XML查询:FOR XML指定RAW
- 全自动过滤器采用刷式结构与原理详解
- 使用git管理服务器开发环境配置
- HashMap和Hashtable
- MongoDB故障排查记录 [rsHealthPoll] couldn't connect to server
- SlidingPaneLayout
- oracle decode函数使用方法
- Unity的json处理
- js 延迟加载
- 列“ReservedWord”不属于表 ReservedWords
- svmscale 解析
- 求一份jsp或者java读取邮箱附件到数据库的代码
- IOS---单例模式
- 关联表的数据组合