Android uidesign-custom title bar in ViewPage (4)

Android uidesign-custom title bar in ViewPage (4)

We learned how to add titles and classify categories for ViewPager in the previous blog PagerTabStrip and PagerTitleStrip in Android UI design -- ViewPage (3, we use the PagerTabStrip and PagerTitleStrip controls provided by Google. We can also see from the blog that the title bar added using the PagerTabStrip and PagerTitleStrip controls is rarely seen in actual development. Most of them use custom title bars. Next let's look at how to add custom title bars ......

1. Define the overall layout.Before using the relative layout, we must first know that the relative layout method comes first and then later. If the two la s overlap, the control defined first will be placed below the layout.Here we define a ViewPager with full relative layout, and place a linear layout at the Top of the relative layout to place the Title of different pages of ViewPager respectively, place an ImageView under the linear layout to implement scroll bar animation.

2. You are familiar with this step. You can customize MyPagerAdapter and inherit the four methods of PagerAdapter implementation:
getCount()
isViewFromObject(View, Object)
instantiateItem(ViewGroup, int)
destroyItem(ViewGroup, int, Object)

Public class MyPagerAdapter extends PagerAdapter {private List
  
   
MViews; // set of three la S/* Get data through the constructor */public MyPagerAdapter (List
   
    
MViews) {this. mViews = mViews ;}@ Override public int getCount () {return mViews. size (); // Number of displayed la S. Here we are three. } @ Override public boolean isViewFromObject (View view, Object o) {return view = o;} @ Override public Object instantiateItem (ViewGroup container, int position) {// Add View container. addView (mViews. get (position); return mViews. get (position) ;}@ Override public void destroyItem (ViewGroup container, int position, Object object) {// Delete View container. removeView (mViews. get (position ));}}
   
  

3. Define the ViewPager object in the Activity and add the three layout pages to ViewPager through the adapter MyPagerAdapter. You can monitor the ViewPager action to switch the scroll bar animation. The county post all the code and then explain it gradually.

Public class DefineTitleActivity extends Activity {private List
  
   
MViews; private LayoutInflater mInflater; private ViewPager mViewPager; private ImageView mImageCursor; // scroll bar animation. Private int mCursorWidth; // specifies the animation width. Private int mOffset; // the offset of the animated image. Private int currIndex = 0; // current page number private MyPagerAdapter myPagerAdapter; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); requestWindowFeature (Window. FEATURE_NO_TITLE); setContentView (R. layout. activity_define_title); mViewPager = (ViewPager) findViewById (R. id. viewpager_define_title); mInflater = getLayoutInflater (); // initialize page data. MViews = new ArrayList
   
    
(); View view1 = mInflater. inflate (R. layout. item_frist, null); View view2 = mInflater. inflate (R. layout. item_second, null); View view3 = mInflater. inflate (R. layout. item_third, null); mViews. add (view1); mViews. add (view2); mViews. add (view3); initCursorPos (); myPagerAdapter = new MyPagerAdapter (mViews); mViewPager. setAdapter (myPagerAdapter); mViewPager. setOnPageChangeListener (new ViewPager. onPageChangeListener () {int one = mOffset * 2 + mCursorWidth; // page Card 1-> page Card 2 offset int two = one * 2; // page Card 1-> page card 3 offset @ Override public void onPageScrolled (int position, float positionOffset, int positionOffsetPixels) {}/ * through event listening, implement Animation switching */@ Override public void onPageSelected (int position) {animation Animation = null; switch (position) {case 0: if (currIndex = 1) {animation = new TranslateAnimation (one, 0, 0, 0);} else if (currIndex = 2) {animation = new TranslateAnimation (two, 0, 0, 0 );} break; case 1: if (currIndex = 0) {animation = new TranslateAnimation (mOffset, one, 0, 0);} else if (currIndex = 2) {animation = new TranslateAnimation (two, one, 0, 0);} break; case 2: if (currIndex = 0) {animation = new TranslateAnimation (mOffset, two, 0, 0);} else if (currIndex = 1) {animation = new TranslateAnimation (one, two, 0, 0);} break;} currIndex = position; animation. setFillAfter (true); // True: the image is parked at the animation end position. setDuration (300); mImageCursor. startAnimation (animation);} @ Override public void onPageScrollStateChanged (int state) {}});}/* method for initializing an animation */private void initCursorPos () {// initialize the animation mImageCursor = (ImageView) findViewById (R. id. imageview_cursor); mCursorWidth = BitmapFactory. decodeResource (getResources (), R. mipmap. image ). getWidth (); // obtain the image width // obtain the screen width DisplayMetrics metrics = new DisplayMetrics (); getWindowManager (). getdefadisplay display (). getMetrics (metrics); int screenW = metrics. widthPixels; // calculates the offset mOffset = (screenW/mViews. size ()-mCursorWidth)/2; // sets the initial animation position Matrix matrix = new Matrix (); matrix. postTranslate (mOffset, 0); mImageCursor. setImageMatrix (matrix );}}
   
  

This is a bit difficult to understand. In Activity, we first initialize page data and then add the page to ViewPager through the adapter. Then, we listen to the ViewPager object. When the page changes, we need to move the scroll bar image position. Then, the difficulty arises. How can we move the location? How much does it move?
　　
The following figure shows the animation settings of the scroll bar.
　　


(The image is referenced in <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Authorization + PC9wPg0KPHA + PHN0cm9uZz7J6NbDs/XKvLavu621xM671sM8L3N0cm9uZz48L3A + DQo8cHJlIGNsYXNzPQ = "brush: java;"> Private void initCursorPos () {// initialize the animation mImageCursor = (ImageView) findViewById (R. id. imageview_cursor); mCursorWidth = BitmapFactory. decodeResource (getResources (), R. mipmap. image ). getWidth (); // obtain the image width // obtain the screen width DisplayMetrics metrics = new DisplayMetrics (); getWindowManager (). getdefadisplay display (). getMetrics (metrics); int screenW = metrics. widthPixels; // calculates the offset mOffset = (screenW/mViews. size ()-mCursorWidth)/2; // sets the initial animation position Matrix matrix = new Matrix (); matrix. postTranslate (mOffset, 0); mImageCursor. setImageMatrix (matrix );}

In the listener, you can override the onPageSelected (int position) method to implement animation switching.

/* Implement Animation switching through event listening */@ Override public void onPageSelected (int position) {animation Animation = null; switch (position) {case 0: if (currIndex = 1) {animation = new TranslateAnimation (one, 0, 0);} else if (currIndex = 2) {animation = new TranslateAnimation (two, 0, 0, 0);} break; case 1: if (currIndex = 0) {animation = new TranslateAnimation (mOffset, one, 0, 0 );} else if (currIndex = 2) {animation = new TranslateAnimation (two, one, 0, 0);} break; case 2: if (currIndex = 0) {animation = new TranslateAnimation (mOffset, two, 0, 0);} else if (currIndex = 1) {animation = new TranslateAnimation (one, two, 0, 0 );} break;} currIndex = position; animation. setFillAfter (true); // True: the image is parked at the animation end position. setDuration (300); mImageCursor. startAnimation (animation );}

Result Display: