How to achieve the Guiding Effect of sliding left and right in Android

Source: Internet
Author: User
Tags home screen

The purpose of this article is to achieve the Guiding Effect of sliding left and right. So what is the guiding effect? In order to have a better user experience, the current application usually displays some guidance help pages at the beginning of the application, so that users can better understand the functions of the application, even some news readers will display some headlines in the form of guidance. The most basic thing is that our mobile phone's home screen is like this.

Next we will start to achieve our sliding guide effect. For better understanding, let's take a look at the implementation results first,
As shown in:


Here, we need to use a package -- android-support-v4.jar mentioned by google, which contains some very useful classes, among which ViewPager class to implement switching between pages, for more information about android-support-v4.jar, you can visit the Official google Website: http://developer.android.com/sdk/compatibility-library.html

First, let's take a look at the project structure:

  

In the project structure, we need to first introduce the android-support-v4.jar package. Next let's take a look at the code implementation.
The core implementation code is as follows:

Copy codeThe Code is as follows: package com. test. guide;
Import java. util. ArrayList;
Import android. app. Activity;
Import android. OS. Bundle;
Import android. OS. Parcelable;
Import android. support. v4.view. PagerAdapter;
Import android. support. v4.view. ViewPager;
Import android. support. v4.view. ViewPager. OnPageChangeListener;
Import android. view. LayoutInflater;
Import android. view. View;
Import android. view. ViewGroup;
Import android. view. Window;
Import android. view. ViewGroup. LayoutParams;
Import android. widget. ImageView;
/**
* Android provides a sliding guide between left and right
* @ Description: Android provides a sliding guide between left and right.
* @ File: MyGuideViewActivity. java
* @ Package com. test. guide
* @ Author Hanyonglu
* @ Date 11:15:18 pm
* @ Version V1.0
*/
Public class MyGuideViewActivity extends Activity {
Private ViewPager viewPager;
Private ArrayList <View> pageViews;
Private ImageView imageView;
Private ImageView [] imageViews;
// Wrap the slide Image LinearLayout
Private ViewGroup main;
// LinearLayout of small dots
Private ViewGroup group;

/** Called when the activity is first created .*/
@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
// Set the Untitled window
RequestWindowFeature (Window. FEATURE_NO_TITLE );

LayoutInflater inflater = getLayoutInflater ();
PageViews = new ArrayList <View> ();
PageViews. add (inflater. inflate (R. layout. item05, null ));
PageViews. add (inflater. inflate (R. layout. item06, null ));
PageViews. add (inflater. inflate (R. layout. item01, null ));
PageViews. add (inflater. inflate (R. layout. item02, null ));
PageViews. add (inflater. inflate (R. layout. item03, null ));
PageViews. add (inflater. inflate (R. layout. item04, null ));

ImageViews = new ImageView [pageViews. size ()];
Main = (ViewGroup) inflater. inflate (R. layout. main, null );

Group = (ViewGroup) main. findViewById (R. id. viewGroup );
ViewPager = (ViewPager) main. findViewById (R. id. guidePages );

For (int I = 0; I <pageViews. size (); I ++ ){
ImageView = new ImageView (MyGuideViewActivity. this );
ImageView. setLayoutParams (new LayoutParams (20, 20 ));
ImageView. setPadding (20, 0, 20, 0 );
ImageViews [I] = imageView;

If (I = 0 ){
// The first image is selected by default.
ImageViews [I]. setBackgroundResource (R. drawable. page_indicator_focused );
} Else {
ImageViews [I]. setBackgroundResource (R. drawable. page_indicator );
}

Group. addView (imageViews [I]);
}

SetContentView (main );

ViewPager. setAdapter (new GuidePageAdapter ());
ViewPager. setOnPageChangeListener (new GuidePageChangeListener ());
}

// Data adapter on the guide page
Class GuidePageAdapter extends PagerAdapter {

@ Override
Public int getCount (){
Return pageViews. size ();
}

@ Override
Public boolean isViewFromObject (View arg0, Object arg1 ){
Return arg0 = arg1;
}

@ Override
Public int getItemPosition (Object object ){
// TODO Auto-generated method stub
Return super. getItemPosition (object );
}

@ Override
Public void destroyItem (View arg0, int arg1, Object arg2 ){
// TODO Auto-generated method stub
(ViewPager) arg0). removeView (pageViews. get (arg1 ));
}

@ Override
Public Object instantiateItem (View arg0, int arg1 ){
// TODO Auto-generated method stub
(ViewPager) arg0). addView (pageViews. get (arg1 ));
Return pageViews. get (arg1 );
}

@ Override
Public void restoreState (Parcelable arg0, ClassLoader arg1 ){
// TODO Auto-generated method stub

}

@ Override
Public Parcelable saveState (){
// TODO Auto-generated method stub
Return null;
}

@ Override
Public void startUpdate (View arg0 ){
// TODO Auto-generated method stub

}

@ Override
Public void finishUpdate (View arg0 ){
// TODO Auto-generated method stub

}
}

// Modify the event listener on the guide page
Class GuidePageChangeListener implements OnPageChangeListener {

@ Override
Public void onPageScrollStateChanged (int arg0 ){
// TODO Auto-generated method stub

}

@ Override
Public void onPageScrolled (int arg0, float arg1, int arg2 ){
// TODO Auto-generated method stub

}

@ Override
Public void onPageSelected (int arg0 ){
For (int I = 0; I <imageViews. length; I ++ ){
ImageViews [arg0]. setBackgroundResource (R. drawable. page_indicator_focused );

If (arg0! = I ){
ImageViews [I]. setBackgroundResource (R. drawable. page_indicator );
}
}
}
}
}

In the previous example, ViewFlipper is often used to implement the left and right sliding effect. In this example, the ViewPager class implementation in Google's android-support-v4.jar is used. Here, I have created six page la s, that is, switching between six pages. First, you need to add the six layout pages to the set to facilitate the operation. The following code:Copy codeThe Code is as follows: LayoutInflater inflater = getLayoutInflater ();
PageViews = new ArrayList <View> ();
PageViews. add (inflater. inflate (R. layout. item05, null ));
PageViews. add (inflater. inflate (R. layout. item06, null ));
PageViews. add (inflater. inflate (R. layout. item01, null ));
PageViews. add (inflater. inflate (R. layout. item02, null ));
PageViews. add (inflater. inflate (R. layout. item03, null ));
PageViews. add (inflater. inflate (R. layout. item04, null ));

There are several layout pages with a few dot images, as shown in the following code:Copy codeThe Code is as follows: imageViews = new ImageView [pageViews. size ()];

Use the for loop to set the dot image layout, as shown in the following code:Copy codeThe Code is as follows: for (int I = 0; I <pageViews. size (); I ++ ){
ImageView = new ImageView (MyGuideViewActivity. this );
ImageView. setLayoutParams (new LayoutParams (20, 20 ));
ImageView. setPadding (20, 0, 20, 0 );
ImageViews [I] = imageView;

If (I = 0 ){
// The first image is selected by default.
ImageViews [I]. setBackgroundResource (R. drawable. page_indicator_focused );
} Else {
ImageViews [I]. setBackgroundResource (R. drawable. page_indicator );
}

Group. addView (imageViews [I]);
}

Then set the data adapter and page switching event listener for ViewPager, as shown in the following code:Copy codeThe Code is as follows: viewPager. setAdapter (new GuidePageAdapter ());
ViewPager. setOnPageChangeListener (new GuidePageChangeListener ());

In the data adapter on the guide page, you must control page initialization and destruction operations in the callback function. For details, refer to the above Code.

On the guide page, change the event listener (GuidePageChangeListener) to make sure that the dot picture changes when switching the page, as shown in the following code:Copy codeThe Code is as follows: @ Override
Public void onPageSelected (int arg0 ){
For (int I = 0; I <imageViews. length; I ++ ){
ImageViews [arg0]. setBackgroundResource (R. drawable. page_indicator_focused );

If (arg0! = I ){
ImageViews [I]. setBackgroundResource (R. drawable. page_indicator );
}
}
}

The code of the layout interface is as follows. The Code of item. xml is as follows:Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: orientation = "vertical">
<LinearLayout
Android: id = "@ + id/linearLayout01"
Android: layout_width = "match_parent"
Android: layout_height = "wrap_content"
Android: orientation = "vertical">
</LinearLayout>

<LinearLayout
Android: id = "@ + id/linearLayout02"
Android: layout_width = "match_parent"
Android: layout_height = "wrap_content"
Android: orientation = "vertical"
Android: background = "@ drawable/divider_horizontal_line">

</LinearLayout>

<LinearLayout
Android: id = "@ + id/linearLayout1"
Android: layout_width = "match_parent"
Android: layout_height = "wrap_content"
Android: orientation = "vertical">
<ImageView
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: background = "@ drawable/feature_guide_0">
</ImageView>
</LinearLayout>
<LinearLayout
Android: id = "@ + id/linearLayout2"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: orientation = "vertical"
Android: background = "@ drawable/bg">

<LinearLayout
Android: id = "@ + id/linearLayout2"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: orientation = "vertical"
Android: layout_marginTop = "30px"
Android: layout_marginBottom = "30px"
Android: layout_marginLeft = "30px"
Android: layout_marginRight = "30px"
Android: background = "@ drawable/divider_horizontal_line">
</LinearLayout>
<LinearLayout
Android: id = "@ + id/linearLayout3"
Android: layout_width = "match_parent"
Android: layout_height = "wrap_content"
Android: orientation = "vertical">
<TextView
Android: id = "@ + id/textView1"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: textColor = "#000000"
Android: paddingLeft = "30px"
Android: paddingRight = "30px"
Android: text = "@ string/text1"/>

</LinearLayout>

</LinearLayout>
</LinearLayout>

The navigation at the top is a separate layout, which is referenced by the include tag.Copy codeThe Code is as follows: <include android: id = "@ + id/item_header"
Layout = "@ layout/item_header"/>

Speaking of this, some may ask: How do you implement button or other View listening events on the interface? For such a problem, you must note that you cannot directly use the findViewById () method to obtain the View. Because the code for loading the layout interface is:Copy codeThe Code is as follows: main = (ViewGroup) inflater. inflate (R. layout. main, null );
SetContentView (main );

The View we set is not in main. xml, and the View we set is in item01.xml or other la S. Therefore, we should use the following code to set the view listening event:Copy codeThe Code is as follows: View v1 = inflater. inflate (R. layout. item01, null );
Tv1 = (TextView) v1.findViewById (R. id. textView1 );
Tv1.setOnClickListener (new TextView1OnClickListener ());

Here I use TextView as an example, so we should use the above method to listen to the corresponding View event. Also, we need to note that we need to add the above sub-interface to the set to modify the code.Copy codeThe Code is as follows: pageViews. add (inflater. inflate (R. layout. item01, null ));

To:Copy codeThe Code is as follows: View v1 = inflater. inflate (R. layout. item01, null );
PageViews. add (v1 );

In this way, you can monitor the event of the View on the interface.
The above is the step to achieve the effect of sliding the left and right in Android. Of course, you can also use other methods to achieve this effect. If you are interested, you can go to the Internet to find relevant information, which will not be detailed here.

Download example:Click to download
Download the event listening example with View:Click to download

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.