Basic usage of Viewpager components in Android and examples of implementing picture switching _android

Source: Internet
Author: User
Tags object object

Viewpager is the component in the Android-support-v4.jar package. The label needs to be in the layout file with the package name.

Write full name <android.support.v4.view.viewpager/>

Basic usage

The basic usage of Viewpager is three steps.

The first step is to place a viewpager component in the main layout file

The second step is to create a layout file for each page and write the interface.

The third step is to get the Viewpager component in the main activity and set the adapter for it.

Adapter in detail, Viewpager corresponding adapter inherited from Pageradapter,

Also in the Android.support.v4.view package, the inheritance class needs to implement four methods:

    • int GetCount (): Number of pages returned
    • Object Instantiateitem (viewgroup,int position): Creates a page view of the position location, joins the ViewGroup, and returns the key for that view. The key can be this view, or it can be another unique object that corresponds to the view:
    • Boolean Isviewfromobject (View,object): Determines whether the key represented by Object corresponds to a specified View.
    • void Destroyitem (Viewgroup,int position,object): Deletes the view of position location from ViewGroup.

First we use Layoutinflater to load the interface created for each page in front of us and put it in a ArrayList container. And then in the four methods of Pageradapter, we're working with the view that corresponds to these pages.

Using the Viewpager component to implement picture switching
These steps may sound hollow, so let's look at this example of using the Viewpager component to implement a picture switch:
In many apps, especially after the first installation starts, there will be several pictures for the introduction and description of the app, the picture can be switched with the slide.

We use the Viewpager component here to demonstrate how this can be achieved.

1. Create an app project and create a main activity by default

2, set the activity of the layout file Activity_main.xml content as follows:

 <?xml version= "1.0" encoding= "Utf-8"?> <framelayout "xmlns:android="
  Schemas.android.com/apk/res/android "android:layout_width=" match_parent "android:layout_height=" Match_parent " android:orientation= "vertical" > <android.support.v4.view.viewpager android:id= "@+id/viewpager" Andr Oid:layout_width= "Match_parent" android:layout_height= "wrap_content"/> <relativelayout android:la Yout_width= "Match_parent" android:layout_height= "wrap_content" android:orientation= "vertical" > <Li Nearlayout android:id= "@+id/tagview" android:layout_width= match_parent "android:layout_height=" Wrap_ Content "android:layout_alignparentbottom=" true "android:layout_marginbottom=" 20DP "android:gravity=" C Enter_horizontal "android:orientation=" horizontal "> </LinearLayout> </RelativeLayout> &L T;/framelayout> 

Because we want to switch the picture again, we can have some point shape icon (or number) to display the current picture. So the activity here uses a framelayout layout (which enables view overlay placement).

The first control is Viewpager (note that Viewpager is in the SUPPORT.V4 package, and the component is not ported in the new Andorid).

The second control is to place a relativelayout, where a linearlayout (located at the bottom of the screen) is placed, which uses a horizontal layout to place a small icon.

3, prepare the picture

Prepare 5 pictures to toggle the display, such as Pic1.jpg, Pic2.jpg, Pic3.jpg, Pic4.jpg, pic5.jpg, and then prepare two small icon pictures page_current.png, Page_not_current.png.

Place these pictures in the drawable-hdpi directory (or in the drawable directory of the corresponding size).

4, write the activity code

Package Com.example.showviewpager;
 
Import java.util.ArrayList;
Import android.app.Activity;
Import Android.os.Bundle;
Import Android.support.v4.view.PagerAdapter;
Import Android.support.v4.view.ViewPager;
Import Android.support.v4.view.ViewPager.OnPageChangeListener;
Import Android.view.Menu;
Import Android.view.MenuItem;
Import Android.view.View;
Import Android.view.ViewGroup;
Import Android.widget.ImageView;
Import Android.widget.ImageView.ScaleType;
Import Android.widget.LinearLayout;
 
Import Android.widget.LinearLayout.LayoutParams;
  public class Mainactivity extends activity {private static final int view_num = 5;
  Private Viewpager Viewpager;
 
  Private imageview[] Tagimageviews = new Imageview[view_num];
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (R.layout.activity_main);
    Addtagimage ();
  Initviewpager (); private void Addtagimage () {linearlayout layout = (linearlayout) Findviewbyid (R.id.tagview); Linearlayout.layoutparams params = new Linearlayout.layoutparams (LinearLayout.LayoutParams.WRAP_CONTENT, Linearlayo Ut.
    Layoutparams.wrap_content);
    Params.setmargins (15, 0, 0, 0);
      for (int i = 0; i < View_num i++) {ImageView Tagimageview = new ImageView (this);
      Tagimageview.setlayoutparams (params);
      Tagimageviews[i] = Tagimageview;
      if (i = = 0) {tagimageview.setbackgroundresource (r.drawable.page_current);
      else {tagimageview.setbackgroundresource (r.drawable.page_not_current);
    } layout.addview (Tagimageview);
    } private void Initviewpager () {Viewpager = (Viewpager) Findviewbyid (R.id.viewpager);
    Viewpager.setadapter (New Myadapter ()); Viewpager.setonpagechangelistener (New Onpagechangelistener () {@Override public void onpageselected (int arg0)
   {for (int i = 0; i < tagimageviews.length i++) {if (i = = arg0% view_num) {         Tagimageviews[i].setbackgroundresource (r.drawable.page_current);
          else {tagimageviews[i].setbackgroundresource (r.drawable.page_not_current);
         
      @Override public void onpagescrolled (int arg0, float arg1, int arg2) {
    @Override public void onpagescrollstatechanged (int arg0) {}});
  Viewpager.setcurrentitem (0);
    Class Myadapter extends pageradapter{private arraylist<view> viewlist;
      Public Myadapter () {viewlist = new arraylist<view> ();
      Viewlist.add (Createpagerimageview (R.DRAWABLE.PIC1));
      Viewlist.add (Createpagerimageview (R.drawable.pic2));
      Viewlist.add (Createpagerimageview (R.DRAWABLE.PIC3));
      Viewlist.add (Createpagerimageview (R.DRAWABLE.PIC4));
    Viewlist.add (Createpagerimageview (R.DRAWABLE.PIC5)); Private View createpagerimageview (int resid) {Layoutparams params = NEW layoutparams (Layoutparams.match_parent, layoutparams.match_parent);
      LinearLayout layout = new LinearLayout (mainactivity.this);
      Layout.setlayoutparams (params);
      Layout.setorientation (linearlayout.vertical);
      ImageView ImageView = new ImageView (mainactivity.this);
      Imageview.setlayoutparams (params);
      Imageview.setscaletype (Scaletype.center_crop);
      Imageview.setimageresource (RESID);
      Layout.addview (ImageView);
    return layout;
    @Override public int GetCount () {return integer.max_value;
    @Override public boolean isviewfromobject (View arg0, Object arg1) {return arg0 = = Arg1; @Override public Object Instantiateitem (viewgroup container, int position) {(Viewpager) container)
      . AddView (viewlist.get (position% view_num), 0);
    Return Viewlist.get (position% view_num); @Override public void Destroyitem (View container, int position, object object) {(VIewpager) container). Removeview (viewlist. Get (position% view_num)); @Override public boolean Oncreateoptionsmenu (Menu menu) {getmenuinflater (). Inflate (R.menu.main, men
    u);
  return true;
    @Override public boolean onoptionsitemselected (MenuItem item) {int id = item.getitemid ();
    if (id = = r.id.action_settings) {return true;
  return super.onoptionsitemselected (item);
 }
}

5. If you need to not display the title bar of the activity, you can modify the configuration in the activity in manifest and set the style to:

Android:theme= "@android: Style/theme.black.notitlebar" 

<?xml version= "1.0" encoding= "Utf-8"?> <manifest xmlns:android=
"http://schemas.android.com/apk/res/" Android "
  package=" Com.example.showviewpager "
  android:versioncode=" 1 "
  android:versionname=" 1.0 ">
 
  <uses-sdk
    android:minsdkversion= "android:targetsdkversion="
    />
 
  <application
    android:allowbackup= "true"
    android:icon= "@drawable/ic_launcher"
    android:label= "@string/app_name "
    android:theme=" @style/apptheme ">
    <activity
      android:name=". Mainactivity "
      android:label=" @string/app_name "
      android:theme=" @android: Style/theme.black.notitlebar " >
      <intent-filter>
        <action android:name= "Android.intent.action.MAIN"/>
        < Category android:name= "Android.intent.category.LAUNCHER"/>
      </intent-filter>
    </activity >
  </application>
 
</manifest>

  

Other configuration files, code, and so on are the default settings that are created by eclipse.

Related Article

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.