仿百度壁纸客户端(五)——实现搜索动画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,不知各位看官可否发现了其中的小失误,哈哈

仿百度壁纸客户端(五)——实现搜索动画GestureDetector手势识别,动态更新搜索关键字的更多相关文章

  1. 仿百度壁纸client(五)——实现搜索动画GestureDetector手势识别,动态更新搜索keyword

    仿百度壁纸client(五)--实现搜索动画GestureDetector手势识别,动态更新搜索关键字 百度壁纸系列 仿百度壁纸client(一)--主框架搭建,自己定义Tab + ViewPager ...

  2. 仿百度壁纸客户端(六)——完结篇之Gallery画廊实现壁纸预览已经项目细节优化

    仿百度壁纸客户端(六)--完结篇之Gallery画廊实现壁纸预览已经项目细节优化 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度 ...

  3. 仿百度壁纸客户端(二)——主页自定义ViewPager广告定时轮播图

    仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...

  4. 仿百度壁纸客户端(一)——主框架搭建,自定义Tab+ViewPager+Fragment

    仿百度壁纸客户端(一)--主框架搭建,自定义Tab+ViewPager+Fragment 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment ...

  5. 仿百度壁纸client(六)——完结篇之Gallery画廊实现壁纸预览已经项目细节优化

    仿百度壁纸client(六)--完结篇之Gallery画廊实现壁纸预览已经项目细节优化 百度壁纸系列 仿百度壁纸client(一)--主框架搭建,自己定义Tab + ViewPager + Fragm ...

  6. c# JD快速搜索工具,2015分析JD搜索报文,模拟请求搜索数据,快速定位宝贝排行位置。

    分析JD搜索报文 搜索关键字 女装 第二页,分2次加载. rt=1&stop=1&click=&psort=&page=3http://search.jd.com/Se ...

  7. Canvas 仿百度贴吧客户端 loading 小球

    前言 几天前在简书上看到在一篇文章<Android仿百度贴吧客户端Loading小球>,看了一下作者,他写了两个好玩的 demo,效果图如下: 今天趁着周末有空,用 H5 的 Canvas ...

  8. 高仿百度传课应用客户端源码iOS版

    高仿百度传课iOS版,版本号:2.4.1.2 运行环境:xcode6.3  ios8.3 (再往上系统没有测试) 转载请注明出处,不可用于商业用途及不合法用途. 如果你觉得不错,欢迎  star  哦 ...

  9. ViewPager实现滑屏切换页面及动画效果(仿优酷客户端)

     找了许多实现该功能的例子,但效果都不很理想,于是自己结合网上的资源及自己的总结,整理了一下,发出来,供大家参考.这个是自己做的,仿优酷客户端的. 先看效果: ****************** ...

随机推荐

  1. [CSDN_Markdown]使用LaTeX基本数学公式

    简介 以前我很头疼在博文里写公式,一直期盼CSDN的博文编辑器能支持LaTeX 公式输入,今天终于可以使用这个功能了!此文主要讨论如何在CSDN的Markdown编辑器中写 LaTeX 公式! 使用L ...

  2. Mybatis源码分析--返回值ResultType和ResultMap

    这一篇博客我们来介绍一下Mybatis执行sql语句返回的结果值的到实体对象的映射机制.首先ResultType和ResultMap的使用方式是不同的. ResultType的使用方式: result ...

  3. Servlet规范总结

    Servlet接口 Servlet规范的核心接口即是Servlet接口,它是所有Servlet类必须实现的接口,在Java Servelt API中已经提供了两个抽象类方便开发者实现Servlet类, ...

  4. Android基于Retrofit2.0 +RxJava 封装的超好用的RetrofitClient工具类(六)

    csdn :码小白 原文地址: http://blog.csdn.net/sk719887916/article/details/51958010 RetrofitClient 基于Retrofit2 ...

  5. Java集合-----java集合框架常见问题

    1什么是Java集合API Java集合框架API是用来表示和操作集合的统一框架,它包含接口.实现类.以及帮助程序员完成一些编程的算法. 简言之,API在上层完成以下几件事: ● 编程更加省力,提高城 ...

  6. Android 字体设置-Typeface讲解

    控件的字体设置的两种方式 常用的字体类型名称还有: Typeface.DEFAULT //常规字体类型 Typeface.DEFAULT_BOLD //黑体字体类型 Typeface.MONOSPAC ...

  7. 04springMVC结构,mvc模式,spring-mvc流程,spring-mvc的第一个例子,三种handlerMapping,几种控制器,springmvc基于注解的开发,文件上传,拦截器,s

     1. Spring-mvc介绍 1.1市面上流行的框架 Struts2(比较多) Springmvc(比较多而且属于上升的趋势) Struts1(即将被淘汰) 其他 1.2  spring-mv ...

  8. 【一天一道LeetCode】#205. Isomorphic Strings

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given t ...

  9. Fetch XML and ConditionExpression operators

    https://msdynamicscrmblog.wordpress.com/2013/05/10/fetch-xml-and-conditionexpression-operators-using ...

  10. Cocos2D iOS之旅:如何写一个敲地鼠游戏(二):Cocos2D中的高清支持

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...