展会信息港展会大全

Android开发学习之使用ViewPager制作可滑动的Tab
来源:互联网   发布日期:2015-10-02 21:09:19   浏览:1708次  

导读: 在昨天的文章中,我们使用ViewPager制作了一个简单的滑动切换的例子。今天让我们在昨天的基础之上,利用ViewPager来制作一个可以滑动的Tab。要实现这样的功能...

在昨天的文章中,我们使用ViewPager制作了一个简单的滑动切换的例子。今天让我们在昨天的基础之上,利用ViewPager来制作一个可以滑动的Tab。要实现这样的功能,除了ViewPager外,我们还需要一个PagerTabStrip来配合使用。简单说一下PagerTabStrip,Google官方描述为:PagerTabStrip是当前,未来和以前的页面的交互指标ViewPager。它旨在用作ViewPager插件在XML布局的子图。添加为ViewPager的孩子在你的布局文件,并设置其Android:layout_gravity到顶部或底部的钉选到ViewPager的顶部或底部。从每个页面的标题是由方法提供

getPageTitle(INT)在提供给ViewPager的适配器。这段话的大致意思就是说,PagerTabStrip是一个ViewPager的子控件,不能单独使用。通过layout_gravity属性来控制它显示的位置。使用getPageTitle()方法返回页面的标题。通过对这段话的理解我们可以设计出下面的布局代码:

.support.v4.view.PagerTabStrip>

.support.v4.view.ViewPager>

接下来,类似地,我们来编写一个ViewPaperAdapter类来实现getPageTitle()方法

package com.Android.ViewPagerTab;

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.view.View;

public class ViewPagerAdapter extends PagerAdapter

{

//存放View的数组

private ArrayList Views;

//存放Title的数组

private ArrayList Titles;

public ViewPagerAdapter(ArrayList Views,ArrayList Titles)

{

this.Views=Views;

this.Titles=Titles;

}

//获取PageTitle

@Override

public CharSequence getPageTitle(int position)

{

return Titles.get(position);

}

@Override

public void destroyItem(View container, int position, Object object)

{

((ViewPager)container).removeView(Views.get(position));

}

@Override

public Object instantiateItem(View container, int position)

{

((ViewPager)container).addView(Views.get(position),0);

return Views.get(position);

}

@Override

public int getCount()

{

if(Views!=null)

{

return Views.size();

}

return 0;

}

@Override

public boolean isViewFromObject(View view, Object object)

{

return (view==object);

}

}

这个适配器类和昨天的基本上时一致的,唯一的不同就在于它需要实现getPageTitle()方法。这里,我们通过构造函数来初始化一个存放标题的数组,通过返回这个数组中指定索引项对应的值来实现getPageTitle()方法。

到目前为止,适配器和界面都已经编写完成了,那么接下来,我们需要填充适配器,通过构造函数,我们知道,我们需要一个Views和Titles。对于Titles我们只需要写入一些字符串就可以了。对于Views,我们需要创建一些界面布局代码,简单的代码如下:

该布局将在屏幕中央显示一个字符串,这个为了简单,其它的布局都和这个布局是一样的,唯一的不同是它们显示不同的字符串。

现在我们来编写主要的逻辑代码:

package com.Android.ViewPagerTab;

import java.util.ArrayList;

import android.os.Bundle;

import android.app.Activity;

import android.support.v4.view.PagerTabStrip;

import android.support.v4.view.ViewPager;

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

import android.view.LayoutInflater;

import android.view.Menu;

import android.view.View;

import android.view.Window;

public class MainActivity extends Activity implements OnPageChangeListener {

//存放view的数组

private ArrayList Views;

//适配器类

private ViewPagerAdapter mAdapter;

//存放标题的数组

private ArrayList Titles;

//PagerTabStrip

private PagerTabStrip PagerTab;

//ViewPager

private ViewPager mViewPager;

@Override

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

//取得ViewPager实例

mViewPager=(ViewPager)findViewById(R.id.ViewPager);

//取得ViewTabStrip实例

PagerTab=(PagerTabStrip)findViewById(R.id.PagerTab);

//设置Tab选中时的颜色

PagerTab.setTabIndicatorColor(getResources().getColor(R.color.black));

//设置Tab是否显示下划线

PagerTab.setDrawFullUnderline(true);

//设置Tab背景色

PagerTab.setBackgroundColor(getResources().getColor(R.color.white));

//设置Tab间的距离?我感觉是这样

PagerTab.setTextSpacing(50);

//初始化Views

Views=new ArrayList();

LayoutInflater Inflater=LayoutInflater.from(this);

Views.add(Inflater.inflate(R.layout.activity_tab1, null));

Views.add(Inflater.inflate(R.layout.activity_tab2, null));

Views.add(Inflater.inflate(R.layout.activity_tab3, null));

//初始化Titles

Titles=new ArrayList();

Titles.add("Tab1");

Titles.add("Tab2");

Titles.add("Tab3");

//初始化适配器

mAdapter=new ViewPagerAdapter(Views,Titles);

mViewPager.setAdapter(mAdapter);

//默认显示第二项

SetTab(1);

}

public void SetTab(int index)

{

switch(index)

{

case 0:

mViewPager.setCurrentItem(0);

break;

case 1:

mViewPager.setCurrentItem(1);

break;

case 2:

mViewPager.setCurrentItem(2);

break;

}

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

@Override

public void onPageScrollStateChanged(int arg0) {

// TODO 自动生成的方法存根

}

@Override

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

// TODO 自动生成的方法存根

}

@Override

public void onPageSelected(int position)

{

SetTab(position);

}

}

这一部分的代码和昨天的基本一致,需要实现OnPageSelected()方法接口。最终的运行效果图如下所示:

赞助本站

人工智能实验室

相关热词: android开发 教程

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港