ViewPager(Android3.0以后发布)
1、这个控件支持页面的左右滑动。
2、ViewPager是V4包的,在使用的时候需要导入V4包。
3、Viewpager不是一个单一的控件,而是一个容器。不可以直接添加View,需要使用适配器来完成相应的操作。常用的适配器有PageAdapter,FragmentPageAdapter。
4、ViewPager的应用:
1>:写布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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.support.v4.view.ViewPager
android:id="@+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>
2>:找到控件
mViewPager= (ViewPager) findViewById(R.id.mViewPager);
3>:获取数存放到List集合中
img_01 = (ImageView) findViewById(R.id.img_01);
img_02 = (ImageView) findViewById(R.id.img_02);
img_03 = (ImageView) findViewById(R.id.img_03);
img_04 = (ImageView) findViewById(R.id.img_04);
lists.add(img_01);
lists.add(img_02);
lists.add(img_03);
lists.add(img_04);
4>:自定义适配器,实现PagerAdapter
/**
* PagerAdapter适配器
*/
public class MyAdapter extends PagerAdapter{
@Override
public int getCount() {//返回的是内容的条目
return lists.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {//view的来源是否是object
return view==object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = lists.get(position);
if (view.getParent()!=null){
ViewGroup vg = (ViewGroup) view.getParent();
vg.removeView(view);
}
container.removeView(view);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(lists.get(position));
}
}
5>:给ViewPager对象绑定适配器
mViewPager.setAdapter(mMyAdapter);
6>:实现ViewPager自动播放
new Thread(new Runnable() {
@Override
public void run() {
try {
while (true){
Thread.sleep(3000);
if(++positionIndex>3){
positionIndex=0;
}
Handler.sendEmptyMessage(100);
}
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();
Handler Handler=new Handler(){
@Override
public void handleMessage(Message msg) {
switch (msg.what){
case 100:
mViewPager.setCurrentItem(positionIndex);
break;
}
}
};
5、ViewPager的应用二(实现上述应用的无限循环滑动,主要的区别在于自定义适配器)
1>:写布局文件
2>:找到控件
3>:获取数存放到List集合中
4>:自定义适配器,实现PagerAdapter
5>:给ViewPager对象绑定适配器
/**
* PagerAdapter适配器
*/
public class MyAdapter extends PagerAdapter{
//将容器设置为最大值(理论上是可以滑动完成的)
@Override
public int getCount() {//返回的是内容的条目
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object object) {//view的来源是否是object
return view==object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = lists.get(position % lists.size());
if (view.getParent()!=null){
ViewGroup vg = (ViewGroup) view.getParent();
vg.removeView(view);
}
container.removeView(view);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(lists.get(position % lists.size()));
}
}
6>:实现ViewPager自动播放
Handler mHandler=new Handler(){
@Override
public void handleMessage(Message msg) {
switch (msg.what){
case 100:
mViewPager.setCurrentItem(mIndex++);
break;
}
}
};
new Thread(new Runnable() {
@Override
public void run() {
try {
while (true){
Thread.sleep(3000);
Message msg=new Message();
msg.what=100;
mHandler.sendMessage(msg);
}
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();
6、广告条制作
1>:写布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.example.tingxiangxi.viewpagerapplication.Main3Activity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="300dp">
<android.support.v4.view.ViewPager
android:id="@+id/mViewpager"
android:layout_width="match_parent"
android:layout_height="260dp">
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_below="@+id/mViewpager"
android:layout_alignParentBottom="true"
android:background="#ccc"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="标题"
android:textSize="16sp" />
<LinearLayout
android:id="@+id/selectedContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
</LinearLayout>
<!--下面还可能有内容-->
</RelativeLayout>
2>:查找控件
/**
* 查找控件
*/
private void findView(){
mViewPager = (ViewPager) findViewById(R.id.mViewpager);
title=(TextView) findViewById(R.id.tv_title);
selectedContainer=(LinearLayout) findViewById(R.id.selectedContainer);
}
3>:初始化数据
/**
* 初始化数据
*/
private void initData(){
for (int i = 0; i <titles.length; i++) {
ImageView img=new ImageView(Main3Activity.this);
img.setBackgroundResource(immgs[i]);
img.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
//将要显示的View装到容器中
lists.add(img);
//初始化“点”的view
View view=new View(Main3Activity.this);
//给“点”设置背景
view.setBackgroundResource(R.drawable.dot_normal);
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(25,25);
//给“点”设置左右上下的外边距
params.setMargins(20,5,0,0);
view.setLayoutParams(params);
//将“点”添加到容器中去
selectedContainer.addView(view);
//把动态生成的点保存到集合中
points.add(view);
}
//设置默认标题
title.setText(titles[0]);
//将“点”变成红色
points.get(0).setBackgroundResource(R.drawable.dot_enable);
}
4>:自定义适配器
/**
* 自定义适配器
*/
private class MyAdapter extends PagerAdapter{
//给容器设置最大值
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = lists.get(position % lists.size());
if (view.getParent()!=null){
ViewGroup vg = (ViewGroup) view.getParent();
vg.removeView(view);
}
container.removeView(view);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(lists.get(position % lists.size()));
}
}
5>:给ViewPager对象绑定适配器
/**
* 创建方法来添加适配器
*/
private void setAdapter() {
MyAdapter mMyAdapter =new MyAdapter();
mViewPager.setAdapter(mMyAdapter);
}
6>:设置页面改变的监听事件
/**
* 设置页面改变的监听
*/
private void setOnPagerListener() {
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
/**
* 某一个页面被选中
* @param position
*/
@Override
public void onPageSelected(int position) {
//改变标题
title.setText(titles[position % titles.length]);
points.get(prePosittion).setBackgroundResource(R.drawable.dot_normal);
points.get(position%titles.length).setBackgroundResource(R.drawable.dot_enable);
//记录改变之前的位置
prePosittion=position%titles.length;
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
7、实现广告的自动循环
/**
* 自动滑动
*/
private void autoFling() {
new Thread(new Runnable() {
@Override
public void run() {
while (isLooping){
try {
Thread.sleep(3000);
mHandler.sendEmptyMessage(100);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
}
Handler mHandler=new Handler(){
@Override
public void handleMessage(Message msg) {
switch (msg.what){
case 100:
//获取当前位置
int position = mViewPager.getCurrentItem();
//向下一个页面进行滑动
mViewPager.setCurrentItem(position+1);
break;
}
}
};
7、Fragment与ViewPager的混合使用
1>:写布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.example.tingxiangxi.viewpagerapplication.Main4Activity">
<android.support.v4.view.ViewPager
android:id="@+id/mViewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>
2>:查找控件
mViewPager = (ViewPager) findViewById(R.id.mViewpager);
3>:初始化数据
/**
* 初始化数据
*/
private void initData() {
for (int i = 0; i < 4; i++) {
ContentFragment contentFragment=new ContentFragment();
Bundle bundle = new Bundle();
bundle.putString("content","页面"+i);
contentFragment.setArguments(bundle);
lists.add(contentFragment);
}
}
4>:自定义适配器
/**
* 自定义适配器
* 这个适配器是Viewpager专门设置给Fragment的
*/
private class MyAdapter extends FragmentPagerAdapter{
public MyAdapter(FragmentManager fm) {
super(fm);
}
@Override
public android.support.v4.app.Fragment getItem(int position) {
return lists.get(position);
}
@Override
public int getCount() {
return lists.size();
}
}
}
5>:将ViewPager对象绑定适配器
/**
* 设置适配器
*/
private void setAdapter() {
MyAdapter myAdapter=new MyAdapter(getSupportFragmentManager());
mViewPager.setAdapter(myAdapter);
}
6>:Fragment中的代码如下
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class ContentFragment extends Fragment {
private TextView tv_01;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.activity_content_fragment,null,false);
findView(view);
return view;
}
private void findView(View view) {
tv_01 = (TextView) view.findViewById(R.id.tv_01);
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
String result = getArguments().getString("content");
tv_01.setText(result);
}
}
8、综合案例
1>:写布局文件
<?xml version="1.0" encoding="utf-8"?>
<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="com.example.tingxiangxi.viewpagerapplication.Main5Activity">
<HorizontalScrollView
android:id="@+id/hsv"
android:layout_width="match_parent"
android:layout_height="50dp"
android:fillViewport="false"
android:scrollbars="none"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical">
<LinearLayout
android:id="@+id/titleContainer"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:gravity="center"
android:orientation="horizontal">
</LinearLayout>
<TextView
android:id="@+id/fling"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#3A94FF"></TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#3A94FF"></TextView>
</LinearLayout>
</HorizontalScrollView>
<android.support.v4.view.ViewPager
android:id="@+id/mViewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
2>:查找控件
/**
* 查找控件
*/
private void findView() {
mHorizontalScrollView = (HorizontalScrollView) findViewById(R.id.hsv);
mViewPager=(ViewPager) findViewById(R.id.mViewpager);
titleContainer=(LinearLayout) findViewById(R.id.titleContainer);
fling=findViewById(R.id.fling);
}
3>:初始化数据
/**
* 初始化数据
*/
private void initData() {
initScreenWidth();
for (int i = 0; i < titles.length; i++) {
TextView mTextView=new TextView(Main5Activity.this);
mTextView.setTextSize(20);
mTextView.setGravity(Gravity.CENTER);
mTextView.setText(titles[i]);
mTextView.setLayoutParams(new LinearLayout.LayoutParams(mScreenWidth/3,LinearLayout.LayoutParams.WRAP_CONTENT));
titleContainer.addView(mTextView);
textViews.add(mTextView);
//初始化Fragment
ContentFragment contentFragment=new ContentFragment();
Bundle bundle = new Bundle();
bundle.putString("content",titles[1]);
contentFragment.setArguments(bundle);
fragments.add(contentFragment);
}
setViewFlingWidth();
setAdapter();
setTitleTabListener();
setPagerListener();
}
4>:自定义适配器
/**
* 自定义适配器
*/
private class MyAdapter extends FragmentPagerAdapter{
public MyAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return titles.length;
}
}
5>:将ViewPager对象绑定适配器
/**
* 设置适配器
*/
private void setAdapter() {
MyAdapter mMyAdapter=new MyAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mMyAdapter);
}
6>:设置切换卡的TextView的监听
/**
* 设置切换卡的监听事件
*/
private void setTitleTabListener() {
int childCount = titleContainer.getChildCount();
for (int i = 0; i < childCount; i++) {
titleContainer.getChildAt(i).setTag(i);
titleContainer.getChildAt(i).setOnClickListener(new Listener());
}
}
/**
* titleTextView的监听事件
*/
private class Listener implements View.OnClickListener{
@Override
public void onClick(View v) {
mViewPager.setCurrentItem((int)v.getTag());
}
}
7>:设置滑块的宽度
/**
* 获取屏幕宽度
*/
private void initScreenWidth() {
DisplayMetrics mDisplayMetrics=new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(mDisplayMetrics);
mScreenWidth=mDisplayMetrics.widthPixels;
}
/**
* 设置滑动块的宽度
*/
private void setViewFlingWidth() {
params=new LinearLayout.LayoutParams(mScreenWidth/3,fling.getLayoutParams().height);
fling.setLayoutParams(params);
}
8>:设置页面滚动的监听事件
/**
* 滑动的时候mHorizontalScrollView跟着滑动
* @param position
*/
private void setSooth(int position) {
int offset=titleContainer.getChildAt(position).getLeft()-mScreenWidth/2+titleContainer.getChildAt(position).getWidth()/2;
mHorizontalScrollView.smoothScrollTo(offset,0);
}
/**
* 设置页面滚动的监听事件
*/
private void setPagerListener() {
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/**
*
* @param position 滚动的位置
* @param positionOffset 偏移量
* @param positionOffsetPixels 偏移的像素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
params.leftMargin= (int) ((position+positionOffset)*params.width);
fling.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {
textViews.get(prePosition).setTextColor(Color.BLACK);
textViews.get(position).setTextColor(Color.RED);
prePosition=position;
setSooth(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}