Android ViewPager (Guide Interface) (1), androidviewpager

Android ViewPager (Guide Interface) (1), androidviewpager

Although we cannot change our lives, we can change our outlook on life. Although we cannot change the environment, we can change our mood.

Content: ViewPager control usage

Similar to LisstView, you also need an adapter, Which is PagerAdapter.

Procedure:

I. Add it to the layout File

<Android. support. v4.view. ViewPager android: id = "@ + id/viewPager" android: layout_width = "match_parent" android: layout_height = "match_parent"/> <! -- Note that this component is used to display the sliding left and right interfaces. If the xml layout file is not loaded, the content will not be displayed. -->

2. Load the page card to be displayed

LayoutInflater lf = getLayoutInflater (). from (this); view1 = lf. inflate (R. layout. layout1, null); view2 = lf. inflate (R. layout. layout2, null); view3 = lf. inflate (R. layout. layout3, null); viewList = new ArrayList <View> (); // load the View to be displayed by page into the viewList array. add (view1); viewList. add (view2); viewList. add (view3 );

3. An adapter is required

Example 1:

The layout file res/layout/activity_main.xml is as follows:

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "wrap_content" android: layout_height = "wrap_content"> <android. support. v4.view. viewPager android: id = "@ + id/viewPager" android: layout_width = "match_parent" android: layout_height = "match_parent"/> <! -- Note that this component is used to display the sliding left and right interfaces. If the xml layout file is not loaded, the content will not be displayed. --> <LinearLayout android: id = "@ + id/layout1" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_alignParentBottom = "true" android: authorization = "true" android: layout_marginBottom = "25dp" android: orientation = "horizontal"> <ImageView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_vertical" android: clickable = "true" android: padding = "20dp" android: src = "@ drawable/point"/> <ImageView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_vertical" android: clickable = "true" android: padding = "20dp" android: src = "@ drawable/point"/> <ImageView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_vertical" android: clickable = "true" android: padding = "20dp" android: src = "@ drawable/point"/> <ImageView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_vertical" android: clickable = "true" android: padding = "20dp" android: src = "@ drawable/point"/> </LinearLayout> </RelativeLayout>

The res/drawable/paint. xml file is as follows:

<?xml version="1.0" encoding="UTF-8"?><selector  xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:drawable="@drawable/point_normal" />    <item android:state_enabled="false" android:drawable="@drawable/point_select" /></selector>

The following is the ViewPagerAdapter. java file:

When you implement a PagerAdapter, you must cover at least the following four methods:

• InstantiateItem (ViewGroup, int), destroyItem (ViewGroup, int, Object)
• GetCount (), isViewFromObject (View, Object)

// ViewPager adapter, used to bind data and viewpublic class ViewPagerAdapter extends PagerAdapter {// interface list private ArrayList <View> views; public ViewPagerAdapter (ArrayList <View> views) {this. views = views;} // obtain the number of cards on the current page. public int getCount () {if (views! = Null) {return views. size ();} return 0;} // The public Object instantiateItem (View container, int position) {(ViewPager) container) on the instantiation (initialization) page ). addView (views. get (position), 0); // Add the page card return views. get (position);} // destroy the page card public void destroyItem (View container, int position, Object object) {(ViewPager) container ). removeView (views. get (position); // Delete the page card} // determine whether the interface is public boolean isViewFromObject (View arg0, Object arg1) {return (arg0 = arg1 ); // official prompt }}

The main interface file MainActivity. java is as follows:

Public class MainActivity extends Activity implements OnClickListener, OnPageChangeListener {private ViewPager viewPager; // defines the ViewPager object private ViewPagerAdapter vpAdapter; // defines the ViewPager adapter private ArrayList <View> views; // define an ArrayList to store View resources. // private static final int [] pics = {R. drawable. guide1, R. drawable. guide2, R. drawable. guide3, R. drawable. guide4}; // private ImageView [] points ;// Record the currently selected location private int currentIndex; protected void onCreate (Bundle savedInstanceState) {requestWindowFeature (Window. FEATURE_NO_TITLE); super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); initView (); initData () ;}// initialize the private void initView () {// instantiate the ArrayList object views = new ArrayList <View> (); // instantiate ViewPagerviewPager = (ViewPager) findViewById (R. id. viewPager); // instantiate the ViewPager adapter vpAdap Ter = new ViewPagerAdapter (views);} // initialize the data private void initData () {// define a layout and set the parameter LinearLayout. layoutParams mParams = new LinearLayout. layoutParams (LinearLayout. layoutParams. MATCH_PARENT, LinearLayout. layoutParams. MATCH_PARENT); // initialize the bootstrap image list for (int I = 0; I <pics. length; I ++) {ImageView iv = new ImageView (this); iv. setLayoutParams (mParams); iv. setImageResource (pics [I]); views. add (iv);} // sets the data viewPager. setAdapter (VpAdapter); // sets the listener viewPager. setOnPageChangeListener (this); // initialize the initPoint () at the bottom;} // initialize the private void initPoint () {LinearLayout layout1 = (LinearLayout) findViewById (R. id. layout1); points = new ImageView [pics. length]; // cyclically retrieve the smaller image for (int I = 0; I <pics. length; I ++) {// obtain each sub-element in LinearLayout, points [I] = (ImageView) layout1.getChildAt (I); // obtain the I-th control! <Span style = "color: rgb (51, 51, 51); font-family: 'Microsoft yahei'; font-size: 14px; line-height: 28px; white-space: pre-wrap; "> the parameters in getChildAt are the hierarchical indexes in the layout. </span> // The gray points [I] are set by default. setEnabled (true); // set to listen to points [I] for each small point. setOnClickListener (this); // set the location tag to conveniently retrieve the points [I] corresponding to the current location. setTag (I) ;}// set the default face-To-Face Location currentIndex = 0; // set it to white, that is, the selected status points [currentIndex]. setEnabled (false);} // call public void onPageScrollStateChanged (int arg0) {}// call public void onPageScrolled (int arg0, float arg1, int arg2) {}// call public void onPageSelected (int position) when a new page is selected {// set setCurDot (position );} // click the event to switch the current page public void onClick (View v) {int position = (Integer) v. getTag (); setCurView (position); setCurDot (position) ;}// set the position of the current page private void setCurView (int position) {if (position <0 | position> = pics. length) {return;} viewPager. setCurrentItem (position);} // set the position of the current small point private void setCurDot (int position) {if (position <0 | position> pics. length-1 | currentIndex = position) {return;} points [position]. setEnabled (false); points [currentIndex]. setEnabled (true); currentIndex = position ;}}

Take your time and enjoy it