【Android UI】案例03滑动切换效果的实现(ViewPager)
2015-12-19 13:14
871 查看
本例使用ViewPager实现滑动切换的效果。本例涉及的ViewPager。为android.support.v4.view.ViewPager。所以须要在android项目中导入android-support-v4.jar。
本例中ViewPager是实现滑动效果的核心部分。对其设置PageChangeListener监听事件,是实现滑动效果的核心思路。
【转载使用,请注明出处:http://blog.csdn.net/mahoking】
首先是主界面layout.xml文件。activity_03_viewpager.xml。
主界面的布局是顶部为页面标签,点击标签或滑动页面都能够实现切换页面的功能。
以上须要一个ImageView组件,该组件实现一种动态移动标签的效果,读者能够自行选择喜欢的标签下的底部长方形图片。可參考效果截图。
主Activity(ViewPagerActivity)的编写。
首先是全局变量的定义:
本例提供了三个初始化布局空间的方法,分别为:initTextViews()、initImageView()、initViewPager()。
initTextViews()
initImageView()
initViewPager()
有上述方法可见,本例须要两内部类MyOnClickListener、MyOnPageChangeListener,去处理监听事件。
MyOnClickListener
MyOnPageChangeListener
在此补充一下。本例须要展示三个页卡,所以还须要三个页卡内容的界面设计。在这里我们仅仅设置了背景颜色,仅仅为起到差别作用。
layout_03_layout01.xml
效果截图:
[align=left] [/align]
【转载使用。请注明出处:http://blog.csdn.net/mahoking】
本例中ViewPager是实现滑动效果的核心部分。对其设置PageChangeListener监听事件,是实现滑动效果的核心思路。
【转载使用,请注明出处:http://blog.csdn.net/mahoking】
首先是主界面layout.xml文件。activity_03_viewpager.xml。
主界面的布局是顶部为页面标签,点击标签或滑动页面都能够实现切换页面的功能。
<?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" > <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:orientation="horizontal"> <TextView android:layout_height="match_parent" android:layout_width="match_parent" android:layout_weight="1" android:gravity="center" android:text="选项卡01" android:id="@+id/activity_03_viewpager_textview_01"/> <TextView android:layout_height="match_parent" android:layout_width="match_parent" android:layout_weight="1" android:text="选项卡02" android:gravity="center" android:id="@+id/activity_03_viewpager_textview_02"/> <TextView android:layout_height="match_parent" android:layout_width="match_parent" android:layout_weight="1" android:gravity="center" android:text="选项卡03" android:id="@+id/activity_03_viewpager_textview_03"/> </LinearLayout> <ImageView android:id="@+id/cursor" android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="matrix" android:src="@drawable/example03_cursor" /> <android.support.v4.view.ViewPager android:id="@+id/activity_03_viewpager_vPager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1.0" android:background="#000000" android:flipInterval="30" android:persistentDrawingCache="animation" /> </LinearLayout>
以上须要一个ImageView组件,该组件实现一种动态移动标签的效果,读者能够自行选择喜欢的标签下的底部长方形图片。可參考效果截图。
主Activity(ViewPagerActivity)的编写。
首先是全局变量的定义:
private ViewPager mPager;// 页卡内容 private List<View> listViews; // Tab页面列表 private ImageView cursor;// 动绘图片 private TextView t1, t2, t3;// 页卡头标 private int offset = 0;// 动绘图片偏移量 private int currIndex = 0;// 当前页卡编号 private int bmpW;// 动绘图片宽度
本例提供了三个初始化布局空间的方法,分别为:initTextViews()、initImageView()、initViewPager()。
initTextViews()
private void initTextViews() { t1 = (TextView) findViewById(R.id.activity_03_viewpager_textview_01); t2 = (TextView) findViewById(R.id.activity_03_viewpager_textview_02); t3 = (TextView) findViewById(R.id.activity_03_viewpager_textview_03); t1.setOnClickListener(new MyOnClickListener(0)); t2.setOnClickListener(new MyOnClickListener(1)); t3.setOnClickListener(new MyOnClickListener(2)); }
initImageView()
private void initViewPager() { mPager = (ViewPager) findViewById(R.id.activity_03_viewpager_vPager); listViews = new ArrayList<View>(); LayoutInflater mInflater = getLayoutInflater(); listViews.add(mInflater.inflate(R.layout.layout_03_layout01, null)); listViews.add(mInflater.inflate(R.layout.layout_03_layout02, null)); listViews.add(mInflater.inflate(R.layout.layout_03_layout03, null)); mPager.setAdapter(new ViewPagerAdapter(listViews)); mPager.setCurrentItem(0); mPager.setOnPageChangeListener(new MyOnPageChangeListener()); }
initViewPager()
/** * 初始化动画 */ private void initImageView() { cursor = (ImageView) findViewById(R.id.cursor); bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.example03_cursor) .getWidth();// 获取图片宽度 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); int screenW = dm.widthPixels;// 获取分辨率宽度 offset = (screenW / 3 - bmpW) / 2;// 计算偏移量 Matrix matrix = new Matrix(); matrix.postTranslate(offset, 0); cursor.setImageMatrix(matrix);// 设置动画初始位置 }
有上述方法可见,本例须要两内部类MyOnClickListener、MyOnPageChangeListener,去处理监听事件。
MyOnClickListener
/** * 点击监听事件 * */ public class MyOnClickListener implements View.OnClickListener { private int index = 0; public MyOnClickListener(int i) { index = i; } @Override public void onClick(View v) { mPager.setCurrentItem(index); } };
MyOnPageChangeListener
/** * *页卡切换监听 */ public class MyOnPageChangeListener implements OnPageChangeListener{ int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量 int two = one * 2;// 页卡1 -> 页卡3 偏移量 @Override public void onPageSelected(int arg0) { Animation animation = null; switch (arg0) { case 0: if (currIndex == 1) { animation = new TranslateAnimation(one, 0, 0, 0); } else if (currIndex == 2) { animation = new TranslateAnimation(two, 0, 0, 0); } break; case 1: if (currIndex == 0) { animation = new TranslateAnimation(offset, one, 0, 0); } else if (currIndex == 2) { animation = new TranslateAnimation(two, one, 0, 0); } break; case 2: if (currIndex == 0) { animation = new TranslateAnimation(offset, two, 0, 0); } else if (currIndex == 1) { animation = new TranslateAnimation(one, two, 0, 0); } break; } currIndex = arg0; animation.setFillAfter(true);// True:图片停在动画结束位置 animation.setDuration(300); cursor.startAnimation(animation); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }
在此补充一下。本例须要展示三个页卡,所以还须要三个页卡内容的界面设计。在这里我们仅仅设置了背景颜色,仅仅为起到差别作用。
layout_03_layout01.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#FF6666"> </LinearLayout>
效果截图:
[align=left] [/align]
【转载使用。请注明出处:http://blog.csdn.net/mahoking】
相关文章推荐
- GeoQuiz的个人见解(《Android编程权威指南》中的DEMO应用)
- iOS---UISwitch控件
- POJ2778 DNA sequence
- Lipshitz Sequence Codeforces Round #333 (Div. 1) B(单调栈)
- iOS UILabel 设置行间距
- Arduino - 28BYJ-48步进电机+ULN2003驱动模块
- 小米手机如何刷开发版MIUI 小米4/小米Note稳定版升级开发版方法
- 打印 上一主题 下一主题 简单讲解UEFI及MBR,及UEFI系统安装引导修复
- UIDatePicker 时间滚动表
- SQLServer跨服务器访问数据库(openrowset/opendatasource/openquery)
- juery实现粘贴复制
- [IOS]轻松理解UITableViewCell的重用机制
- 308. Range Sum Query 2D - Mutable
- Android:Handler+Looper+MessageQueue+Thread(线程间的通信)随记
- 【Java学习笔记】String、StringBuffer和StringBuilder
- mysql update中使用subquery
- 【POJ 3709】K-Anonymous Sequence
- jenkins 安装 SVN Publisher 后向 svn 提交代码报错: E170001: Authentication required for...
- Query on a tree II
- 2016扁平化图标设计如何做太原UI设计师郭文军讲