[Android UI design and development] 2. Guide interface (2) use ViewPager to implement the welcome guide page and androidviewpager

[Android UI design and development] 2. Guide interface (2) use ViewPager to implement the welcome guide page and androidviewpager

1. Implementation results

 

2. Preparations before Encoding

ViewPager is a new feature provided after Android3.0, so to make your application backward compatible, you must support the android-support-v4.jar package, which is an additional package from google. No Baidu is available.

 

3. Specific Coding implementation

(1) The layout interface is relatively simple. Add the ViewPager component and the guide points at the bottom.

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "match_parent" android: layout_height = "match_parent"> <android. support. v4.view. viewPager android: id = "@ + id/viewpager" android: layout_width = "match_parent" android: layout_height = "match_parent"/> <LinearLayout android: id = "@ + id/ll" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_alignParentBottom = "true" android: layout_centerHorizontal = "true" android: authorization = "24.0dip" android: orientation = "horizontal"> <ImageView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_vertical" android: clickable = "true" android: contentDescription = "@ string/strPoint" android: padding = "15.0dip" android: src = "@ drawable/point"/> <ImageView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_vertical" android: clickable = "true" android: contentDescription = "@ string/strPoint" android: padding = "15.0dip" android: src = "@ drawable/point"/> <ImageView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_vertical" android: clickable = "true" android: contentDescription = "@ string/strPoint" android: padding = "15.0dip" android: src = "@ drawable/point"/> <ImageView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_vertical" android: clickable = "true" android: contentDescription = "@ string/strPoint" android: padding = "15.0dip" android: src = "@ drawable/point"/> </LinearLayout> </RelativeLayout>Activity_main.xml

(2) The smaller image uses a selector to control the color.

<? 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>Point. xml

(3) override the ViewPager Adapter

Package com. yanis. yc_ui_viewpager_guideview; import java. util. arrayList; import android. support. v4.view. pagerAdapter; import android. support. v4.view. viewPager; import android. view. view;/***** @ author YeChao * @ Function Description: ViewPager adapter, used to bind data and view */public class ViewPagerAdapter extends PagerAdapter {// interface list private ArrayList <View> views; public ViewPagerAdapter (ArrayList <View> views) {this. views = views ;}/ * ** Get the number of current interfaces */@ Override public int getCount () {if (views! = Null) {return views. size ();} else return 0;}/*** determines whether the interface is generated by the Object */@ Override public boolean isViewFromObject (View arg0, Object arg1) {return (arg0 = arg1);}/*** destroy the position page */@ Override public void destroyItem (View container, int position, Object object Object) {(ViewPager) container ). removeView (views. get (position);}/*** initialization position interface */@ Override public Object instantiateItem (View container, int position) {(ViewPager) container ). addView (views. get (position), 0); return views. get (position );}}ViewPagerAdapter. class

(4) edit the main program entry class

Package com. yanis. yc_ui_viewpager_guideview; import java. util. arrayList; import android. app. activity; import android. OS. bundle; import android. support. v4.view. viewPager; import android. support. v4.view. viewPager. onPageChangeListener; import android. view. view; import android. view. view. onClickListener; import android. widget. imageView; import android. widget. imageView. scaleType; import android. widget. linearLayout;/***** @ author YeChao * @ Function Description: main program entry class */public class MainActivity extends Activity implements OnClickListener, OnPageChangeListener {// defines the ViewPager object private ViewPager viewPager; // define ViewPager adapter private ViewPagerAdapter vpAdapter; // define an ArrayList to store View private ArrayList <View> views; // guide image resources private static final int [] pics = {R. drawable. guide1, R. drawable. guide2, R. drawable. guide3, R. drawable. guide4}; // The image private ImageView [] points at the bottom of the dot; // record the currently selected position private int currentIndex; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); initView (); initData ();}/*** initialization component */private void initView () {// instantiate the ArrayList object views = new ArrayList <View> (); // instantiate ViewPager viewPager = (ViewPager) findViewById (R. id. viewpager); // instantiate ViewPager adapter vpAdapter = new ViewPagerAdapter (views);}/*** initialization 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); // prevents the image from filling up the screen iv. setScaleType (ScaleType. FIT_XY); // loads image resource iv. setImageResource (pics [I]); views. add (iv);} // sets the data viewPager. setAdapter (vpAdapter); // you can call this operation to set the listener to viewPager. setOnPageChangeListener (this); // initialize the initPoint () at the bottom;}/*** initialize the bottom dot */private void initPoint () {LinearLayout linearLayout = (LinearLayout) findViewById (R. id. ll); points = new ImageView [pics. length]; // cyclically retrieve the smaller image for (int I = 0; I <pics. length; I ++) {// obtain each sub-element points [I] = (ImageView) LinearLayout under a linearLayout. getChildAt (I); // It is set to gray points [I] 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 when the sliding status changes */@ Override public void onPageScrollStateChanged (int arg0) {}/*** called when the current page slides */@ Override public void onPageScrolled (int arg0, float arg1, int arg2) {}/*** call */@ Override public void onPageSelected (int arg0) when the new page is selected {// set the setCurDot (arg0) at the bottom of the page );} @ Override public void onClick (View v) {int position = (Integer) v. getTag (); setCurView (position); setCurDot (position);}/*** set the location of the current page */private void setCurView (int position) {if (position <0 | position> = pics. length) {return;} viewPager. setCurrentItem (position);}/*** set the current point position */private void setCurDot (int positon) {if (positon <0 | positon> pics. length-1 | currentIndex = positon) {return;} points [positon]. setEnabled (false); points [currentIndex]. setEnabled (true); currentIndex = positon ;}}MainActivity. class

 

Source code: https://github.com/YeXiaoChao/Yc_ui_viewpager_guideview

Source: http://blog.csdn.net/yangyu20121224/article/details/8983770