Android选项卡viewpager入门到精通

一、老规矩，不多说，先上效果图

二、配置布局文件

<android.support.v4.view.ViewPager        android:id="@+id/ii_viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent" >        <!-- 配置选项卡信息 -->        <android.support.v4.view.PagerTabStrip            android:id="@+id/ii_pagerstrip"            android:layout_width="wrap_content"            android:layout_height="wrap_content" />    </android.support.v4.view.ViewPager>

三、java代码的实现

package net.dxs.viewpager;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;public class MainActivity extends Activity {private ViewPager pager;private List<View> list;private PagerTabStrip tabStrip;private String[] titles;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);init();}/** * 初始化 */private void init() {pager = (ViewPager) findViewById(R.id.ii_viewpager);list = new ArrayList<View>();initPager();PagerAdapter pagerAdapter = new MyPagerAdapter();pager.setAdapter(pagerAdapter);initTab();}/** * 初始化头部标题 */private void initTab() {titles = new String[] { "百度", "阿里巴巴", "腾讯" };tabStrip = (PagerTabStrip) findViewById(R.id.ii_pagerstrip);// 删除ViewPager与选项卡之间的分割线tabStrip.setDrawFullUnderline(false);// 修改选项卡下滑线tabStrip.setTabIndicatorColor(Color.RED);}/** * 设置展示的内容 */private void initPager() {ImageView item = new ImageView(this);item.setImageResource(R.drawable.a);list.add(item);item = new ImageView(this);item.setImageResource(R.drawable.b);list.add(item);item = new ImageView(this);item.setImageResource(R.drawable.c);list.add(item);}private class MyPagerAdapter extends PagerAdapter {@Overridepublic int getCount() {return list.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}//创建展示的Viewpublic Object instantiateItem(ViewGroup container, int position) {View view = list.get(position);container.addView(view);return view;}//销毁隐藏的展示View@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {View view = list.get(position);container.removeView(view);}//Tab标题@Overridepublic CharSequence getPageTitle(int position) {return titles[position];}}}

至此一个简单的选项卡就做好啦【附源码：http://download.csdn.net/detail/shenqingxiaojian/7258329】

四、当然实际开发中我们不会仅仅满足于这么简单的，我们想自己定义一些动画效果

Ⅰ、布局文件

<LinearLayout 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:orientation="vertical"    tools:context=".MainActivity" >    <LinearLayout        android:id="@+id/ii_company_category"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <TextView            android:id="@+id/ii_category_bd"            android:layout_width="0dip"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center_horizontal"            android:text="百度"            android:textColor="#000000"            android:textSize="22sp" />        <TextView            android:id="@+id/ii_category_albb"            android:layout_width="0dip"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center_horizontal"            android:text="阿里巴巴"            android:textColor="#000000"            android:textSize="22sp" />        <TextView            android:id="@+id/ii_category_tx"            android:layout_width="0dip"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center_horizontal"            android:text="腾讯"            android:textColor="#000000"            android:textSize="22sp" />    </LinearLayout>    <!-- 下划线 -->    <ImageView        android:id="@+id/ii_category_selector"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:scaleType="matrix"        android:src="@drawable/id_category_selector" />    <android.support.v4.view.ViewPager        android:id="@+id/ii_viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

Ⅱ、java代码

package net.dxs.viewpager2;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.graphics.BitmapFactory;import android.graphics.Color;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.view.View;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.TextView;public class MainActivity extends Activity {/** * ViewPager容器 */private ViewPager mPager;/** * 要显示的内容的集合 */private List<View> views;/** * 百度头标 */private TextView bdTitle;// 百度/** * 阿里巴巴头标 */private TextView albbTitle;// 阿里巴巴/** * 腾讯头标 */private TextView txTitle;// 腾讯/** * 动画图片 */private ImageView cursor;/** * 动画图片宽度 */private int bmpW;/** * 设备屏幕宽度 */private int screenW;/** * 动画图片偏移量 */private int offset = 0;/** * 上一个位置 */private int prePostion = 0;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);init();}/** * 初始化 */private void init() {initTextView();//初始化头标initViewPager();//初始化ViewPagerinitImageView();//初始化指示图标}/** * 初始化头标 */private void initTextView() {bdTitle = (TextView) findViewById(R.id.ii_category_bd);albbTitle = (TextView) findViewById(R.id.ii_category_albb);txTitle = (TextView) findViewById(R.id.ii_category_tx);bdTitle.setTextColor(Color.RED);bdTitle.setOnClickListener(new MyOnClickListener(0));albbTitle.setOnClickListener(new MyOnClickListener(1));txTitle.setOnClickListener(new MyOnClickListener(2));}/** * 初始化指示图标动画 */private void initImageView() {cursor = (ImageView) findViewById(R.id.ii_category_selector);bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.id_category_selector).getWidth();// 获取图片宽度DisplayMetrics dm = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);screenW = dm.widthPixels;offset = (screenW / views.size() - bmpW) / 2;// 计算偏移量Matrix matrix = new Matrix();//获得一个矩阵matrix.postTranslate(offset, 0);//设置矩阵x,y轴偏移量cursor.setImageMatrix(matrix);// 设置动画初始位置}/** * 初始化ViewPager */private void initViewPager() {mPager = (ViewPager) findViewById(R.id.ii_viewpager);views = new ArrayList<View>();ImageView item = new ImageView(this);item.setImageResource(R.drawable.a);views.add(item);item = new ImageView(this);item.setImageResource(R.drawable.b);views.add(item);item = new ImageView(this);item.setImageResource(R.drawable.c);views.add(item);mPager.setAdapter(new MyPagerAdapter(views));mPager.setCurrentItem(0);//设置初始显示页卡mPager.setOnPageChangeListener(new MyOnPageChangeListener());//页卡切换监听}private class MyPagerAdapter extends PagerAdapter {private List<View> views;public MyPagerAdapter(List<View> views) {this.views = views;}@Overridepublic int getCount() {return views.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}//创建展示的Viewpublic Object instantiateItem(ViewGroup container, int position) {View view = views.get(position);container.addView(view);return view;}//销毁隐藏的展示View@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {View view = views.get(position);container.removeView(view);}}/** * 页卡切换监听 */public class MyOnPageChangeListener implements OnPageChangeListener {@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int position) {Animation animation = new TranslateAnimation(prePostion * screenW / 3, position * screenW / 3, 0, 0);animation.setDuration(300);animation.setFillAfter(true);// True:图片停在动画结束位置cursor.startAnimation(animation);prePostion = position;bdTitle.setTextColor(Color.BLACK);albbTitle.setTextColor(Color.BLACK);txTitle.setTextColor(Color.BLACK);switch (position) {case 0:bdTitle.setTextColor(Color.RED);break;case 1:albbTitle.setTextColor(Color.RED);break;case 2:txTitle.setTextColor(Color.RED);break;}}}/** * 头标点击事件 * @author lijian * */private class MyOnClickListener implements View.OnClickListener {private int position = 0;public MyOnClickListener(int i) {this.position = i;}@Overridepublic void onClick(View v) {Animation animation = new TranslateAnimation(prePostion * screenW / 3, position * screenW / 3, 0, 0);animation.setDuration(300);animation.setFillAfter(true);// True:图片停在动画结束位置cursor.startAnimation(animation);prePostion = position;bdTitle.setTextColor(Color.BLACK);albbTitle.setTextColor(Color.BLACK);txTitle.setTextColor(Color.BLACK);switch (position) {case 0:bdTitle.setTextColor(Color.RED);mPager.setCurrentItem(0);break;case 1:albbTitle.setTextColor(Color.RED);mPager.setCurrentItem(1);break;case 2:txTitle.setTextColor(Color.RED);mPager.setCurrentItem(2);break;}}}}

Ⅲ、最终效果

Ⅳ、附上源代码【http://download.csdn.net/detail/shenqingxiaojian/7259829】