Android选项卡viewpager入门到精通

时间：2022-01-19 06:27:00

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

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;

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


Ⅲ、最终效果

Android选项卡viewpager入门到精通


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



标签：

相关文章