Android选项卡viewpager入门到精通

最新推荐文章于 2020-07-26 11:57:51 发布

深情小建

最新推荐文章于 2020-07-26 11:57:51 发布

阅读量1.4k

点赞数

分类专栏： java Android 文章标签： android viewpager 选项卡

本文链接：https://blog.csdn.net/w54dxs/article/details/24557069

版权

java 同时被 2 个专栏收录

207 篇文章 1 订阅

订阅专栏

Android

13 篇文章 1 订阅

订阅专栏

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

二、配置布局文件

<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;

	@Override
	protected 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 {
		@Override
		public int getCount() {
			return list.size();
		}

		@Override
		public boolean isViewFromObject(View view, Object object) {
			return view == object;
		}

		//创建展示的View
		public Object instantiateItem(ViewGroup container, int position) {
			View view = list.get(position);
			container.addView(view);
			return view;
		}

		//销毁隐藏的展示View
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			View view = list.get(position);
			container.removeView(view);
		}

		//Tab标题
		@Override
		public 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;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		init();
	}

	/**
	 * 初始化
	 */
	private void init() {
		initTextView();//初始化头标
		initViewPager();//初始化ViewPager
		initImageView();//初始化指示图标
	}
	

	/**
	 * 初始化头标
	 */
	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;
		}
		
		@Override
		public int getCount() {
			return views.size();
		}

		@Override
		public boolean isViewFromObject(View view, Object object) {
			return view == object;
		}

		//创建展示的View
		public Object instantiateItem(ViewGroup container, int position) {
			View view = views.get(position);
			container.addView(view);
			return view;
		}

		//销毁隐藏的展示View
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			View view = views.get(position);
			container.removeView(view);
		}
	}
	
	/**
	 * 页卡切换监听
	 */
	public class MyOnPageChangeListener implements OnPageChangeListener {

		@Override
		public void onPageScrollStateChanged(int arg0) {

		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {

		}

		@Override
		public 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;
		}

		@Override
		public 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;
			}
		}
	}
}

Ⅲ、最终效果