Android UI--ViewPager 扩展 Tab 标签指示

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1.0"

android:gravity="center"

android:text="特性 2"

android:textSize="18sp"/>

<TextView

android:id="@+id/tv_guid3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1.0"

android:gravity="center"

android:text="特性 3 "

android:textSize="18sp"/>

<TextView

android:id="@+id/tv_guid4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1.0"

android:gravity="center"

android:text="特性 4"

android:textSize="18sp"/>

</LinearLayout>

<ImageView

android:id="@+id/cursor"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/ll_viewpager"

android:scaleType="matrix"

android:src="@drawable/cursor" />

<android.support.v4.view.ViewPager

android:id="@+id/viewpager"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/cursor"

android:flipInterval="30"

android:persistentDrawingCache="animation" />

</RelativeLayout>

每一个标签页的布局

<?xml version="1.0" encoding="UTF-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/guide_1" >

</RelativeLayout>

其他都一样，不多贴

布局搞定之后，定义一个适配器如下：

package com.wwj.viewpager;

import java.util.List;

import android.support.v4.view.PagerAdapter;

import android.view.View;

import android.view.ViewGroup;

/**

• ViewPager 适配器

• @author wwj

*/

public class ViewPagerAdapter extends PagerAdapter {

// 界面列表

private List<View> views;

public ViewPagerAdapter(List<View> views) {

this.views = views;

}

@Override

public void destroyItem(ViewGroup container, int position, Object object) {

container.removeView(views.get(position));

}

@Override

public int getCount() {

if (views != null) {

return views.size();

}

return 0;

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

container.addView(views.get(position)); // 把被点击的图片放入缓存中

return views.get(position); // 返回被点击图片对象

}

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

retu

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

rn (arg0 == arg1);

}

}

适配器搞定之后，直接去 Activity

package com.wwj.viewpager;

import java.util.ArrayList;

import java.util.List;

import android.app.Activity;

import android.graphics.BitmapFactory;

import android.graphics.Matrix;

import android.os.Bundle;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.util.DisplayMetrics;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.animation.Animation;

import android.view.animation.TranslateAnimation;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends Activity {

ViewPager viewPager;

ViewPagerAdapter pagerAdapter;

View view1, view2, view3, view4; // 页面

List<View> views; // Tab 页面列表

ImageView img_cursor; // 指示图片

TextView tv_guid1, tv_guid2, tv_guid3, tv_guid4; // 页卡头标

int offset = 0; // 偏移量

int currIndex = 0; // 当前页卡编号

int bmpW; // 图片宽度

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initImageView();

initTextView();

view1 = (View) findViewById(R.layout.viewpager1);

view2 = (View) findViewById(R.layout.viewpager2);

view3 = (View) findViewById(R.layout.viewpager3);

view4 = (View) findViewById(R.layout.viewpager4);

LayoutInflater inflater = LayoutInflater.from(this);

view1 = inflater.inflate(R.layout.viewpager1, null);

view2 = inflater.inflate(R.layout.viewpager2, null);

view3 = inflater.inflate(R.layout.viewpager3, null);

view4 = inflater.inflate(R.layout.viewpager4, null);

views = new ArrayList<View>();

views.add(view1);

views.add(view2);

views.add(view3);

views.add(view4);

pagerAdapter = new ViewPagerAdapter(views);

viewPager = (ViewPager) findViewById(R.id.viewpager);

viewPager.setAdapter(pagerAdapter);

viewPager.setCurrentItem(0);

viewPager.setOnPageChangeListener(new MyOnPageChangeListener());

}

/**

• 初始化动画图片

*/

private void initImageView() {

img_cursor = (ImageView) findViewById(R.id.cursor);

bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.cursor)

.getWidth();

DisplayMetrics dm = new DisplayMetrics();

this.getWindowManager().getDefaultDisplay().getMetrics(dm);

int screenW = dm.widthPixels; // 获取手机屏幕宽度分辨率

offset = (screenW / 4 - bmpW) / 2; // 获取图片偏移量

// imageview 设置平移，使下划线平移到初始位置（平移一个 offset）

Matrix matrix = new Matrix();

matrix.postTranslate(offset, 0);

img_cursor.setImageMatrix(matrix);

}

/**

• 初始化 TextView 控件，和注册监听器

*/

private void initTextView() {

tv_guid1 = (TextView) findViewById(R.id.tv_guid1);

tv_guid2 = (TextView) findViewById(R.id.tv_guid2);

tv_guid3 = (TextView) findViewById(R.id.tv_guid3);

tv_guid4 = (TextView) findViewById(R.id.tv_guid4);

tv_guid1.setOnClickListener(listener);

tv_guid2.setOnClickListener(listener);

tv_guid3.setOnClickListener(listener);

tv_guid4.setOnClickListener(listener);

}

OnClickListener listener = new OnClickListener() {

@Override

public void onClick(View v) {

switch (v.getId()) {

case R.id.tv_guid1:

viewPager.setCurrentItem(0);

break;

case R.id.tv_guid2:

viewPager.setCurrentItem(1);

break;

case R.id.tv_guid3: