仿百度壁纸客户端(五)——实现搜索动画GestureDetector手势识别,动态更新搜索关键字
2016-04-09 12:28
471 查看
仿百度壁纸客户端(五)——实现搜索动画GestureDetector手势识别,动态更新搜索关键字
百度壁纸系列
仿百度壁纸客户端(一)——主框架搭建,自定义Tab + ViewPager + Fragment仿百度壁纸客户端(二)——主页自定义ViewPager广告定时轮播图
仿百度壁纸客户端(三)——首页单向,双向事件冲突处理,壁纸列表的实现
仿百度壁纸客户端(四)——自定义上拉加载实现精选壁纸墙
仿百度壁纸客户端(五)——实现搜索动画GestureDetector手势识别,动态更新搜索关键字
仿百度壁纸客户端(六)——完结篇之Gallery画廊实现壁纸预览已经项目细节优化
我们重新来看看这个效果
想实现这个逻辑,其实就是监听两个View的显示隐藏加上一点小动画,所以我们在布局上是这样的
search_fragment.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <AbsoluteLayout android:id="@+id/myLayoutOne" android:layout_width="match_parent" android:layout_height="match_parent"> </AbsoluteLayout> <AbsoluteLayout android:id="@+id/myLayoutTwo" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="gone"> </AbsoluteLayout> </RelativeLayout>
这两个布局我们去填充数据,首先我们把要初始化的东西都初始化好
/** * 找控件 * * @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<String> newDataOne = new ArrayList<>(); //15个数据 for (int j = 0; j < 15; j++) { //实际开发中数据还是得从服务器获取 newDataOne.add("海贼王"); } //添加数据 data.add(newDataOne); break; case 1: ArrayList<String> 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<ArrayList<String>> data = new ArrayList<ArrayList<String>>();
//屏幕的宽
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<String> newDataOne = new ArrayList<>(); //15个数据 for (int j = 0; j < 15; j++) { //实际开发中数据还是得从服务器获取 newDataOne.add("海贼王"); } //添加数据 data.add(newDataOne); break; case 1: ArrayList<String> 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,不知各位看官可否发现了其中的小失误,哈哈
相关文章推荐
- Windows共享设定-使用net use添加网络盘带上账号密码
- 笔试题20. LeetCode OJ (6)
- OC post 请求时发送字符串问题
- float vs int
- Long与Integer的总结
- [IO]——对象处理流.序列化
- MFC界面设计入门篇
- 决胜九月:mysql面试必会基础(一)
- 一个简单的Python爬虫
- ssd/内存 基本知识
- Unity协程(Coroutine)原理深入剖析
- Android ION机制_HAL与vendor层共享内存_流程简介(1)
- 串口通信经验
- 反转链表
- 如何使用xpdf把本地磁盘上的pdf转化为txt
- Android中CheckBox的使用
- pcl里面的点特征直方图(PFH)
- MP4文件,Web播放器不能边下边播问题
- Ubuntu 14.04 FTP服务器--vsftpd的安装和配置
- 02-Memcached安装