实例讲解Android中ViewPager组件的一些进阶使用技巧
作者:yayun0516 发布时间:2023-03-02 01:02:54
我们经常看到使用了ViewPager的App,在每页上面都会有一个滑块来标志当前处于哪一页。在PagerView包里有android.support.v4.view.PagerTitleStrip和android.support.v4.view.PagerTabStrip两个组件,可以在布局文件中,作为ViewPager的子标签,并设定相对与ViewPager的位置(比如顶部)。但这两个组件都很丑,并且标题会随着页面一起滑动,所以一般都不用。
其实实现一个滑块标志当前页面也很简单,大概需要两步:
第一步 在布局文件ViewPager的上方放置一个ImageView组件,组件可以是图片或是shape资源。注意需要把ImageView的scaleType属性设为matrix,就是说该组件的位置和大小由一个变换矩阵来控制;
第二步 在Activity中为ViewPager组件添加OnPageChangeListener * 。在OnPageChangeListener里设定matrix,用于控制指示滑块ImageView的位置。该 * 需要实现三个方法:
onPageScrollStateChanged:用于监听滑动状态的改变
onPageScrolled:用于监听滑动的动作
onPageSeleted:用于监听页面的切换,即某个页面被选中了作为当前页面。
一般实现onPageSelected方法就可以,其他两个方法可以空着。另外为了使页面切换时滑块也是平滑地滑动,可以给滑块的ImageView指定一个TranslateAnimation动画,指定动画用setAnimation,TranlateAnimation也很简单,有个构造函数是TranslateAnimation(int beginX,int endX,int beginY,int endY),将运动矢量的起始位置和终止位置传给它就好了。
下面我们来看五个具体的例子:
一 实现ViewPager(数据源为List<View>)
1.先在main.xml文件中添加一个ViewPager:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</LinearLayout>
2.创建三个View:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="25dp"
android:text="第一页" >
</TextView>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第二页" >
</TextView>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/txt3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第三页" >
</TextView>
</LinearLayout>
3.创建一个ViewPager适配器类:
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
public class ViewPagerAdapter extends PagerAdapter {
private List<View> lViews=new ArrayList<View>();
public ViewPagerAdapter(List<View> lViews){
this.lViews=lViews;
}
@Override
public int getCount() {
return lViews.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(lViews.get(position));
return lViews.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(lViews.get(position));
}
}
4.MainActivity.java:
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.os.Build;
public class MainActivity extends ActionBarActivity {
private ViewPager viewPager;
private List<View> listViews=null;
ViewPagerAdapter pagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
listViews=new ArrayList<View>();
/**
* 为Adapter创建数据源
*/
View view1=View.inflate(this, R.layout.view1, null);
View view2=View.inflate(this, R.layout.view2, null);
View view3=View.inflate(this, R.layout.view3, null);
listViews.add(view1);
listViews.add(view2);
listViews.add(view3);
pagerAdapter=new ViewPagerAdapter(listViews) ;
viewPager.setAdapter(pagerAdapter);
}
}
5.运行实例:
二 添加标题
1.我们需要更改main.xml文件:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<android.support.v4.view.PagerTabStrip
android:id="@+id/strip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" >
</android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>
</LinearLayout>
2.需要更改适配器文件:
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
public class ViewPagerAdapter extends PagerAdapter {
private List<View> lViews=new ArrayList<View>();
private List<String> titleList=new ArrayList<String>();
public ViewPagerAdapter(List<View> lViews,List<String> titleList){
this.lViews=lViews;
this.titleList=titleList;
}
@Override
public int getCount() {
return lViews.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(lViews.get(position));
return lViews.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(lViews.get(position));
}
/**
* 标题
*/
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}
}
3.需要更改MainActivity.java文件:
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.os.Build;
public class MainActivity extends ActionBarActivity {
private ViewPager viewPager;
private List<View> listViews=null;
ViewPagerAdapter pagerAdapter;
PagerTabStrip pagerTabStrip;
private List<String> titleList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
listViews=new ArrayList<View>();
titleList=new ArrayList<String>();
titleList.add("第一页");
titleList.add("第二页");
titleList.add("第三页");
/**
* 为Adapter创建数据源
*/
View view1=View.inflate(this, R.layout.view1, null);
View view2=View.inflate(this, R.layout.view2, null);
View view3=View.inflate(this, R.layout.view3, null);
listViews.add(view1);
listViews.add(view2);
listViews.add(view3);
pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
viewPager.setAdapter(pagerAdapter);
}
}
4.运行实例如下:
三 实现ViewPager(数据源为List<Fragment>)
1.首先我们要创建三个Fragment:
package com.yayun.viewpagerdemo;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.view1, container, false);
}
}
package com.yayun.viewpagerdemo;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.view2, container, false);
}
}
package com.yayun.viewpagerdemo;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment3 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.view3, container, false);
}
}
2.设置Adapter:
package com.yayun.viewpagerdemo;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
List<Fragment> fragmentsList;
List<String> titleList;
public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {
super(fm);
this.fragmentsList=fragmentsList;
this.titleList=titleList;
}
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return fragmentsList.get(arg0);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return fragmentsList.size();
}
@Override
/**
* 添加标题
*/
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}
}
3.MainActivity.java:
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.PageTransformer;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.Window;
public class MainActivity extends ActionBarActivity {
private ViewPager viewPager;
private List<View> listViews=null;
ViewPagerAdapter pagerAdapter;
PagerTabStrip pagerTabStrip;
private List<String> titleList;
private List<Fragment> fragmentsList;
MyFragmentPagerAdapter myFragmentPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
/**
* 设置PagerTabStrip属性
*/
pagerTabStrip.setBackgroundColor(Color.GREEN);
pagerTabStrip.setDrawFullUnderline(false);
pagerTabStrip.setTextColor(Color.WHITE);
listViews=new ArrayList<View>();
titleList=new ArrayList<String>();
fragmentsList=new ArrayList<Fragment>();
fragmentsList.add(new Fragment1());
fragmentsList.add(new Fragment2());
fragmentsList.add(new Fragment3());
titleList.add("第一页");
titleList.add("第二页");
titleList.add("第三页");
/**
* 为Adapter创建数据源
*/
View view1=View.inflate(this, R.layout.view1, null);
View view2=View.inflate(this, R.layout.view2, null);
View view3=View.inflate(this, R.layout.view3, null);
listViews.add(view1);
listViews.add(view2);
listViews.add(view3);
pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);
//viewPager.setAdapter(pagerAdapter);
viewPager.setAdapter(myFragmentPagerAdapter);
}
}
4.运行实例:
这种方法不会销毁不在当前页面的页面,不能实现页卡的创建和销毁。
四 实现ViewPager(数据源为List<Fragment>实现FargmentStatePagerAdapter)常用
改变Adapter:
package com.yayun.viewpagerdemo;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.view.View;
public class MyFragmentPagerAdapter2 extends FragmentStatePagerAdapter {
List<Fragment> fragmentsList;
List<String> titleList;
public MyFragmentPagerAdapter2(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {
super(fm);
this.fragmentsList=fragmentsList;
this.titleList=titleList;
}
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return fragmentsList.get(arg0);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return fragmentsList.size();
}
@Override
/**
* 添加标题
*/
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}
@Override
public Object instantiateItem(View container, int position) {
// TODO Auto-generated method stub
return super.instantiateItem(container, position);
}
@Override
public void destroyItem(View container, int position, Object object) {
// TODO Auto-generated method stub
super.destroyItem(container, position, object);
}
}
将MainActivity.java中的Adapter换一下即可,它可以实现页卡的创建和销毁。
五 onPagerChangeListener 监听使用
只需要修改MainActivity.java:
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v4.view.ViewPager.PageTransformer;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.Window;
import android.widget.Toast;
public class MainActivity extends ActionBarActivity implements OnPageChangeListener {
private ViewPager viewPager;
private List<View> listViews=null;
ViewPagerAdapter pagerAdapter;
PagerTabStrip pagerTabStrip;
private List<String> titleList;
private List<Fragment> fragmentsList;
MyFragmentPagerAdapter myFragmentPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
/**
* 设置PagerTabStrip属性
*/
pagerTabStrip.setBackgroundColor(Color.GREEN);
pagerTabStrip.setDrawFullUnderline(false);
pagerTabStrip.setTextColor(Color.WHITE);
listViews=new ArrayList<View>();
titleList=new ArrayList<String>();
fragmentsList=new ArrayList<Fragment>();
fragmentsList.add(new Fragment1());
fragmentsList.add(new Fragment2());
fragmentsList.add(new Fragment3());
titleList.add("第一页");
titleList.add("第二页");
titleList.add("第三页");
/**
* 为Adapter创建数据源
*/
View view1=View.inflate(this, R.layout.view1, null);
View view2=View.inflate(this, R.layout.view2, null);
View view3=View.inflate(this, R.layout.view3, null);
listViews.add(view1);
listViews.add(view2);
listViews.add(view3);
pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);
//viewPager.setAdapter(pagerAdapter);
viewPager.setAdapter(myFragmentPagerAdapter);
viewPager.setOnPageChangeListener(this);//加载 *
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int arg0) {
Toast.makeText(this, "当前页面为"+(arg0+1), Toast.LENGTH_SHORT).show();
}
}
运行实例即可以显示当前页面标签。


猜你喜欢
- 在项目中有使用到延时队列的场景,做个简单的记录说明;首先DelayQueue实现了BlockingQueue,加入其中的元素必须实现Dela
- 网上很多人对设置控件的位置都使用view.setPadding(left, top, right, bottom) ,其实这玩意很差劲,它是
- 前言使用Java8的新特性Stream流式处理,可以提高对于集合的一些操作效率,再配合lambda表达式,可以极致的简化代码,尤其还有并行流
- 前言我们一说到spring,可能第一个想到的是 IOC(控制反转) 和 AOP(面向切面编程)。没错,它们是spring的基石,得益于它们的
- 2PC两阶段提交协议分布式事务通常采用2PC协议,全称Two Phase Commitment Protocol。该协议主要为了解决在分布式
- 目录前言I. 字符串转列表1. jdk支持方式2. guava方式3. apache-commonsII. 列表转字符串1. StringB
- Java对象内存构成今天来讲些抽象的东西 -- 对象头,因为我在学习的过程中发现很多地方都关联到了对象头的知识点,例如JDK中的 synch
- 本文实例讲述了DevExpress中ChartControl实现柱状图演示的方法。分享给大家供大家参考。具体实现方法如下:关键代码如下:us
- 前言MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架。MyBatis消除了几乎所有的JDBC代码和参数的手工设置以
- 本文实例为大家分享了android自定义控件实现简易时间轴的具体代码,供大家参考,具体内容如下之前项目需要写一个消费记录,类似于时间轴似的控
- Android Q 禁止获取 IMEI 和设备序列号;官方的解决方案是这样:https://developer.android.com/tr
- 在有些时候,我们需要从数据库读取数据填充对象或从硬盘读取文件填充对象,但是这样做相对耗时。这时候我们就想到了对象的拷贝。本文即以实例形式解析
- 用DataFormatString格式化GridView在 GridView里面显示数据,要显示的数据有好多位小数,就想让它只显示两位小数,
- /** * 进行BigDecimal对象的加减乘除,四舍五入等运算的工具类 * * @author Marydon * @createTi
- 本文实例为大家分享了Java NIO实现聊天功能的具体代码,供大家参考,具体内容如下server code : package c
- 目录结构:Data.xls数据: 后台页面:public void doGet(HttpServletRequest reques
- DateTime dt = DateTime.Now;Label1.Text = dt.ToString();//2005-11-5 13:
- spring和mybatis整合整合思路需要spring通过单例方式管理SqlSessionFactory。spring和mybatis整合
- package com.yao;import java.util.concurrent.ExecutorService;import jav
- 赛马下周一就要去做java实验了,还记得上一次实验还有一个程序没写完,匆匆交了实验报告的半成品(希望老师没发现www)。为了下周一能有更充裕