一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

Android自定義控件實戰(zhàn)-PickerVIew

 QCamera 2015-05-15

手機里設置鬧鐘需要選擇時間,那個選擇時間的控件就是滾動選擇器,前幾天用手機刷了MIUI,發(fā)現(xiàn)自帶的那個時間選擇器效果挺好看的,于是就自己仿寫了一個,權當練手。先來看效果:

                                                                 20140812115959296.gif

效果還行吧?實現(xiàn)思路就是自定義一個PickerView,單獨滾動的是一個 PickerView,顯然上圖中有分和秒的選擇所以在布局里用了兩個PickerView。由于這里不涉及到text的點擊事件,所以只需要繼承 View就行了,直接把text用canvas畫上去。PickerView的實現(xiàn)的主要難點:

難點1:

        字體隨距離的漸變。可以看到,text隨離中心位置的距離變化而變化,這里變化的是透明度alpha和字體大小TexSize,這兩個值我都設置了Max 和Min值,通過其與中心點的距離計算scale。我用的是變化曲線是拋物線scale=1-ax^2(x<=Height/4),scale = 0(x>Height/4),a=(4/Height)^2。x就是距離View中心的偏移量。用圖片表示如下:



難點2:

     text的居中。繪制text的時候不僅要使其在x方向上居中,還要在y方向上居中,在x方向上比較簡單,設置Paint的Align為Align.CENTER就行了,但是y方向上很蛋疼,需要計算text的baseline。

難點3:

    循環(huán)滾動。為了解決循環(huán)滾動的問題我把存放text的List從中間往上下攤開,通過不斷地moveHeadToTail和moveTailToHead使選中的text始終是list的中間position的值。

  

     以上就是幾個難點,了解了之后可以來看PickerView的代碼了:

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
package com.jingchen.timerpicker;
import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.graphics.Paint.FontMetricsInt;
import android.graphics.Paint.Style;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
/**
 * 滾動選擇器
 
 * @author chenjing
 
 */
public class PickerView extends View
{
    public static final String TAG = "PickerView";
    /**
     * text之間間距和minTextSize之比
     */
    public static final float MARGIN_ALPHA = 2.8f;
    /**
     * 自動回滾到中間的速度
     */
    public static final float SPEED = 2;
    private List<String> mDataList;
    /**
     * 選中的位置,這個位置是mDataList的中心位置,一直不變
     */
    private int mCurrentSelected;
    private Paint mPaint;
    private float mMaxTextSize = 80;
    private float mMinTextSize = 40;
    private float mMaxTextAlpha = 255;
    private float mMinTextAlpha = 120;
    private int mColorText = 0x333333;
    private int mViewHeight;
    private int mViewWidth;
    private float mLastDownY;
    /**
     * 滑動的距離
     */
    private float mMoveLen = 0;
    private boolean isInit = false;
    private onSelectListener mSelectListener;
    private Timer timer;
    private MyTimerTask mTask;
    Handler updateHandler = new Handler()
    {
        @Override
        public void handleMessage(Message msg)
        {
            if (Math.abs(mMoveLen) < SPEED)
            {
                mMoveLen = 0;
                if (mTask != null)
                {
                    mTask.cancel();
                    mTask = null;
                    performSelect();
                }
            else
                // 這里mMoveLen / Math.abs(mMoveLen)是為了保有mMoveLen的正負號,以實現(xiàn)上滾或下滾
                mMoveLen = mMoveLen - mMoveLen / Math.abs(mMoveLen) * SPEED;
            invalidate();
        }
    };
    public PickerView(Context context)
    {
        super(context);
        init();
    }
    public PickerView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        init();
    }
    public void setOnSelectListener(onSelectListener listener)
    {
        mSelectListener = listener;
    }
    private void performSelect()
    {
        if (mSelectListener != null)
            mSelectListener.onSelect(mDataList.get(mCurrentSelected));
    }
    public void setData(List<String> datas)
    {
        mDataList = datas;
        mCurrentSelected = datas.size() / 2;
        invalidate();
    }
    public void setSelected(int selected)
    {
        mCurrentSelected = selected;
    }
    private void moveHeadToTail()
    {
        String head = mDataList.get(0);
        mDataList.remove(0);
        mDataList.add(head);
    }
    private void moveTailToHead()
    {
        String tail = mDataList.get(mDataList.size() - 1);
        mDataList.remove(mDataList.size() - 1);
        mDataList.add(0, tail);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mViewHeight = getMeasuredHeight();
        mViewWidth = getMeasuredWidth();
        // 按照View的高度計算字體大小
        mMaxTextSize = mViewHeight / 4.0f;
        mMinTextSize = mMaxTextSize / 2f;
        isInit = true;
        invalidate();
    }
    private void init()
    {
        timer = new Timer();
        mDataList = new ArrayList<String>();
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Style.FILL);
        mPaint.setTextAlign(Align.CENTER);
        mPaint.setColor(mColorText);
    }
    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        // 根據(jù)index繪制view
        if (isInit)
            drawData(canvas);
    }
    private void drawData(Canvas canvas)
    {
        // 先繪制選中的text再往上往下繪制其余的text
        float scale = parabola(mViewHeight / 4.0f, mMoveLen);
        float size = (mMaxTextSize - mMinTextSize) * scale + mMinTextSize;
        mPaint.setTextSize(size);
        mPaint.setAlpha((int) ((mMaxTextAlpha - mMinTextAlpha) * scale + mMinTextAlpha));
        // text居中繪制,注意baseline的計算才能達到居中,y值是text中心坐標
        float x = (float) (mViewWidth / 2.0);
        float y = (float) (mViewHeight / 2.0 + mMoveLen);
        FontMetricsInt fmi = mPaint.getFontMetricsInt();
        float baseline = (float) (y - (fmi.bottom / 2.0 + fmi.top / 2.0));
        canvas.drawText(mDataList.get(mCurrentSelected), x, baseline, mPaint);
        // 繪制上方data
        for (int i = 1; (mCurrentSelected - i) >= 0; i++)
        {
            drawOtherText(canvas, i, -1);
        }
        // 繪制下方data
        for (int i = 1; (mCurrentSelected + i) < mDataList.size(); i++)
        {
            drawOtherText(canvas, i, 1);
        }
    }
    /**
     * @param canvas
     * @param position
     *            距離mCurrentSelected的差值
     * @param type
     *            1表示向下繪制,-1表示向上繪制
     */
    private void drawOtherText(Canvas canvas, int position, int type)
    {
        float d = (float) (MARGIN_ALPHA * mMinTextSize * position + type
                * mMoveLen);
        float scale = parabola(mViewHeight / 4.0f, d);
        float size = (mMaxTextSize - mMinTextSize) * scale + mMinTextSize;
        mPaint.setTextSize(size);
        mPaint.setAlpha((int) ((mMaxTextAlpha - mMinTextAlpha) * scale + mMinTextAlpha));
        float y = (float) (mViewHeight / 2.0 + type * d);
        FontMetricsInt fmi = mPaint.getFontMetricsInt();
        float baseline = (float) (y - (fmi.bottom / 2.0 + fmi.top / 2.0));
        canvas.drawText(mDataList.get(mCurrentSelected + type * position),
                (float) (mViewWidth / 2.0), baseline, mPaint);
    }
    /**
     * 拋物線
     
     * @param zero
     *            零點坐標
     * @param x
     *            偏移量
     * @return scale
     */
    private float parabola(float zero, float x)
    {
        float f = (float) (1 - Math.pow(x / zero, 2));
        return f < 0 ? 0 : f;
    }
    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        switch (event.getActionMasked())
        {
        case MotionEvent.ACTION_DOWN:
            doDown(event);
            break;
        case MotionEvent.ACTION_MOVE:
            doMove(event);
            break;
        case MotionEvent.ACTION_UP:
            doUp(event);
            break;
        }
        return true;
    }
    private void doDown(MotionEvent event)
    {
        if (mTask != null)
        {
            mTask.cancel();
            mTask = null;
        }
        mLastDownY = event.getY();
    }
    private void doMove(MotionEvent event)
    {
        mMoveLen += (event.getY() - mLastDownY);
        if (mMoveLen > MARGIN_ALPHA * mMinTextSize / 2)
        {
            // 往下滑超過離開距離
            moveTailToHead();
            mMoveLen = mMoveLen - MARGIN_ALPHA * mMinTextSize;
        else if (mMoveLen < -MARGIN_ALPHA * mMinTextSize / 2)
        {
            // 往上滑超過離開距離
            moveHeadToTail();
            mMoveLen = mMoveLen + MARGIN_ALPHA * mMinTextSize;
        }
        mLastDownY = event.getY();
        invalidate();
    }
    private void doUp(MotionEvent event)
    {
        // 抬起手后mCurrentSelected的位置由當前位置move到中間選中位置
        if (Math.abs(mMoveLen) < 0.0001)
        {
            mMoveLen = 0;
            return;
        }
        if (mTask != null)
        {
            mTask.cancel();
            mTask = null;
        }
        mTask = new MyTimerTask(updateHandler);
        timer.schedule(mTask, 0, 10);
    }
    class MyTimerTask extends TimerTask
    {
        Handler handler;
        public MyTimerTask(Handler handler)
        {
            this.handler = handler;
        }
        @Override
        public void run()
        {
            handler.sendMessage(handler.obtainMessage());
        }
    }
    public interface onSelectListener
    {
        void onSelect(String text);
    }
}

代碼里的注釋都寫的很清楚了。接下來,我們就用寫好的PickerView實現(xiàn)文章開頭的圖片效果吧~

首先看MainActivity的布局:

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
<RelativeLayout xmlns:android="http://schemas./apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000" >
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#ffffff" >
        <com.jingchen.timerpicker.PickerView
            android:id="@+id/minute_pv"
            android:layout_width="80dp"
            android:layout_height="160dp" />
        <TextView
            android:id="@+id/minute_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/minute_pv"
            android:text="分"
            android:textColor="#ffaa33"
            android:textSize="26sp"
            android:textStyle="bold" />
        <com.jingchen.timerpicker.PickerView
            android:id="@+id/second_pv"
            android:layout_width="80dp"
            android:layout_height="160dp"
            android:layout_toRightOf="@id/minute_tv" />
        <TextView
            android:id="@+id/second_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/second_pv"
            android:text="秒"
            android:textColor="#ffaa33"
            android:textSize="26sp"
            android:textStyle="bold" />
    </RelativeLayout>
</RelativeLayout>

兩個PickerView兩個TextView,很簡單。

下面是MainActivity的代碼:

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
package com.jingchen.timerpicker;
import java.util.ArrayList;
import java.util.List;
import com.jingchen.timerpicker.PickerView.onSelectListener;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends Activity
{
    PickerView minute_pv;
    PickerView second_pv;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        minute_pv = (PickerView) findViewById(R.id.minute_pv);
        second_pv = (PickerView) findViewById(R.id.second_pv);
        List<String> data = new ArrayList<String>();
        List<String> seconds = new ArrayList<String>();
        for (int i = 0; i < 10; i++)
        {
            data.add("0" + i);
        }
        for (int i = 0; i < 60; i++)
        {
            seconds.add(i < 10 ? "0" + i : "" + i);
        }
        minute_pv.setData(data);
        minute_pv.setOnSelectListener(new onSelectListener()
        {
            @Override
            public void onSelect(String text)
            {
                Toast.makeText(MainActivity.this"選擇了 " + text + " 分",
                        Toast.LENGTH_SHORT).show();
            }
        });
        second_pv.setData(seconds);
        second_pv.setOnSelectListener(new onSelectListener()
        {
            @Override
            public void onSelect(String text)
            {
                Toast.makeText(MainActivity.this"選擇了 " + text + " 秒",
                        Toast.LENGTH_SHORT).show();
            }
        });
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}

OK了,自定義自己的TimerPicker就是這么簡單~.

    本站是提供個人知識管理的網(wǎng)絡存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    99少妇偷拍视频在线| 亚洲欧美日产综合在线网| 亚洲人午夜精品射精日韩 | 午夜精品在线观看视频午夜| 欧美精品亚洲精品一区| 亚洲国产性生活高潮免费视频| 亚洲成人黄色一级大片| 国产伦精品一一区二区三区高清版 | 成年女人下边潮喷毛片免费| 国产一级片内射视频免费播放 | 国产av一区二区三区麻豆| 欧美日韩久久精品一区二区 | 日韩人妻免费视频一专区 | 蜜桃传媒在线正在播放| 99视频精品免费视频| 日本美国三级黄色aa| 国产精品丝袜美腿一区二区| 又黄又爽禁片视频在线观看| 婷婷开心五月亚洲综合| 国产av大片一区二区三区| 老富婆找帅哥按摩抠逼视频| 亚洲一区二区三区在线中文字幕| 欧美人妻免费一区二区三区| 欧美日韩国产免费看黄片| 99香蕉精品视频国产版| 日本高清视频在线观看不卡| 久久综合亚洲精品蜜桃| 日本女优一区二区三区免费| 人妻少妇av中文字幕乱码高清| 色婷婷日本视频在线观看| 国产日韩精品激情在线观看| 亚洲国产av在线视频| 伊人国产精选免费观看在线视频| 亚洲综合一区二区三区在线| 富婆又大又白又丰满又紧又硬| 国产专区亚洲专区久久| 国产高清一区二区不卡| 国产剧情欧美日韩中文在线| 五月天六月激情联盟网| 色哟哟国产精品免费视频| 最近最新中文字幕免费|