参考文档:点击打开链接
基于上篇文档,主要增加了页头和滑动图片:
<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.test.guideactivity.MainActivity" >
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="50.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="页卡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="页卡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="页卡3"
android:textColor="#000000"
android:textSize="22.0dip" />
</LinearLayout>
<ImageView
android:id="@+id/cursor"
android:layout_below="@id/linearLayout1"
android:layout_marginTop="3dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:src="@drawable/blue_line" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_below="@id/cursor"
android:layout_marginTop="3dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:id="@+id/linearlayout"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="20dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/dot" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/dot" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/dot" />
</LinearLayout>
</RelativeLayout>
代码:
package com.test.guideactivity;
import java.util.ArrayList;
import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends Activity implements OnPageChangeListener {
private ViewPager viewPager;
private ViewPagerAdapter adapter;
private TextView textView1;
private TextView textView2;
private TextView textView3;
//滑动头图片
private ImageView cursor;
//当前选项卡
private int currentIndex;
//偏移量
private int offset;
private int bmpW;// 动画图片宽度
private ArrayList<View> list;
private ImageView[] dots;
private LinearLayout linear;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
initDot();
initImage();
}
private void initViews(){
viewPager = (ViewPager) this.findViewById(R.id.viewpager);
linear = (LinearLayout) this.findViewById(R.id.linearlayout);
textView1 = (TextView) this.findViewById(R.id.text1);
textView2 = (TextView) this.findViewById(R.id.text2);
textView3 = (TextView) this.findViewById(R.id.text3);
//设置三个标签的监听事件
textView1.setOnClickListener(new MyClickListener(0));
textView2.setOnClickListener(new MyClickListener(1));
textView3.setOnClickListener(new MyClickListener(2));
//构造显示的对象
LayoutInflater inflater = LayoutInflater.from(this);
list = new ArrayList<View>();
list.add(inflater.inflate(R.layout.guide1, null));
list.add(inflater.inflate(R.layout.guide2, null));
list.add(inflater.inflate(R.layout.guide3, null));
adapter = new ViewPagerAdapter(list);
//绑定显示的数据
viewPager.setAdapter(adapter);
//设定监听器,当滑动时候进行处理点点的改变
viewPager.setOnPageChangeListener(this);
}
private void initDot(){
if(linear == null){
Log.e("LinearLayout", "linear == null");
return;
}
dots = new ImageView[list.size()];
for(int i=0;i<list.size();i++){
dots[i] = (ImageView) linear.getChildAt(i);
//首先初始化,全部设为不可用时
dots[i].setEnabled(false);
}
//设置当前第一个可用
currentIndex = 0;
dots[currentIndex].setEnabled(true);
}
//计算偏移量
private void initImage(){
cursor = (ImageView) this.findViewById(R.id.cursor);
//获取图片的宽度
bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.blue_line).getWidth();
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels;
offset = (screenW / 3 - bmpW) / 2;
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
cursor.setImageMatrix(matrix);
}
//实现OnClickListner接口
class MyClickListener implements OnClickListener{
private int index = 0;
public MyClickListener(int index) {
this.index = index;
}
@Override
public void onClick(View v) {
if(viewPager != null){
viewPager.setCurrentItem(index);
}
}
}
/**
* ViewPager的构造器,继承PagerAdapter
* @author dsw
*
*/
class ViewPagerAdapter extends PagerAdapter{
private ArrayList<View> views;
public ViewPagerAdapter(ArrayList<View> views){
this.views = views;
}
@Override
public int getCount() {
return views == null ? 0 :views.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
if(views != null){
container.removeView(views.get(position));
}
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
if(views != null){
container.addView(views.get(position));
return views.get(position);
}
return super.instantiateItem(container, position);
}
}
@Override
public void onPageScrollStateChanged(int arg0) {
// 页面状态改变的时候
Log.v("onPageScrollStateChanged", "arg0:" + arg0);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// 页面滑动的时候
Log.v("onPageScrolled", "arg0:" + arg0 + "arg1:" + arg1 + "arg2:" + arg2 );
}
@Override
public void onPageSelected(int arg0) {
// 当页面选中的时候
Log.v("onPageSelected", "arg0:" + arg0);
if (arg0 < 0 || arg0 > list.size() - 1
|| currentIndex == arg0)
{
return;
}
int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
int two = one * 2; // 页卡1 -> 页卡3 偏移量
//设置图片的切换,通过平移动画
Animation anim = null;
/* 这个方法比较麻烦
switch(arg0){
case 0:
if(currentIndex == 1){
anim = new TranslateAnimation(one,0,0,0);
}else if(currentIndex == 2){
anim = new TranslateAnimation(two, 0, 0, 0);
}
break;
case 1:
if(currentIndex == 0){
anim = new TranslateAnimation(offset, one, 0, 0);
}else if(currentIndex == 2){
anim = new TranslateAnimation(two, one, 0, 0);
}
break;
case 2:
if (currentIndex == 0) {
anim = new TranslateAnimation(offset, two, 0, 0);
} else if (currentIndex == 1) {
anim = new TranslateAnimation(one, two, 0, 0);
}
break;
}
*/
anim = new TranslateAnimation(one*currentIndex, one*arg0, 0, 0);
dots[arg0].setEnabled(true); //设置选中可用
dots[currentIndex].setEnabled(false); //设置上一个不可用
anim.setFillAfter(true);// True:图片停在动画结束位置
anim.setDuration(300);
cursor.startAnimation(anim);
currentIndex= arg0;
}
}
源码:点击打开链接