标签： android手势识别搜索动画百度

2016-04-09 12:28 2207人阅读 评论(2) 收藏 举报

 分类：

Android（110） 

版权声明：本文为博主原创文章，博客地址：http://blog.csdn.net/qq_26787115，未经博主允许不得转载。

目录(?)[+]

仿百度壁纸客户端（五）——实现搜索动画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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这两个布局我们去填充数据，首先我们把要初始化的东西都初始化好

    /**     * 找控件     *     * @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);    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

紧接着我们就可以去获取相应的数据了

/**     * 初始化     */    private void init() {        //获取屏幕的像素，后续随机分布关键字        DisplayMetrics metrics = new DisplayMetrics();        getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);        //获取到屏幕的宽        mWidth = metrics.widthPixels;        //初始化数据        initData();        //设置默认数据        setData(myLayoutOne, index);    }**重点内容**
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

获取到数据之后我们就开始初始化这些数据

    /**     * 初始化数据     */    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;            }        }    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

这样我们就可以来进行随机分布的计算

/**     * 设置默认的数据     *     * @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;    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

当我们要添加手势的时候，我们就可以把触摸事件传递给手势事件

 /**     * View的触摸事件     */    private class MyOnTouch implements View.OnTouchListener {        @Override        public boolean onTouch(View v, MotionEvent event) {            //触摸事件传递给手势            return gest.onTouchEvent(event);        }    }
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

接着我们来处理滑产生的操作

/**     * 手势监听     */    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;        }    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

我们只要去动态的改变他的UI，所以，这里我们写了这样一个方法

/**     * 动态改变状态     *     * @param i     */    private void setState(final int i) {        //UI刷新        new Thread(new Runnable() {            @Override            public void run() {                handler.sendEmptyMessage(i);            }        }).start();    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

当接收到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);        }    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

我们就可以进行动画了，无非就是两个视图动画，他们的坐标刚好相反

 * 设置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);    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

这里贴上完整代码，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();    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349

我们来运行一下

这里有个隐藏小bug，不知各位看官可否发现了其中的小失误，哈哈