Android UI--ViewPager扩展Tab标签指示

2013年8月30日出来冒冒泡

ViewPager这个控件已经不算是陌生的了,各种玩Android的小伙伴们都有发表相应的文章来讲它。我看过一些文章,感觉其他网站博客贴的代码很不好看,文章排版也不好。小巫还是喜欢自己写写,弄些好看的效果图,把代码贴好一点,别人参考起来也会舒服很多。我之前也有在其他网站发表过文章,比如51CTO、博客园等,我还是最喜欢CSDN,虽然有时候也会麻烦一点,但相对而言,在CSDN发表博客一定是个好去处。

先上几张效果图:

以上就是我实现Demo的效果啦

布局代码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" > <LinearLayout
android:id="@+id/ll_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" > <TextView
android:id="@+id/tv_guid1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="特性1"
android:textSize="18sp"/> <TextView
android:id="@+id/tv_guid2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="特性2"
android:textSize="18sp"/> <TextView
android:id="@+id/tv_guid3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="特性3 "
android:textSize="18sp"/> <TextView
android:id="@+id/tv_guid4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="特性4"
android:textSize="18sp"/>
</LinearLayout> <ImageView
android:id="@+id/cursor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ll_viewpager"
android:scaleType="matrix"
android:src="@drawable/cursor" /> <android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/cursor"
android:flipInterval="30"
android:persistentDrawingCache="animation" /> </RelativeLayout>

每一个标签页的布局

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/guide_1" >
</RelativeLayout>

其他都一样,不多贴

布局搞定之后,定义一个适配器如下:

package com.wwj.viewpager;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup; /**
* ViewPager适配器
*
* @author wwj
*
*/
public class ViewPagerAdapter extends PagerAdapter {
// 界面列表
private List<View> views; public ViewPagerAdapter(List<View> views) {
this.views = views;
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
} @Override
public int getCount() {
if (views != null) {
return views.size();
}
return 0;
} @Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(views.get(position)); // 把被点击的图片放入缓存中
return views.get(position); // 返回被点击图片对象
} @Override
public boolean isViewFromObject(View arg0, Object arg1) {
return (arg0 == arg1);
}
}

适配器搞定之后,直接去Activity

package com.wwj.viewpager;

import java.util.ArrayList;
import java.util.List; import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast; public class MainActivity extends Activity {
ViewPager viewPager;
ViewPagerAdapter pagerAdapter;
View view1, view2, view3, view4; // 页面
List<View> views; // Tab页面列表 ImageView img_cursor; // 指示图片
TextView tv_guid1, tv_guid2, tv_guid3, tv_guid4; // 页卡头标
int offset = 0; // 偏移量
int currIndex = 0; // 当前页卡编号
int bmpW; // 图片宽度 @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); initImageView();
initTextView(); view1 = (View) findViewById(R.layout.viewpager1);
view2 = (View) findViewById(R.layout.viewpager2);
view3 = (View) findViewById(R.layout.viewpager3);
view4 = (View) findViewById(R.layout.viewpager4); LayoutInflater inflater = LayoutInflater.from(this);
view1 = inflater.inflate(R.layout.viewpager1, null);
view2 = inflater.inflate(R.layout.viewpager2, null);
view3 = inflater.inflate(R.layout.viewpager3, null);
view4 = inflater.inflate(R.layout.viewpager4, null); views = new ArrayList<View>();
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4); pagerAdapter = new ViewPagerAdapter(views);
viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(pagerAdapter); viewPager.setCurrentItem(0);
viewPager.setOnPageChangeListener(new MyOnPageChangeListener()); }
/**
* 初始化动画图片
*
*/
private void initImageView() {
img_cursor = (ImageView) findViewById(R.id.cursor);
bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.cursor)
.getWidth(); DisplayMetrics dm = new DisplayMetrics();
this.getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels; // 获取手机屏幕宽度分辨率 offset = (screenW / 4 - bmpW) / 2; // 获取图片偏移量 // imageview设置平移,使下划线平移到初始位置(平移一个offset)
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
img_cursor.setImageMatrix(matrix); } /**
*
* 初始化TextView控件,和注册监听器
*/
private void initTextView() {
tv_guid1 = (TextView) findViewById(R.id.tv_guid1);
tv_guid2 = (TextView) findViewById(R.id.tv_guid2);
tv_guid3 = (TextView) findViewById(R.id.tv_guid3);
tv_guid4 = (TextView) findViewById(R.id.tv_guid4); tv_guid1.setOnClickListener(listener);
tv_guid2.setOnClickListener(listener);
tv_guid3.setOnClickListener(listener);
tv_guid4.setOnClickListener(listener); } OnClickListener listener = new OnClickListener() { @Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tv_guid1:
viewPager.setCurrentItem(0);
break;
case R.id.tv_guid2:
viewPager.setCurrentItem(1);
break;
case R.id.tv_guid3:
viewPager.setCurrentItem(2);
break;
case R.id.tv_guid4:
viewPager.setCurrentItem(3);
break; default:
break;
}
}
}; // 当页面滑动时,开始动画并跳出Toast
public class MyOnPageChangeListener implements OnPageChangeListener { private int one = offset * 2 + bmpW; // 页面1到页面2的偏移量 @Override
public void onPageScrollStateChanged(int arg0) { } @Override
public void onPageScrolled(int arg0, float arg1, int arg2) { } // 即将要被显示的页卡的index
@Override
public void onPageSelected(int arg0) {
// 初始化移动的动画(从当前位置,x平移到即将要到的位置)
Animation animation = new TranslateAnimation(currIndex * one, arg0
* one, 0, 0); currIndex = arg0;
animation.setFillAfter(true); // 动画终止时停留在最后一帧,不然会回到没有执行前的状态
animation.setDuration(200); // 动画持续时间,0.2秒
img_cursor.startAnimation(animation); // 是用imageview来显示动画
int i = currIndex + 1;
Toast.makeText(MainActivity.this, "您选择了第" + i + "个页卡",
Toast.LENGTH_SHORT).show();
} } }

代码并不复杂,这里主要要考虑的是每个标签下面的下划线怎么移动,移动的偏移量怎么计算,怎么设置动画,设置什么动画。这里当然要用平移动画。

Android UI--ViewPager扩展Tab标签指示的更多相关文章

  1. Android:ViewPager扩展的具体解释——导航ViewPagerIndicator(有图片缓存,异步加载图片)

    我们已经用viewpager该. github那里viewpager扩展,导航风格更丰富.这个开源项目ViewPagerIndicator.非常好用,但样品是比较简单,实际用起来是非常不延长.例如,在 ...

  2. jquery ui 怎么实现tab标签切换效果

    1.效果图 2.HTML 代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  3. 类似掌盟的Tab页 Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签 (转)

    原博客地址  :http://blog.csdn.net/xiaanming/article/details/10766053 本文转载,记录学习用,如有需要,请到原作者网站查看(上面这个网址) 之前 ...

  4. Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签

    转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10766053 之前用JakeWharton的开源框架ActionBarSherlock ...

  5. Android UI开发第三十九篇——Tab界面实现汇总及比较

    Tab布局是iOS的经典布局,Android应用中也有大量应用,前面也写过Android中TAb的实现,<Android UI开发第十八篇——ActivityGroup实现tab功能>.这 ...

  6. Android(java)学习笔记129:Tab标签的使用

    1.案例1---TabProject (1)首先是main.xml文件: <?xml version="1.0" encoding="utf-8"?> ...

  7. Android(java)学习笔记71:Tab标签的使用

    1. 案例1---TabProject (1)首先是main.xml文件: <?xml version="1.0" encoding="utf-8"?&g ...

  8. Android开源框架ViewPageIndicator和ViewPager实现Tab导航

    前言: 关于使用ViewPageIndicator和ViewPager实现Tab导航,在开发社区里已经有一堆的博客对其进行了介绍,假设我还在这里写怎样去实现.那简直就是老生常谈,毫无新奇感,并且.我也 ...

  9. Android UI 之 Tab类型界面总结

    Android 程序中实现Tab类型界面很常见,本人在做项目的时候也经常用到,所以想在这里总结一下,实现tab类型界面的几种方式,供大家参考.如有不对之处,欢迎大家指正! 一.TabActivity ...

随机推荐

  1. PHP 定时器 边输出边刷新网页

    使用定时器的时候当然想网页能够看到输出,不希望网页直接卡住,定时器结束输出一片. 要做到定时器不卡住输出,只需要两个函数就行了,看下面代码 <?php //定时器测试代码 demo //跟踪定时 ...

  2. Java学习之Java中常用对象

    java的几种对象(PO,VO,DAO,BO,POJO)解释     一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中 ...

  3. wdcp升级php和mysql

    安装没什么好说的,按照wdcp官方去搞就行了,这里如果是centos系统建议使用rpm安装方式附件如下(这里包含了本文后面用到的三个文件) http://download.csdn.net/detai ...

  4. Log4Net Config Appender

    整理了下以前项目中使用的Log4Net的Appender. 1:只记录在一个文件下的 <appender name="RollingFileAppenderFileSize" ...

  5. Android Material Design调色板

    转: http://www.stormzhang.com/design/2014/12/26/material-design-palette/ Material Design出来一段时间了,身为And ...

  6. PHP基于变量的引用实现的树状结构

    直接上代码: function aryTree($ary, $tagId = 'id', $tagPid = 'pid', $tagSub = '_sub') { if(is_array($ary)) ...

  7. javascript每日一练—运动

    1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  8. Zend Studio 12 大集合

    前言 本文记录了我个人使用Zend Studio 12的点点滴滴,不定时更新. 内容来源于网络,如有侵权,告知后可删除. 下载 官方链接点击链接,填入相关信息即可下载. 破解 声明:请购买正版,非万不 ...

  9. PhotoShop-CS4使用-----如何对psd进行简单切图

    一.如何快速截图 1.如果图片为psd样式   2.要用放大器放大该图,选择放大器,放大后如图 3.开始切图  以其中一个为例,选中你所要选择切的图片 4. 选中后 5.选择文件---新建   6.此 ...

  10. Nand ECC校验和纠错原理及2.6.27内核ECC代码分析

    ECC的全称是Error Checking and Correction,是一种用于Nand的差错检测和修正算法.如果操作时序和电路稳定性不存在问题的话,NAND Flash出错的时候一般不会造成整个 ...