Android水平(横向)翻页列表,类似水平GridVIew
Android水平(横向)翻页列表，类似于水平方向的GridView，行列自定义，但要翻页切换，考虑加载性能，当Item数据很多时加载和翻页要流畅，翻页时要有动画效果，效果图如下：
实现方式：
1：翻页可用ViewPager来做，每页内多行排列Item，考虑到翻页切换数据和加载的速度不能嵌套GridView，直接使用View来显示。
2：缓存被ViewPager销毁的View，以此来提高当数据量很大时的系统资源消耗问题。
代码实现如下：
1：最主要的是编写一个自定义的PagerAdapter类，用来给ViewPager适配数据，默认情况下ViewPager会缓存相邻两页面的View，我们定义一个List<View>用来缓存被destroy后的view，当ViewPager需要实例化一个新View用来显示时，判断是否有缓存的View，如果有则拿出来使用，如果没有实例化一个新的view，写一个Item的布局文件，这里每页面10个，通过ViewHolder来处理各小Item，每次实例化新的页面时给view设置当前页10个item的数据(从List中获得，判断当前页需要显示的position，从List中取出相应的数据，最后一页显示不完的地方留空)。具体实现代码如下：
/**
* @author Homgwu
*/
public class MainViewPagerAdapter extends PagerAdapter implements OnClickListener {
private List<ItemEntity> singerList = new ArrayList<ItemEntity>();
private Context mContext;
private int pagerCount = 0;
/**
* 用来缓存被viewpager destroy掉的view，以便重复使用
*/
private List<View> cacheViews = new ArrayList<View>();
private LayoutInflater mInflater;
// private static final int TAG_VIEWHOLDER = 1;
// private static final int TAG_ITEMDATA = 2;
/**
* 一页内的item个数
*/
private double itemInCount = 10.0; public MainViewPagerAdapter(List<ItemEntity> itemList, Context mContext) {
super();
this.singerList = itemList;
this.mContext = mContext;
pagerCount = (int) Math.ceil(itemList.size() / itemInCount);
mInflater = LayoutInflater.from(this.mContext);
} public void updateData(List<ItemEntity> singerList) {
this.singerList = singerList;
notifyDataSetChanged();
} @Override
public int getCount() {
return pagerCount;
} @Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
View view = (View) object;
((ViewPager) container).removeView(view);
//隐藏页面内的item
clearViewContent((ViewHolder) view.getTag());
//添加到缓存
cacheViews.add(view);
} @Override
public int getItemPosition(Object object) {
return POSITION_NONE;
} @Override
public Object instantiateItem(ViewGroup container, int position) {
View view = null;
ViewHolder viewHolder = null;
//没有缓存的view时新建一个用来显示
if (cacheViews.isEmpty()) {
view = mInflater.inflate(R.layout.viewpager_item,
container, false);
viewHolder = new ViewHolder(view);
view.setTag(viewHolder);
} else {
//有缓存的view时取出使用
view = cacheViews.remove(0);
viewHolder = (ViewHolder) view.getTag();
}
//设置页面内的各item
initItemData(viewHolder, view, position);
container.addView(view);
return view;
} private void initItemData(ViewHolder viewHolder, View view, int position) {
int totalInItemCount = singerList.size();
int tempitemInCount= (int) itemInCount;
//每页显示10个item
for (int i = 0; i < tempitemInCount; i++) {
//计算当前页要显示的item在arraylist中的position。
int inItemPosition = position *tempitemInCount + i;
//如果最后一页显示不满时跳出循环，后面的item不再显示
if (inItemPosition >= totalInItemCount) {
break;
}
ItemEntity itemEntity = singerList.get(inItemPosition);
switch (i) {
case 0:
viewHolder.bgIV1
.setBackgroundResource(R.mipmap.item_bg);
viewHolder.titleTV1.setText(itemEntity.name);
viewHolder.itemRL1.setVisibility(View.VISIBLE);
viewHolder.itemRL1.setTag(itemEntity);
viewHolder.itemRL1.setOnClickListener(this);
break;
case 1:
viewHolder.bgIV2
.setBackgroundResource(R.mipmap.item_bg);
viewHolder.titleTV2.setText(itemEntity.name);
viewHolder.itemRL2.setVisibility(View.VISIBLE);
viewHolder.itemRL2.setTag(itemEntity);
viewHolder.itemRL2.setOnClickListener(this);
break;
case 2:
viewHolder.bgIV3
.setBackgroundResource(R.mipmap.item_bg);
viewHolder.titleTV3.setText(itemEntity.name);
viewHolder.itemRL3.setVisibility(View.VISIBLE);
viewHolder.itemRL3.setTag(itemEntity);
viewHolder.itemRL3.setOnClickListener(this);
break;
case 3:
viewHolder.bgIV4
.setBackgroundResource(R.mipmap.item_bg);
viewHolder.titleTV4.setText(itemEntity.name);
viewHolder.itemRL4.setVisibility(View.VISIBLE);
viewHolder.itemRL4.setTag(itemEntity);
viewHolder.itemRL4.setOnClickListener(this);
break;
case 4:
viewHolder.bgIV5
.setBackgroundResource(R.mipmap.item_bg);
viewHolder.titleTV5.setText(itemEntity.name);
viewHolder.itemRL5.setVisibility(View.VISIBLE);
viewHolder.itemRL5.setTag(itemEntity);
viewHolder.itemRL5.setOnClickListener(this);
break;
case 5:
viewHolder.bgIV6
.setBackgroundResource(R.mipmap.item_bg);
viewHolder.titleTV6.setText(itemEntity.name);
viewHolder.itemRL6.setVisibility(View.VISIBLE);
viewHolder.itemRL6.setTag(itemEntity);
viewHolder.itemRL6.setOnClickListener(this);
break;
case 6:
viewHolder.bgIV7
.setBackgroundResource(R.mipmap.item_bg);
viewHolder.titleTV7.setText(itemEntity.name);
viewHolder.itemRL7.setVisibility(View.VISIBLE);
viewHolder.itemRL7.setTag(itemEntity);
viewHolder.itemRL7.setOnClickListener(this);
break;
case 7:
viewHolder.bgIV8
.setBackgroundResource(R.mipmap.item_bg);
viewHolder.titleTV8.setText(itemEntity.name);
viewHolder.itemRL8.setVisibility(View.VISIBLE);
viewHolder.itemRL8.setTag(itemEntity);
viewHolder.itemRL8.setOnClickListener(this);
break;
case 8:
viewHolder.bgIV9
.setBackgroundResource(R.mipmap.item_bg);
viewHolder.titleTV9.setText(itemEntity.name);
viewHolder.itemRL9.setVisibility(View.VISIBLE);
viewHolder.itemRL9.setTag(itemEntity);
viewHolder.itemRL9.setOnClickListener(this);
break;
case 9:
viewHolder.bgIV10
.setBackgroundResource(R.mipmap.item_bg);
viewHolder.titleTV10.setText(itemEntity.name);
viewHolder.itemRL10.setVisibility(View.VISIBLE);
viewHolder.itemRL10.setTag(itemEntity);
viewHolder.itemRL10.setOnClickListener(this);
break;
default:
break;
}
}
} /**
* 隐藏各item
* @param viewHolder
*/
private void clearViewContent(ViewHolder viewHolder) {
viewHolder.itemRL1.setVisibility(View.GONE);
viewHolder.itemRL2.setVisibility(View.GONE);
viewHolder.itemRL3.setVisibility(View.GONE);
viewHolder.itemRL4.setVisibility(View.GONE);
viewHolder.itemRL5.setVisibility(View.GONE);
viewHolder.itemRL6.setVisibility(View.GONE);
viewHolder.itemRL7.setVisibility(View.GONE);
viewHolder.itemRL8.setVisibility(View.GONE);
viewHolder.itemRL9.setVisibility(View.GONE);
viewHolder.itemRL10.setVisibility(View.GONE);
} @Override
public void onClick(View arg0) {
//点击到对应item
ItemEntity itemEntity = (ItemEntity) arg0.getTag();
Toast.makeText(mContext, itemEntity.name, Toast.LENGTH_SHORT).show();
} /**
* viewHolder
*/
static class ViewHolder {
public ImageView bgIV1, bgIV2, bgIV3, bgIV4, bgIV5, bgIV6, bgIV7,
bgIV8, bgIV9, bgIV10;
public TextView titleTV1, titleTV2, titleTV3, titleTV4, titleTV5,
titleTV6, titleTV7, titleTV8, titleTV9, titleTV10;
public RelativeLayout itemRL1, itemRL2, itemRL3, itemRL4, itemRL5,
itemRL6, itemRL7, itemRL8, itemRL9, itemRL10; public ViewHolder(View itemView) {
bgIV1 = (ImageView) itemView
.findViewById(R.id.fragment_music_singer_item_image_iv_one);
titleTV1 = (TextView) itemView
.findViewById(R.id.fragment_music_singer_item_name_tv_one);
bgIV2 = (ImageView) itemView
.findViewById(R.id.fragment_music_singer_item_image_iv_two);
titleTV2 = (TextView) itemView
.findViewById(R.id.fragment_music_singer_item_name_tv_two);
bgIV3 = (ImageView) itemView
.findViewById(R.id.fragment_music_singer_item_image_iv_three);
titleTV3 = (TextView) itemView
.findViewById(R.id.fragment_music_singer_item_name_tv_three);
bgIV4 = (ImageView) itemView
.findViewById(R.id.fragment_music_singer_item_image_iv_four);
titleTV4 = (TextView) itemView
.findViewById(R.id.fragment_music_singer_item_name_tv_four);
bgIV5 = (ImageView) itemView
.findViewById(R.id.fragment_music_singer_item_image_iv_five);
titleTV5 = (TextView) itemView
.findViewById(R.id.fragment_music_singer_item_name_tv_five);
bgIV6 = (ImageView) itemView
.findViewById(R.id.fragment_music_singer_item_image_iv_six);
titleTV6 = (TextView) itemView
.findViewById(R.id.fragment_music_singer_item_name_tv_six);
bgIV7 = (ImageView) itemView
.findViewById(R.id.fragment_music_singer_item_image_iv_seven);
titleTV7 = (TextView) itemView
.findViewById(R.id.fragment_music_singer_item_name_tv_seven);
bgIV8 = (ImageView) itemView
.findViewById(R.id.fragment_music_singer_item_image_iv_eight);
titleTV8 = (TextView) itemView
.findViewById(R.id.fragment_music_singer_item_name_tv_eight);
bgIV9 = (ImageView) itemView
.findViewById(R.id.fragment_music_singer_item_image_iv_nine);
titleTV9 = (TextView) itemView
.findViewById(R.id.fragment_music_singer_item_name_tv_nine);
bgIV10 = (ImageView) itemView
.findViewById(R.id.fragment_music_singer_item_image_iv_ten);
titleTV10 = (TextView) itemView
.findViewById(R.id.fragment_music_singer_item_name_tv_ten);
itemRL1 = (RelativeLayout) itemView
.findViewById(R.id.fragment_music_singer_item_one);
itemRL2 = (RelativeLayout) itemView
.findViewById(R.id.fragment_music_singer_item_two);
itemRL3 = (RelativeLayout) itemView
.findViewById(R.id.fragment_music_singer_item_three);
itemRL4 = (RelativeLayout) itemView
.findViewById(R.id.fragment_music_singer_item_four);
itemRL5 = (RelativeLayout) itemView
.findViewById(R.id.fragment_music_singer_item_five);
itemRL6 = (RelativeLayout) itemView
.findViewById(R.id.fragment_music_singer_item_six);
itemRL7 = (RelativeLayout) itemView
.findViewById(R.id.fragment_music_singer_item_seven);
itemRL8 = (RelativeLayout) itemView
.findViewById(R.id.fragment_music_singer_item_eight);
itemRL9 = (RelativeLayout) itemView
.findViewById(R.id.fragment_music_singer_item_nine);
itemRL10 = (RelativeLayout) itemView
.findViewById(R.id.fragment_music_singer_item_ten);
}
} }
2：ViewPager使用：
/**
* @author Homgwu
*/
public class MainActivity extends Activity { private ViewPager mViewPager;
private MainViewPagerAdapter mViewPagerAdapter;
private List<ItemEntity> mItemEntityList=new ArrayList<ItemEntity>(); @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
} private void initView(){
mViewPager= (ViewPager) findViewById(R.id.main_vp);
initData();
mViewPagerAdapter=new MainViewPagerAdapter(mItemEntityList,this);
//设置翻页动画
mViewPager.setPageTransformer(true,new DepthPageTransformer());
mViewPager.setAdapter(mViewPagerAdapter);
} /**
* 初始化数据
*/
private void initData(){
for (int i=0;i<104;i++){
ItemEntity itemEntity=new ItemEntity();
itemEntity.name="Android"+i;
mItemEntityList.add(itemEntity);
}
} }
3：动画代码：
public class DepthPageTransformer implements PageTransformer {
private static float MIN_SCALE = 0.5f;
/**
* position参数指明给定页面相对于屏幕中心的位置。它是一个动态属性，会随着页面的滚动而改变。当一个页面填充整个屏幕是，它的值是0，
* 当一个页面刚刚离开屏幕的右边时
* ，它的值是1。当两个也页面分别滚动到一半时，其中一个页面的位置是-0.5，另一个页面的位置是0.5。基于屏幕上页面的位置
* ，通过使用诸如setAlpha()、setTranslationX()、或setScaleY()方法来设置页面的属性，来创建自定义的滑动动画。
*/
@Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
view.setTranslationX(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when
// moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE + (1 - MIN_SCALE)
* (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
view.setScaleX(1);
view.setScaleY(1);
}
}
}
完整Sample可以到如下地址下载：
1：http://download.csdn.net/detail/homg92/8584445
2：https://github.com/fightmancn/horizontalfliplist
3：http://git.oschina.net/t1600/HorizontalFlipList
Android水平(横向)翻页列表,类似水平GridVIew的更多相关文章
- jQuery支持mobile的全屏水平横向翻页效果
这是一款支持移动手机mobile设备的jQuery全屏水平横向翻页效果插件. 该翻页插件能够使页面在水平方向上左右全屏翻动,它支持手机触摸屏,支持使用鼠标滚动页面. 整个页面过渡平滑,效果很不错. 在 ...
- Android 实现书籍翻页效果----升级篇
自从之前发布了<Android 实现书籍翻页效果----完结篇 >之后,收到了很多朋友给我留言,前段时间由于事情较多,博客写得太匆忙很多细节地方没有描述清楚.所以不少人对其中的地方有不少不 ...
- 【转】android 欢迎界面翻页成效，仿微信第一次登陆介绍翻页界面
android 欢迎界面翻页效果,仿微信第一次登陆介绍翻页界面 本实例做的相对比较简单主要是对翻页控件的使用,有时候想要做一些功能是主要是先了解下是否有现成的控件可以使用,做起来比较简单不用费太大的劲 ...
- android viewpager 图片翻页例子
使用ViewPager这个类可以轻松实现多个页面的滑动功能 viewpager默认在工具界面上是找不到的,需求添加android-support-v4.jar包: 如果没有找到,需要打开Android ...
- Android 实现书籍翻页效果----完结篇
By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前由于种种琐事,暂停了这个翻页效果的实现,终于在这周末完成了大部分功能,但是这里只是给出了一个基本的雏形,没有添 ...
- 第2课 android机器人的翻页相册
一.准备:准备像素大小相同的图片若干张.(本例中的图片,统一像素大小为310*310,请保存至本机电脑并按顺序命名为1.jpg至6.jpg) 二.启动与登陆: 启动谷歌浏览器,并在地址栏里输入loca ...
- Android中如何实现多行、水平滚动的分页的Gridview？
功能要求: (1)比如每页显示2X2,总共2XN,每个item显示图片+文字(点击有链接). 如果单行水平滚动,可以用Horizontalscrollview实现. 如果是多行水平滚动,则结合Grid ...
- iOS：横向使用iPhone默认的翻页效果
大致思路使用两层辅助UIView的旋转来实现添加后的View的横向翻页效果 CATransform3D transformA = CATransform3DRotate(CATransform3DId ...
- swift：简单使用翻页控制器UIPageViewController
一.小叙 UIPageViewController是一个实现图书阅读的控制器,使用它可以设置书脊位置.单双页.过渡效果等,它是通过代理的方式来实现翻页,也即上一页.下一页.最终这个UIPageView ...
随机推荐
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CF Spreadsheets (数学)
Spreadsheets time limit per test 10 seconds memory limit per test 64 megabytes input standard input ...
- win10 IIS10 HTTP 错误 404.2 - Not Found
环境win10系统IIS10里边发布web应用程序的时候,出现 HTTP 错误 404.2 - Not Found 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页 ...
- 解决TestNG报java.net.SocketException
在运行TestNG时一直给我提示报“java.net.ScketException”问题, 网上查了下这个问题是要有网络写入的一些操作才会导致,我的程序也没有网络写入,因为我是使用的selenium+ ...
- 关于VIM统计命令
都是冒号命令哈::%s/./&/gn 统计字符数:%s/\i\+/&/gn 统计单词数:%s/^//n 统计行数:%s/keyword/& ...
- C# 按指定数量从前面或者后面删除字符串
为了方便处理一些数据,自己写一个小程序来辅助工作,提高点效率. 不够删除怎么办呢!?一般程序员都会马上想到的是,用if判断…….这里其实不用if语句也可以轻松实现的! 有些程序员还可能用 try c ...
- Lombok 安装
Lombok 是一种 Java™ 实用工具,可用来帮助开发人员消除 Java 的冗长,尤其是对于简单的 Java 对象(POJO).它通过注释实现这一目的.通过在开发环境中实现 Lombok ,开发人 ...
- hive,spark的远程调试设置
spark的远程调试 spark-env.sh文件里面,加上下面配置即可: if [ "$DEBUG_MODE" = "true" ]; then export ...
- AppScan安全问题解决方案
一. 环境准备 测试通常给的是PDF文档,动辄几百页,看起来很费劲,看文档的时间可能比解决问题的时间还长...所以作为需要解决问题的我们来说,最好安装AppScan,请测试人员提供类型为AppScan ...
- HDOJ2029Palindromes _easy version
Palindromes _easy version Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Jav ...