仿百度壁纸客户端（五）——实现搜索动画GestureDetector手势识别，动态更新搜索关键字...
本文共 15306 字，大约阅读时间需要 51 分钟。
仿百度壁纸客户端（五）——实现搜索动画GestureDetector手势识别，动态更新搜索关键字
百度壁纸系列
我们重新来看看这个效果
想实现这个逻辑，其实就是监听两个View的显示隐藏加上一点小动画，所以我们在布局上是这样的
search_fragment.xml
这两个布局我们去填充数据，首先我们把要初始化的东西都初始化好
/** * 找控件 * * @param view */ private void findView(View view) { //设置触摸，手势 view.setLongClickable(true); view.setOnTouchListener(new MyOnTouch()); //初始化手势 gest = new GestureDetector(getActivity(), new MyGest()); myLayoutOne = (AbsoluteLayout) view.findViewById(R.id.myLayoutOne); myLayoutTwo = (AbsoluteLayout) view.findViewById(R.id.myLayoutTwo); } 紧接着我们就可以去获取相应的数据了
/** * 初始化 */ private void init() { //获取屏幕的像素，后续随机分布关键字 DisplayMetrics metrics = new DisplayMetrics(); getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics); //获取到屏幕的宽 mWidth = metrics.widthPixels; //初始化数据 initData(); //设置默认数据 setData(myLayoutOne, index); }**重点内容** 获取到数据之后我们就开始初始化这些数据
/** * 初始化数据 */ private void initData() { //两个页面 for (int i = 0; i < 2; i++) { switch (i) { case 0: ArrayList newDataOne = new ArrayList<>(); //15个数据 for (int j = 0; j < 15; j++) { //实际开发中数据还是得从服务器获取 newDataOne.add("海贼王"); } //添加数据 data.add(newDataOne); break; case 1: ArrayList newDataTwo = new ArrayList<>(); //15个数据 for (int j = 0; j < 15; j++) { newDataTwo.add("火影忍者"); } //添加数据 data.add(newDataTwo); break; } } } 这样我们就可以来进行随机分布的计算
/** * 设置默认的数据 * * @param myLayout * @param index */ private void setData(AbsoluteLayout myLayout, int index) { //每次加载之前清除 myLayout.removeAllViews(); //有数据了之后开始随机分布了 int startY = 50; //X动态生成,判断是第几页的数据，左右两边间距50，用户体验 for (int i = 0; i < data.get(index).size(); i++) { int x = get(50, mWidth - 50); int y = startY; //文本显示 TextView tv = new TextView(getActivity()); tv.setTextSize(12); //随机 tv.setText(data.get(index).get(i)); /** * 高，宽，x,y */ AbsoluteLayout.LayoutParams layout = new AbsoluteLayout.LayoutParams(100, 50, x, y); myLayout.addView(tv, layout); //开始随机分布 startY += 50; } } /** * 随机生成一个坐标 * * @param min * @param max * @return */ private int get(int min, int max) { //从最大到最小的随机数值 return new Random().nextInt(max) % (max - min + 1) + min; } 当我们要添加手势的时候，我们就可以把触摸事件传递给手势事件
/** * View的触摸事件 */ private class MyOnTouch implements View.OnTouchListener { @Override public boolean onTouch(View v, MotionEvent event) { //触摸事件传递给手势 return gest.onTouchEvent(event); } } 接着我们来处理滑产生的操作
/** * 手势监听 */ private class MyGest implements GestureDetector.OnGestureListener { //按下 @Override public boolean onDown(MotionEvent e) { return false; } @Override public void onShowPress(MotionEvent e) { } @Override public boolean onSingleTapUp(MotionEvent e) { return false; } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { return false; } @Override public void onLongPress(MotionEvent e) { } //滑动 @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { //左边——右边滑动 if (e1.getX() < e2.getX()) { index++; //越界处理 if (index == data.size()) { index = 0; } //判断显示内容 switch (myLayoutOne.getVisibility()) { //VISIBLE case 0: //动画并且显示，消失 setState(VISIBLE); setState(GONE); break; //INVISIBLE case 4: //GONE case 8: //动画并且显示，消失 setState(VISIBLE1); setState(GONE1); break; } } return false; } } 我们只要去动态的改变他的UI，所以，这里我们写了这样一个方法
/** * 动态改变状态 * * @param i */ private void setState(final int i) { //UI刷新 new Thread(new Runnable() { @Override public void run() { handler.sendEmptyMessage(i); } }).start(); } 当接收到handler的时候
/** * 子线程 */ private Handler handler = new Handler() { @Override public void handleMessage(Message msg) { switch (msg.what) { case VISIBLE: setAnim(myLayoutOne, 1000, 0); myLayoutOne.setVisibility(View.GONE); break; case GONE: setData(myLayoutTwo,index); setAnimTwo(myLayoutTwo, 2000, 0); myLayoutTwo.setVisibility(View.VISIBLE); break; case VISIBLE1: setAnimTwo(myLayoutTwo, 2000, 0); myLayoutTwo.setVisibility(View.VISIBLE); break; case GONE1: setData(myLayoutOne,index); setAnim(myLayoutOne, 1000, 0); myLayoutOne.setVisibility(View.GONE); break; } super.handleMessage(msg); } }; 我们就可以进行动画了，无非就是两个视图动画，他们的坐标刚好相反
* 设置Two动画 * * @param myLayout 控件 * @param time 显示时间 * @param deLayTime 延迟时间 */ private void setAnimTwo(AbsoluteLayout myLayout, int time, int deLayTime) { //缩放动画 ScaleAnimation scale = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f); scale.setDuration(time); scale.setStartOffset(deLayTime); //渐变 AlphaAnimation alp = new AlphaAnimation(0.0f, 1.0f); alp.setDuration(time); alp.setStartOffset(deLayTime); //组合动画 AnimationSet set = new AnimationSet(true); set.addAnimation(scale); set.addAnimation(alp); //开始动画 myLayout.startAnimation(set); } /** * 设置One动画 * * @param myLayout 控件 * @param time 显示时间 * @param deLayTime 延迟时间 */ private void setAnim(AbsoluteLayout myLayout, int time, int deLayTime) { //缩放动画 ScaleAnimation scale = new ScaleAnimation(1.0f, 1.5f, 1.0f, 1.5f, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f); scale.setDuration(time); scale.setStartOffset(deLayTime); //渐变 AlphaAnimation alp = new AlphaAnimation(1.0f, 0.0f); alp.setDuration(time); alp.setStartOffset(deLayTime); //组合动画 AnimationSet set = new AnimationSet(true); set.addAnimation(scale); set.addAnimation(alp); //开始动画 myLayout.startAnimation(set); } 这里贴上完整代码，Demo就不上传了，xml和代码都有，直接放上去就行
SearchFragment
package com.lgl.baiduwallpaper.fragment;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.support.v4.app.Fragment;import android.util.DisplayMetrics;import android.view.GestureDetector;import android.view.LayoutInflater;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;import android.view.animation.AlphaAnimation;import android.view.animation.Animation;import android.view.animation.AnimationSet;import android.view.animation.ScaleAnimation;import android.widget.AbsoluteLayout;import android.widget.TextView;import com.lgl.baiduwallpaper.R;import java.util.ArrayList;import java.util.Random;/** * 搜索 * Created by lgl on 16/3/31. */public class SearchFragment extends Fragment { //显示 private static final int VISIBLE = 1; //隐藏 private static final int GONE = 2; //显示 private static final int VISIBLE1 = 3; //隐藏 private static final int GONE1 = 4; private AbsoluteLayout myLayoutOne, myLayoutTwo; //标记 private int index = 0; //进行数据存储 private ArrayList > data = new ArrayList >(); //屏幕的宽 private int mWidth; //手势 private GestureDetector gest; /** * 子线程 */ private Handler handler = new Handler() { @Override public void handleMessage(Message msg) { switch (msg.what) { case VISIBLE: setAnim(myLayoutOne, 1000, 0); myLayoutOne.setVisibility(View.GONE); break; case GONE: setData(myLayoutTwo,index); setAnimTwo(myLayoutTwo, 2000, 0); myLayoutTwo.setVisibility(View.VISIBLE); break; case VISIBLE1: setAnimTwo(myLayoutTwo, 2000, 0); myLayoutTwo.setVisibility(View.VISIBLE); break; case GONE1: setData(myLayoutOne,index); setAnim(myLayoutOne, 1000, 0); myLayoutOne.setVisibility(View.GONE); break; } super.handleMessage(msg); } }; /** * 设置Two动画 * * @param myLayout 控件 * @param time 显示时间 * @param deLayTime 延迟时间 */ private void setAnimTwo(AbsoluteLayout myLayout, int time, int deLayTime) { //缩放动画 ScaleAnimation scale = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f); scale.setDuration(time); scale.setStartOffset(deLayTime); //渐变 AlphaAnimation alp = new AlphaAnimation(0.0f, 1.0f); alp.setDuration(time); alp.setStartOffset(deLayTime); //组合动画 AnimationSet set = new AnimationSet(true); set.addAnimation(scale); set.addAnimation(alp); //开始动画 myLayout.startAnimation(set); } /** * 设置One动画 * * @param myLayout 控件 * @param time 显示时间 * @param deLayTime 延迟时间 */ private void setAnim(AbsoluteLayout myLayout, int time, int deLayTime) { //缩放动画 ScaleAnimation scale = new ScaleAnimation(1.0f, 1.5f, 1.0f, 1.5f, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f); scale.setDuration(time); scale.setStartOffset(deLayTime); //渐变 AlphaAnimation alp = new AlphaAnimation(1.0f, 0.0f); alp.setDuration(time); alp.setStartOffset(deLayTime); //组合动画 AnimationSet set = new AnimationSet(true); set.addAnimation(scale); set.addAnimation(alp); //开始动画 myLayout.startAnimation(set); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.search_fragment, container, false); findView(view); return view; } /** * 找控件 * * @param view */ private void findView(View view) { //设置触摸，手势 view.setLongClickable(true); view.setOnTouchListener(new MyOnTouch()); //初始化手势 gest = new GestureDetector(getActivity(), new MyGest()); myLayoutOne = (AbsoluteLayout) view.findViewById(R.id.myLayoutOne); myLayoutTwo = (AbsoluteLayout) view.findViewById(R.id.myLayoutTwo); } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); init(); } /** * 初始化 */ private void init() { //获取屏幕的像素，后续随机分布关键字 DisplayMetrics metrics = new DisplayMetrics(); getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics); //获取到屏幕的宽 mWidth = metrics.widthPixels; //初始化数据 initData(); //设置默认数据 setData(myLayoutOne, index); } /** * 初始化数据 */ private void initData() { //两个页面 for (int i = 0; i < 2; i++) { switch (i) { case 0: ArrayList newDataOne = new ArrayList<>(); //15个数据 for (int j = 0; j < 15; j++) { //实际开发中数据还是得从服务器获取 newDataOne.add("海贼王"); } //添加数据 data.add(newDataOne); break; case 1: ArrayList newDataTwo = new ArrayList<>(); //15个数据 for (int j = 0; j < 15; j++) { newDataTwo.add("火影忍者"); } //添加数据 data.add(newDataTwo); break; } } } /** * 设置默认的数据 * * @param myLayout * @param index */ private void setData(AbsoluteLayout myLayout, int index) { //每次加载之前清除 myLayout.removeAllViews(); //有数据了之后开始随机分布了 int startY = 50; //X动态生成,判断是第几页的数据，左右两边间距50，用户体验 for (int i = 0; i < data.get(index).size(); i++) { int x = get(50, mWidth - 50); int y = startY; //文本显示 TextView tv = new TextView(getActivity()); tv.setTextSize(12); //随机 tv.setText(data.get(index).get(i)); /** * 高，宽，x,y */ AbsoluteLayout.LayoutParams layout = new AbsoluteLayout.LayoutParams(100, 50, x, y); myLayout.addView(tv, layout); //开始随机分布 startY += 50; } } /** * 随机生成一个坐标 * * @param min * @param max * @return */ private int get(int min, int max) { //从最大到最小的随机数值 return new Random().nextInt(max) % (max - min + 1) + min; } /** * View的触摸事件 */ private class MyOnTouch implements View.OnTouchListener { @Override public boolean onTouch(View v, MotionEvent event) { //触摸事件传递给手势 return gest.onTouchEvent(event); } } /** * 手势监听 */ private class MyGest implements GestureDetector.OnGestureListener { //按下 @Override public boolean onDown(MotionEvent e) { return false; } @Override public void onShowPress(MotionEvent e) { } @Override public boolean onSingleTapUp(MotionEvent e) { return false; } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { return false; } @Override public void onLongPress(MotionEvent e) { } //滑动 @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { //左边——右边滑动 if (e1.getX() < e2.getX()) { index++; //越界处理 if (index == data.size()) { index = 0; } //判断显示内容 switch (myLayoutOne.getVisibility()) { //VISIBLE case 0: //动画并且显示，消失 setState(VISIBLE); setState(GONE); break; //INVISIBLE case 4: //GONE case 8: //动画并且显示，消失 setState(VISIBLE1); setState(GONE1); break; } } return false; } } /** * 动态改变状态 * * @param i */ private void setState(final int i) { //UI刷新 new Thread(new Runnable() { @Override public void run() { handler.sendEmptyMessage(i); } }).start(); }} 我们来运行一下
这里有个隐藏小bug，不知各位看官可否发现了其中的小失误，哈哈
你可能感兴趣的文章
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之预告篇
查看>>
《敏捷生活练习》打印书籍
查看>>
域控制器 忘记密码 如何重设管理员密码？
查看>>
TypeError: Cannot read property 'url' of undefined
查看>>
【原创】ORACLE的几个函数在MYSQL里面的简单实现
查看>>
Exchange 2013禁止网页修改密码
查看>>
linux运维实战练习-2015年9月5日课程作业（练习）安排
查看>>
演示：取证ICMPv6前缀请求与前缀公告消息原理
查看>>
国家邮政局：《寄递服务用户个人信息安全管理规定》（征求意见稿）公布
查看>>
疯狂ios讲义之实例：通过捏合手势缩放图片
查看>>
PowerShell实现批量收集SCVMM中虚拟机IP
查看>>
【VMCloud云平台】拥抱Docker（三）配置多个容器
查看>>
【cocos2d-x从c++到js】04：cocos2d-x for js中的继承
查看>>
使用 PowerShell 自动登录 Azure
查看>>
腾讯的微信小程序开发环境下常用快捷键汇总
查看>>
Flash CS 6绘图技巧之锁定填充
查看>>
如何从Zabbix数据库中获取监控数据
查看>>
《最后的武士》渡边谦在战场上问阿汤哥的一句话
查看>>
Python性能鸡汤
查看>>
SQLite Java Wrapper/JDBC Driver(收集)
查看>>