本文共 6843 字,大约阅读时间需要 22 分钟。
不做安卓好几天了,最近两天一直在按照设计图布web页面,头都大了。但是感觉自己布页面的水平还是可以滴,布完页面之后瞬间感觉自己萌哒哒的~嘿嘿,不过安卓好几天不做了,手都生了,今天被一个大哥叫过去调ViewPager的一个东西,搞半天没弄出来,╮(╯▽╰)╭,看来Tech support还要继续学习。
好啦,先看一个做简单的ViewPage滑动,之后,我会在后续的博客中不断改进,达到一个理想的,可复用的东西。
首先是布局XML文件:
大致是这个样子滴:
Activity代码:
(我都写到onCreate里面了,只是为了做例子,新手注意!!!最近发现我写的很多代码都被人copy来copy去,变得我见了都哭笑不得了)
package com.example.liuhuichao.projecttest;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import java.util.ArrayList;/** 功能:ViewPager的Demo* 作者:刘慧超* 时间:2015年11月15日23:47:34* */public class MainActivity extends AppCompatActivity { ViewPager pager=null; /*此处我们使用PagerTabStrip(此控件是可交互控件) * 说明,1,PagerTabStrip在当前页面下面,会有一个下划线条来提示当前页面的Tab是哪个 * 2,PagerTabStrip的Tab是可以点击的, 当用户点击某一个Tab的时候,当前页面会跳转到这个页面, * 而PaperTitleStrip则没有这个功能 * */ PagerTabStrip tabStrip=null; ArrayListviewContainter=new ArrayList ();//tab对应的视图 ArrayList titleContainer=new ArrayList ();//tab的标题 public String TAG="tag";//用于logcat的输出 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.content_main); pager=(ViewPager)findViewById(R.id.viewpager); tabStrip=(PagerTabStrip)this.findViewById(R.id.tabstrip); /*标题行的样式设置*/ tabStrip.setDrawFullUnderline(false);//取消tab下面的长横线 tabStrip.setBackgroundColor(123);//设置tab的背景色 tabStrip.setTabIndicatorColor(234);//设置当前tab页签下划线颜色 tabStrip.setTextSpacing(200); /* * 1, LayoutInflater作用是将layout的xml布局文件实例化为View类对象。 * 2,inflater.inflate(R.layout.main, null)与LayoutInflater.from(this).inflate(R.layout.tab1,null);作用一样 * */ View view1= LayoutInflater.from(this).inflate(R.layout.tab1,null); View view2=LayoutInflater.from(this).inflate(R.layout.tab2,null); View view3=LayoutInflater.from(this).inflate(R.layout.tab3,null); View view4=LayoutInflater.from(this).inflate(R.layout.tab4,null); //从ViewPager开始添加View viewContainter.add(view1); viewContainter.add(view2); viewContainter.add(view3); viewContainter.add(view4); //页签项 titleContainer.add("讲师信息"); titleContainer.add("讲师课程"); titleContainer.add("讲师评价"); titleContainer.add("讲师主页"); pager.setAdapter(new PagerAdapter() { /* * viewpager中组件数量 * */ @Override public int getCount() { return viewContainter.size(); } /* * 初始化item * 做了两件事,第一:将当前视图添加到container中,第二:返回当前View * * 这个函数的实现的功能是创建指定位置的页面视图。 * 适配器有责任增加即将创建的View视图到这里给定的container中, * 这是为了确保在finishUpdate(viewGroup)返回时this is be done! 返回值:返回一个代表新增视图页面的Object(Key),这里没必要非要返回视图本身, 也可以这个页面的其它容器。其实我的理解是可以代表当前页面的任意值, 只要你可以与你增加的View一一对应即可,比如position变量也可以做为Key * */ @Override public Object instantiateItem(ViewGroup container, int position) { ((ViewPager) container).addView(viewContainter.get(position)); return viewContainter.get(position); } /*滑动切换的时候销毁当前组件 * 从当前container中删除指定位置(position)的View; * */ @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager) container).removeView(viewContainter.get(position)); } /* * */ @Override public int getItemPosition(Object object) { return super.getItemPosition(object); } /*为每个页面提供页面标题*/ @Override public CharSequence getPageTitle(int position) { return titleContainer.get(position); } /* * 该函数用来判断instantiateItem(ViewGroup, int) * 函数所返回来的Key与一个页面视图是否是代表的同一个视图(即它俩是否是对应的,对应的表示同一个View) * *返回值:如果对应的是同一个View,返回True,否则返回False。 * */ @Override public boolean isViewFromObject(View view, Object object) { return view == object; //官方提示这样写 } }); /**/ pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { /* * 这个方法会在屏幕滚动过程中不断被调用。 有三个参数,第一个position,这个参数要特别注意一下。 当用手指滑动时,如果手指按在页面上不动,position和当前页面index是一致的; 如果手指向左拖动(相应页面向右翻动),这时候position大部分时间和当前页面是一致的, 只有翻页成功的情况下最后一次调用才会变为目标页面;如果手指向右拖动(相应页面向左翻动), 这时候position大部分时间和目标页面是一致的,只有翻页不成功的情况下最后一次调用才会变为原页面。 当直接设置setCurrentItem翻页时, 如果是相邻的情况(比如现在是第二个页面,跳到第一或者第三个页面), 如果页面向右翻动,大部分时间是和当前页面是一致的,只有最后才变成目标页面; 如果向左翻动,position和目标页面是一致的。这和用手指拖动页面翻动是基本一致的。 如果不是相邻的情况,比如我从第一个页面跳到第三个页面,position先是0,然后逐步变成1, 然后逐步变成2;我从第三个页面跳到第一个页面,position先是1,然后逐步变成0, 并没有出现为2的情况。 positionOffset是当前页面滑动比例,如果页面向右翻动,这个值不断变大, 最后在趋近1的情况后突变为0。如果页面向左翻动,这个值不断变小,最后变为0。 positionOffsetPixels是当前页面滑动像素,变化情况和positionOffset一致。 * */ @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { Log.d(TAG, "------scrolled positon:" + position); Log.d(TAG, "------scrolled positionOffset:" + positionOffset); Log.d(TAG, "------scrolled positionOffsetPixels:" + positionOffsetPixels); } /* * * 这个方法有一个参数position,代表哪个页面被选中。 * 当用手指滑动翻页的时候,如果翻动成功了(滑动的距离够长), * 手指抬起来就会立即执行这个方法,position就是当前滑动到的页面。 * 如果直接setCurrentItem翻页,那position就和setCurrentItem的参数一致, * 这种情况在onPageScrolled执行方法前就会立即执行。 * */ @Override public void onPageSelected(int position) { Log.d(TAG, "-----Selected:" + position); } /* * 这个方法在手指操作屏幕的时候发生变化。 * 有三个值:0(END),1(PRESS) , 2(UP) 。 当用手指滑动翻页时,手指按下去的时候会触发这个方法,state值为1, 手指抬起时,如果发生了滑动(即使很小),这个值会变为2,然后最后变为0 。 总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生, 这个时候只会调用这个方法两次,state值分别是1,0 。 当setCurrentItem翻页时,会执行这个方法两次,state值分别为2 , 0 * */ @Override public void onPageScrollStateChanged(int state) { Log.d(TAG,"-----changed:"+state); } }); }}
run完之后发现基本功能有了,剩下的还有一点儿小bug,在后续blog中,我们将对这个东西做一个改进。
PS:不要指望一口吃成胖子,胖子是一口一口吃成的。