ViewPager实现滑屏切换页面及动画效果(仿优酷客户端)
找了许多实现该功能的例子,但效果都不很理想,于是自己结合网上的资源及自己的总结,整理了一下,发出来,供大家参考。这个是自己做的,仿优酷客户端的。
先看效果:
****************************************************************************
1.创建项目
2.设置界面layout
主界面:activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:umadsdk="http://schemas.android.com/apk/res/com.LoveBus" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ImageView android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/title" /> <RelativeLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="40dip" android:background="#FFFFFF" android:orientation="vertical" > <LinearLayout android:id="@+id/tabText" android:layout_marginTop="10dp" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/text1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="个人中心" android:textColor="#000000" android:textSize="14sp" /> <TextView android:id="@+id/text2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="优酷首页" android:textColor="#000000" android:textSize="14sp" /> <TextView android:id="@+id/text3" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="频道列表" android:textColor="#000000" android:textSize="14sp" /> </LinearLayout> <ImageView android:id="@+id/cursor" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="matrix" android:layout_alignParentBottom="true" android:src="@drawable/slide" /> </RelativeLayout> <android.support.v4.view.ViewPager android:id="@+id/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>
3.设置各标签所对应的界面
频道列表:channel_layout.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/lay3" /> </LinearLayout>
优酷首页:home_layout.xml
个人中心:personal_layout.xml
这两个页面跟频道列表一样,换张图片即可
3.界面做好之后,就是主程序了
MainActivity.java
package com.example.viewpaper1; import java.util.ArrayList; import java.util.List; import android.os.Bundle; import android.os.Parcelable; import android.app.Activity; import android.app.AlertDialog; import android.graphics.BitmapFactory; import android.graphics.Matrix; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.LayoutInflater; import android.view.Menu; import android.view.View; import android.view.Window; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView; public class MainActivity extends Activity { private ViewPager mPager;//页面内容 private List<View> listViews; // Tab页面列表 private TextView t1, t2, t3;// 页卡头标 private int screenW ; private int currIndex = 1;// 当前页卡编号 private int ivCursorWidth;// 动画图片宽度 private int tabWidth;// 每个tab头的宽度 private int fromX;// 滑块儿的初始位置(距屏幕边缘的距离) private ImageView slideImage;//下划线图片 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);// 设置无标题模式 setContentView(R.layout.activity_main); InitTextView(); InitViewPager(); InitImageView(); } /** * 初始化头标 */ private void InitTextView() { t1 = (TextView) findViewById(R.id.text1); t2 = (TextView) findViewById(R.id.text2); t3 = (TextView) findViewById(R.id.text3); t1.setOnClickListener(new MyOnClickListener(0)); t2.setOnClickListener(new MyOnClickListener(1)); t3.setOnClickListener(new MyOnClickListener(2)); } /** * 头标点击监听 */ 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); } }; /** * 初始化ViewPager */ private void InitViewPager() { mPager = (ViewPager) findViewById(R.id.vPager); listViews = new ArrayList<View>(); LayoutInflater mInflater = getLayoutInflater(); View v = (View)mInflater.inflate(R.layout.personal_layout, null); // Button btn=(Button)v.findViewById(R.id.btn); // btn.setOnClickListener(new OnClickListener() { // @Override // public void onClick(View arg0) { // showDialog("提示", "btn"); // } // }); listViews.add(v); listViews.add(mInflater.inflate(R.layout.home_layout, null)); listViews.add(mInflater.inflate(R.layout.channel_layout, null)); mPager.setAdapter(new MyPagerAdapter(listViews)); //设置进入系统后默认显示的页面 mPager.setCurrentItem(1); mPager.setOnPageChangeListener(new MyOnPageChangeListener()); } /** * 适配器 * @author baiyuliang */ class MyPagerAdapter extends PagerAdapter { public List<View> mListViews; public MyPagerAdapter(List<View> mListViews) { this.mListViews = mListViews; } @Override public void destroyItem(View arg0, int arg1, Object arg2) { ((ViewPager) arg0).removeView(mListViews.get(arg1)); } @Override public void finishUpdate(View arg0) { } @Override public int getCount() { return mListViews.size(); } @Override public Object instantiateItem(View arg0, int arg1) { ((ViewPager) arg0).addView(mListViews.get(arg1), 0); return mListViews.get(arg1); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == (arg1); } @Override public void restoreState(Parcelable arg0, ClassLoader arg1) { } @Override public Parcelable saveState() { return null; } @Override public void startUpdate(View arg0) { } } /** * 初始化动画 */ private void InitImageView() { //获取滑块儿控件 slideImage=(ImageView) findViewById(R.id.cursor); DisplayMetrics dm = getResources().getDisplayMetrics(); screenW = dm.widthPixels;// 获取分辨率宽度(屏幕宽度) ivCursorWidth = BitmapFactory.decodeResource(getResources(),R.drawable.slide).getWidth();// 获取滑块儿图片宽度 //每个tab宽度为屏幕宽度/tab数量 tabWidth = screenW / listViews.size(); //如果滑块儿图片宽度超过每个tab的宽度时,将滑块儿宽度设置为与tab宽度相同 if (ivCursorWidth >= tabWidth) { slideImage.getLayoutParams().width = tabWidth; ivCursorWidth = tabWidth; fromX=0; }else{ fromX = (tabWidth - ivCursorWidth) / 2; } // 设置动画初始位置 Matrix matrix = new Matrix(); matrix.postTranslate( fromX+tabWidth, 0); slideImage.setImageMatrix(matrix); } /** * 页面切换监听 */ public class MyOnPageChangeListener implements OnPageChangeListener { @Override public void onPageSelected(int arg0) { //设置页面切换时动画偏移量 Animation animation = new TranslateAnimation(tabWidth * currIndex-tabWidth, tabWidth * arg0-tabWidth, 0, 0); currIndex = arg0; animation.setFillAfter(true);//图片停在动画结束位置 animation.setDuration(0);//设置动画移动毫秒数 slideImage.startAnimation(animation); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } } private void showDialog(String title,String msg){ AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setIcon(android.R.drawable.ic_dialog_info); builder.setTitle(title); builder.setMessage(msg); builder.setPositiveButton("确定", null); builder.create().show(); } }
其中的图片大家可以自行下载,实现效果就行,还有看到很多同学再问如何给viewpaper中的每个view设置监听,在这里告诉大家一下,设置监听需要在listViews.add()之前获得控件并监听,之后再添加,否则不起作用,如本程序中隐去的btn监听。
ViewPager实现滑屏切换页面及动画效果(仿优酷客户端)的更多相关文章
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 基于Ascensor.js全屏切换页面插件
今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- jQuery演示10种不同的切换图片列表动画效果
经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...
- jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- js写的数码时钟,在“最小化”浏览器 或者 “切换网页”是动画效果好像不对
一.问题 在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ???? 二.HTML代码如下 <div id=& ...
- 高仿优酷Android客户端图片左右滑动(自动切换)
本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现: 具体思路: 1. 工程中需要添加android-support-v4.jar,才能 ...
- JS实现回到页面顶部动画效果 2016.03.23
最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...
- 使用animate()完成修改图片src切换图片的动画效果
如下所示,在动画效果中的回调函数中进行src的修改和动画的切换 $(".TopImg").animate( {opacity:'toggle'}, "slow" ...
- 给Activity切换过程添加动画效果
首先,在资源文件中定义一些动画效果 例如: <scale android:duration="@android:integer/config_mediumAnimTime" ...
随机推荐
- [LeetCode] Detect Capital 检测大写格式
Given a word, you need to judge whether the usage of capitals in it is right or not. We define the u ...
- shell编程-项目部署(优化篇)
在实际工作中小编遇到了一个问题那就是当我去操作部署脚本的时候,另一个人也可以操作,这怎么能行啊,后来小编就觉得重新优化下代码,给它加一个进程锁 老规矩,先梳理下思路: 同一时间内,脚本只能够允许一个人 ...
- day 1——ST表练习
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 43893 Accepted: 20585 ...
- 获取Avrix上Computer Vision and Pattern Recognition的论文,进一步进行统计分析。
此文主要记录我在18年寒假期间,收集Avrix论文的总结 寒假生活题外 在寒假期间,爸妈每天让我每天跟着他们6点起床,一起吃早点收拾,每天7点也就都收拾差不多. 早晨的时光是人最清醒的时刻,而 ...
- [Luogu 3807]【模板】卢卡斯定理
Description 给定n,m,p(1≤n,m,p≤10^5) 求 C_{n+m}^{m} \mod p 保证P为prime C表示组合数. 一个测试点内包含多组数据. Input 第一行一 ...
- Evensgn 捡树枝
问题 A: Evensgn 剪树枝 时间限制: 1 Sec 内存限制: 128 MB 题目描述 繁华中学有一棵苹果树.苹果树有 n 个节点(也就是苹果),n − 1 条边(也就 是树枝).调皮的 E ...
- hdu 5893 (树链剖分+合并)
List wants to travel Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/O ...
- NOIP2014-5-10模拟赛
Problem 1 机器人(robot.cpp/c/pas) [题目描述] 早苗入手了最新的Gundam模型.最新款自然有着与以往不同的功能,那就是它能够自动行走,厉害吧. 早苗的新模型可以按照输入的 ...
- POJ 3276 Face The Right Way
Description Farmer John has arranged his N (1 ≤ N ≤ 5,000) cows in a row and many of them are facing ...
- 【Peaks加强版 BZOJ 3551】你被坑了吗?
这道在没加读入优化时间在20s左右的题终于在大米饼两天的死缠烂打.鬼混.乱整乱撞后艰难地AC了.但惋惜的是,大米饼一号代码其实更加简洁,但至今找不出BUG,我将它放在下面,也许有一天从远方来的另一个大 ...