In Android, how does one use viewpager to achieve a drag effect similar to laucher?

Nowadays, many Android applications will guide how to use some features of the application after the first installation, which will provide a good user experience, it can help users better use certain functions of applications. In fact, this function has the same effect as the luncher function on the main Android interface, allowing you to drag left and right.

The following uses viewpager instances to demonstrate how to implement this function. Let's take a look at the demo structure:

Note: viewpager class is a class that implements smooth switching between the left and right screens. It is provided by Google. To use viewpager, first introduce the jar package of android-support-v4.jar. The libs folder in the project contains the android-support-v4.jar jar package. The package in the drawable folder contains image resource files.

The source code of each file in the project is as follows:

Main. xml source code:

01
<?XML Version="1.0" Encoding="UTF-8"?>

02
<Framelayout Xmlns: Android=Http://schemas.android.com/apk/res/android"

03
Android: layout_width="Fill_parent"

04
Android: layout_height="Fill_parent"

05
Android: Orientation="Vertical" >

06

07
<Android. Support. v4.view. viewpager

08
Android: ID="@ + ID/guidepages"

09
Android: layout_width="Fill_parent"

10
Android: layout_height="Wrap_content"/>

11

12
<Relativelayout

13
Android: layout_width="Fill_parent"

14
Android: layout_height="Wrap_content"

15
Android: Orientation="Vertical" >

16
<Linearlayout

17
Android: ID="@ + ID/viewgroup"

18
Android: layout_width="Fill_parent"

19
Android: layout_height="Wrap_content"

20
Android: layout_alignparentbottom="True"

21
Android: layout_marginbottom="30dp"

22
Android: gravity="Center_horizontal"

23
Android: Orientation="Horizontal" >

24
</Linearlayout>

25
</Relativelayout>

26

27
</Framelayout>

Item01.xml source code:

01
<?XML Version="1.0" Encoding="UTF-8"?>

02
<Linearlayout Xmlns: Android=Http://schemas.android.com/apk/res/android"

03
Android: layout_width="Fill_parent"

04
Android: layout_height="Fill_parent"

05
Android: Orientation="Vertical" >

06

07
<Imageview

08
Android: layout_width="Fill_parent"

09
Android: layout_height="Fill_parent"

10
Android: Background="@ Drawable/feature_guide_0" >

11
</Imageview>

12

13
</Linearlayout>

The source code of the item02.xml, item03.xml, and item04.xml layout files is the same as that of the item01.xml layout file, but the background image of the Android: Background attribute in imageview is different.

Guideviewdemoactivity. Java source code:

001
Package Com. andyidea. guidedemo;

002

003
Import Java. util. arraylist;

004

005
Import Android. App. activity;

006
Import Android. OS. Bundle;

007
Import Android. OS. parcelable;

008
Import Android. Support. v4.view. pageradapter;

009
Import Android. Support. v4.view. viewpager;

010
Import Android. Support. v4.view. viewpager. onpagechangelistener;

011
Import Android. View. layoutinflater;

012
Import Android. View. view;

013
Import Android. View. viewgroup;

014
Import Android. View. viewgroup. layoutparams;

015
Import Android. View. window;

016
Import Android. widget. imageview;

017

018
Public Class GuideviewdemoactivityExtends Activity {

019

020
Private Viewpager;

021
Private Arraylist <View> pageviews;

022
Private Viewgroup main, group;

023
Private Imageview;

024
Private Imageview [] imageviews;

025

026
/** Called when the activity is first created .*/

027
@ Override

028
Public Void Oncreate (bundle savedinstancestate ){

029
Super. Oncreate (savedinstancestate );

030
This. Requestwindowfeature (window. feature_no_title );

031

032
Layoutinflater Inflater = getlayoutinflater ();

033
Pageviews =New Arraylist <View> ();

034
Pageviews. Add (Inflater. Inflate (R. layout. item01,Null));

035
Pageviews. Add (Inflater. Inflate (R. layout. item02,Null));

036
Pageviews. Add (Inflater. Inflate (R. layout. item03,Null));

037
Pageviews. Add (Inflater. Inflate (R. layout. item04,Null));

038

039
Imageviews =New Imageview [pageviews. Size ()];

040
Main = (viewgroup) Inflater. Inflate (R. layout. Main,Null);

041

042
// Group is the linearlayout in R. layou. Main that is responsible for wrapping small dots.

043
Group = (viewgroup) Main. findviewbyid (R. Id. viewgroup );

044

045
Viewpager = (viewpager) Main. findviewbyid (R. Id. guidepages );

046

047
For (Int I =0; I <pageviews. Size (); I ++ ){

048
Imageview =New Imageview (guideviewdemoactivity.This);

049
Imageview. setlayoutparams (New Layoutparams (20,20));

050
Imageview. setpadding (20,0,20,0);

051
Imageviews [I] = imageview;

052
If (I =0){

053
// The first image is selected by default.

054
Imageviews [I]. setbackgroundresource (R. drawable. page_indicator_focused );

055
}Else {

056
Imageviews [I]. setbackgroundresource (R. drawable. page_indicator );

057
}

058
Group. addview (imageviews [I]);

059
}

060

061
Setcontentview (main );

062

063
Viewpager. setadapter (New Guidepageadapter ());

064
Viewpager. setonpagechangelistener (New Guidepagechangelistener ());

065
}

066

067
/** Guide page adapter */

068
Class GuidepageadapterExtends Pageradapter {

069

070
@ Override

071
Public Int Getcount (){

072
Return Pageviews. Size ();

073
}

074

075
@ Override

076
Public Boolean Isviewfromobject (view arg0, object arg1 ){

077
Return Arg0 = arg1;

078
}

079

080
@ Override

081
Public Int Getitemposition (Object object ){

082
// Todo auto-generated method stub

083
Return Super. Getitemposition (object );

084
}

085

086
@ Override

087
Public Void Destroyitem (view arg0,Int Arg1, object arg2 ){

088
// Todo auto-generated method stub

089
(Viewpager) arg0). removeview (pageviews. Get (arg1 ));

090
}

091

092
@ Override

093
Public Object instantiateitem (view arg0,Int Arg1 ){

094
// Todo auto-generated method stub

095
(Viewpager) arg0). addview (pageviews. Get (arg1 ));

096
Return Pageviews. Get (arg1 );

097
}

098

099
@ Override

100
Public Void Restorestate (parcelable arg0, classloader arg1 ){

101
// Todo auto-generated method stub

102

103
}

104

105
@ Override

106
Public Parcelable savestate (){

107
// Todo auto-generated method stub

108
Return Null;

109
}

110

111
@ Override

112
Public Void Startupdate (view arg0 ){

113
// Todo auto-generated method stub

114

115
}

116

117
@ Override

118
Public Void Finishupdate (view arg0 ){

119
// Todo auto-generated method stub

120

121
}

122
}

123

124
/** Modify the listener on the guide page */

125
Class GuidepagechangelistenerImplements Onpagechangelistener {

126

127
@ Override

128
Public Void Onpagescrollstatechanged (Int Arg0 ){

129
// Todo auto-generated method stub

130

131
}

132

133
@ Override

134
Public Void Onpagescrolled (Int Arg0,Float Arg1,Int Arg2 ){

135
// Todo auto-generated method stub

136

137
}

138

139
@ Override

140
Public Void Onpageselected (Int Arg0 ){

141
For (Int I =0; I <imageviews. length; I ++ ){

142
Imageviews [arg0]

143
. Setbackgroundresource (R. drawable. page_indicator_focused );

144
If (Arg0! = I ){

145
Imageviews [I]

146
. Setbackgroundresource (R. drawable. page_indicator );

147
}

148
}

149

150
}

151

152
}

153

154
}

Run the precedingProgram, The effect is as follows:

So far, the viewpager component has been used to achieve the sliding (drag) effect between the left and right. This article is [Andy. Chen] original. Please indicate the source for reprinting. Thank you.