免费高清特黄a大片,九一h片在线免费看,a免费国产一级特黄aa大,国产精品国产主播在线观看,成人精品一区久久久久,一级特黄aa大片,俄罗斯无遮挡一级毛片

分享

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

 QCamera 2015-05-15

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

                                                                 20140812115959296.gif

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

難點(diǎn)1:

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



難點(diǎn)2:

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

難點(diǎn)3:

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

  

     以上就是幾個(gè)難點(diǎn),了解了之后可以來(lái)看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;
/**
 * 滾動(dòng)選擇器
 
 * @author chenjing
 
 */
public class PickerView extends View
{
    public static final String TAG = "PickerView";
    /**
     * text之間間距和minTextSize之比
     */
    public static final float MARGIN_ALPHA = 2.8f;
    /**
     * 自動(dòng)回滾到中間的速度
     */
    public static final float SPEED = 2;
    private List<String> mDataList;
    /**
     * 選中的位置,這個(gè)位置是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;
    /**
     * 滑動(dòng)的距離
     */
    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的正負(fù)號(hào),以實(shí)現(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的高度計(jì)算字體大小
        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的計(jì)算才能達(dá)到居中,y值是text中心坐標(biāo)
        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
     *            零點(diǎn)坐標(biāo)
     * @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)
        {
            // 往下滑超過(guò)離開距離
            moveTailToHead();
            mMoveLen = mMoveLen - MARGIN_ALPHA * mMinTextSize;
        else if (mMoveLen < -MARGIN_ALPHA * mMinTextSize / 2)
        {
            // 往上滑超過(guò)離開距離
            moveHeadToTail();
            mMoveLen = mMoveLen + MARGIN_ALPHA * mMinTextSize;
        }
        mLastDownY = event.getY();
        invalidate();
    }
    private void doUp(MotionEvent event)
    {
        // 抬起手后mCurrentSelected的位置由當(dāng)前位置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);
    }
}

代碼里的注釋都寫的很清楚了。接下來(lái),我們就用寫好的PickerView實(shí)現(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>

兩個(gè)PickerView兩個(gè)TextView,很簡(jiǎ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
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就是這么簡(jiǎn)單~.

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

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多