1. First, let’s take a look at the renderings. This is the Tab sliding effect of Sina Weibo. We can swipe gestures or click on the header above to switch. In the same way, the white bar will move under the corresponding page header. This is an animation effect, and the white bars slowly slide past. OK, let's implement it next.
2. Before we start, we need to know a control, ViewPager. It is a class of an additional package that comes with Google SDk, which can be used to switch between screens. This additional package is android-support-v4. jar, in the last source code, will be provided to everyone, in the libs folder. Of course, you can also search the latest version online by yourself. Once we find it, we need to add it in the project
3. Let’s do the interface first. The interface design is very simple. The first line is three headers, the second line is animated picture, and the third line is the page card content display.
Copy the codeThe code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns：andro
xmlns：umadsdk="http：///apk/res/"
android：layout_width="fill_parent"
android：layout_height="fill_parent"
android：orientation="vertical" >
<LinearLayout
android：
android：layout_width="fill_parent"
android：layout_height="100.0dip"
android：background="#FFFFFF" >
<TextView
android：
android：layout_width="fill_parent"
android：layout_height="fill_parent"
android：layout_weight="1.0"
android：gravity="center"
android: text="page card 1"
android：textColor="#000000"
android：textSize="22.0dip" />
<TextView
android：
android：layout_width="fill_parent"
android：layout_height="fill_parent"
android：layout_weight="1.0"
android：gravity="center"
android: text="page card 2"
android：textColor="#000000"
android：textSize="22.0dip" />
<TextView
android：
android：layout_width="fill_parent"
android：layout_height="fill_parent"
android：layout_weight="1.0"
android：gravity="center"
android: text="page card 3"
android：textColor="#000000"
android：textSize="22.0dip" />
</LinearLayout>
<ImageView
android：
android：layout_width="fill_parent"
android：layout_height="wrap_content"
android：scaleType="matrix"
android：src="@drawable/a" />
<.
android：
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 three page cards, so we also need the interface design of the content of three page cards. Here we only set the background color, which can play a different role.
Copy the codeThe code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns：andro
android：layout_width="fill_parent"
android：layout_height="fill_parent"
android：orientation="vertical"
android：background="#158684" >
</LinearLayout>
4. The code part needs to be initialized (1) Let’s first define the variables
Copy the codeThe code is as follows:
private ViewPager mPager; //page card content
private List<View> listViews; // Tab page list
private ImageView cursor; // animation picture
private TextView t1, t2, t3; // Page header
private int offset = 0; // Animation picture offset
private int currIndex = 0; // Current page card number
private int bmpW; // animation image width
(2) Initialize the header
Copy the codeThe code is as follows:
/**
* Initialize the header
*/
private void InitTextView（） {
t1 = （TextView） findViewById（.text1）；
t2 = （TextView） findViewById（.text2）；
t3 = （TextView） findViewById（.text3）；
（new MyOnClickListener（0））；
（new MyOnClickListener（1））；
（new MyOnClickListener（2））；
}
/**
* Header click to listen
*/
public class MyOnClickListener implements {
private int index = 0；
public MyOnClickListener（int i） {
index = i；
}
@Override
public void onClick（View v） {
（index）；
}
}；
(3) Initialize the page card content area
Copy the codeThe code is as follows:
<font color="#008000"><font color="black">/**
* ViewPager adapter
*/
public class MyPagerAdapter extends PagerAdapter {
public List<View> mListViews；
public MyPagerAdapter（List<View> mListViews） {
= mListViews；
}
@Override
public void destroyItem（View arg0， int arg1， Object arg2） {
（（ViewPager） arg0）.removeView（（arg1））；
}
@Override
public void finishUpdate（View arg0） {
}
@Override
public int getCount（） {
return （）；
}
@Override
public Object instantiateItem（View arg0， int arg1） {
（（ViewPager） arg0）.addView（（arg1）， 0）；
return （arg1）；
}
@Override
public boolean isViewFromObject（View arg0， Object arg1） {
return arg0 == （arg1）；
}
@Override
public void restoreState（Parcelable arg0， ClassLoader arg1） {
}
@Override
public Parcelable saveState（） {
return null；
}
@Override
public void startUpdate（View arg0） {
}
}
</font></font>
Here we implement the loading and uninstallation of each page card (4) Initialize the animation
/**
* Initialize animation
*/
private void InitImageView（） {
cursor = （ImageView） findViewById（）；
bmpW = （getResources（）， ）
.getWidth(); // Get the image width
DisplayMetrics dm = new DisplayMetrics（）；
getWindowManager（）.getDefaultDisplay（）.getMetrics（dm）；
int screenW = ; // Get resolution width
offset = (screenW / 3 - bmpW) / 2; // Calculate offset
Matrix matrix = new Matrix（）；
（offset， 0）；
(matrix); // Set the initial position of the animation
}
Calculate the offset of animation movement based on the screen resolution and the width of the picture
Copy the codeThe code is as follows:
/** * Page card switching monitoring */
public class MyOnPageChangeListener implements OnPageChangeListener {
int one = offset * 2 + bmpW; // Page card 1 -> Page card 2 Offset
int two = one * 2; // Page card 1 -> Page card 3 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；
(true); // True: The image stops at the end of the animation
（300）；
（animation）； }
@Override
public void onPageScrolled（int arg0， float arg1， int arg2） { }
@Override
public void onPageScrollStateChanged（int arg0） { } }
5. After finishing work, come and see the fruits of your labor