Examples of android viewpaper
- 2020-05-07 20:22:29
- OfStack
1. First of all, let's take a look at the 1 effect drawing, which is the Tab sliding effect of sina weibo. We can swipe by hand or switch by clicking on the header above. In the same way, the white bar is moved to the corresponding header. This is an animation effect, the white bar is slowly sliding past. Okay, so let's do that.
2. Before we begin, we need to recognize a control, ViewPager. It is a class of one additional package that comes with google SDk and can be used to switch between screens. The add-on package is android-support-v4. jar, which will be provided to you in the final source code, is in the libs folder. Of course, you can also search for the latest version from the Internet. Once we find it, we need to add it to the project
3. Let's make the interface first. The interface design is very simple.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns : android="http : //schemas.android.com/apk/res/android"
xmlns : umadsdk="http : //schemas.android.com/apk/res/com.LoveBus"
android : layout_width="fill_parent"
android : layout_height="fill_parent"
android : orientation="vertical" >
<LinearLayout
android : id="@+id/linearLayout1"
android : layout_width="fill_parent"
android : layout_height="100.0dip"
android : background="#FFFFFF" >
<TextView
android : id="@+id/text1"
android : layout_width="fill_parent"
android : layout_height="fill_parent"
android : layout_weight="1.0"
android : gravity="center"
android : text=" Pp card 1"
android : textColor="#000000"
android : textSize="22.0dip" />
<TextView
android : id="@+id/text2"
android : layout_width="fill_parent"
android : layout_height="fill_parent"
android : layout_weight="1.0"
android : gravity="center"
android : text=" Pp card 2"
android : textColor="#000000"
android : textSize="22.0dip" />
<TextView
android : id="@+id/text3"
android : layout_width="fill_parent"
android : layout_height="fill_parent"
android : layout_weight="1.0"
android : gravity="center"
android : text=" Pp card 3"
android : textColor="#000000"
android : textSize="22.0dip" />
</LinearLayout>
<ImageView
android : id="@+id/cursor"
android : layout_width="fill_parent"
android : layout_height="wrap_content"
android : scaleType="matrix"
android : src="@drawable/a" />
<android.support.v4.view.ViewPager
android : id="@+id/vPager"
android : layout_width="wrap_content"
android : layout_height="wrap_content"
android : layout_gravity="center"
android : layout_weight="1.0"
android : background="#000000"
android : flipInterval="30"
android : persistentDrawingCache="animation" />
</LinearLayout>
We need to display 3 page CARDS, so we need to design the interface of the contents of 3 page CARDS. Here we only set the background color, which can make the difference.
<?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"
android : background="#158684" >
</LinearLayout>
4. The initialization of the code part (1) starts with the definition of the variable
private ViewPager mPager ; // Pp card content
private List<View> listViews ; // Tab Page lists
private ImageView cursor ; // Animation image
private TextView t1 . t2 . t3 ; // The header page card
private int offset = 0 ; // Animated image offset
private int currIndex = 0 ; // Current page card number
private int bmpW ; // Animated picture width
(2) initialize the header
/**
* Initializes the header
*/
private void InitTextView (a) {
t1 = ( TextView ) findViewById ( R.id.text1 );
t2 = ( TextView ) findViewById ( R.id.text2 );
t3 = ( TextView ) findViewById ( R.id.text3 );
t1.setOnClickListener ( new MyOnClickListener ( 0 ));
t2.setOnClickListener ( new MyOnClickListener ( 1 ));
t3.setOnClickListener ( new MyOnClickListener ( 2 ));
}
/**
* Header click listen
*/
public class MyOnClickListener implements View.OnClickListener {
private int index = 0 ;
public MyOnClickListener ( int i ) {
index = i ;
}
@Override
public void onClick ( View v ) {
mPager.setCurrentItem ( index );
}
} ;
(3) initialize the page card content area
<font color="#008000"><font color="black"> /**
* ViewPager The adapter
*/
public class MyPagerAdapter extends PagerAdapter {
public List<View> mListViews ;
public MyPagerAdapter ( List<View> mListViews ) {
this.mListViews = mListViews ;
}
@Override
public void destroyItem ( View arg0 . int arg1 . Object arg2 ) {
(( ViewPager ) arg0 ) .removeView ( mListViews.get ( arg1 ));
}
@Override
public void finishUpdate ( View arg0 ) {
}
@Override
public int getCount (a) {
return mListViews.size (a);
}
@Override
public Object instantiateItem ( View arg0 . int arg1 ) {
(( ViewPager ) arg0 ) .addView ( mListViews.get ( arg1 ), 0 );
return mListViews.get ( arg1 );
}
@Override
public boolean isViewFromObject ( View arg0 . Object arg1 ) {
return arg0 == ( arg1 );
}
@Override
public void restoreState ( Parcelable arg0 . ClassLoader arg1 ) {
}
@Override
public Parcelable saveState (a) {
return null ;
}
@Override
public void startUpdate ( View arg0 ) {
}
}
</font></font>
Here we have realized the loading and unloading of each page card (4) Initialization animation
/**
* Initialization animation
*/
private void InitImageView (a) {
cursor = ( ImageView ) findViewById ( R.id.cursor );
bmpW = BitmapFactory.decodeResource ( getResources (), R.drawable.a )
.getWidth (a); // Get image width
DisplayMetrics dm = new DisplayMetrics (a);
getWindowManager (a) .getDefaultDisplay (a) .getMetrics ( dm );
int screenW = dm.widthPixels ; // Get resolution width
offset = ( screenW / 3 - bmpW ) / 2 ; // Calculated offset
Matrix matrix = new Matrix (a);
matrix.postTranslate ( offset . 0 );
cursor.setImageMatrix ( matrix ); // Sets the initial position of the animation
}
Calculate the offset of the motion based on the resolution of the screen and the width of the picture
/** * Page card switch monitor */
public class MyOnPageChangeListener implements OnPageChangeListener {
int one = offset * 2 + bmpW ; // Pp card 1 -> Pp card 2 The offset
int two = one * 2 ; // Pp card 1 -> Pp card 3 The offset
@Override
public void onPageSelected ( int arg0 ) {
Animation animation = null ;
switch ( arg0 ) {
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 ( offset . one . 0 . 0 );
} else if ( currIndex == 2 ) {
animation = new TranslateAnimation ( two . one . 0 . 0 ); }
break ; case 2 : if ( currIndex == 0 ) {
animation = new TranslateAnimation ( offset . two . 0 . 0 ); }
else if ( currIndex == 1 ) { animation = new TranslateAnimation ( one . two . 0 . 0 ); }
break ; }
currIndex = arg0 ;
animation.setFillAfter ( true ); // True : the picture stops at the end of the animation
animation.setDuration ( 300 );
cursor.startAnimation ( animation ); }
@Override
public void onPageScrolled ( int arg0 . float arg1 . int arg2 ) { }
@Override
public void onPageScrollStateChanged ( int arg0 ) { } }
5. Call it a day and look at your work