Loading

時間  2019-11-12
標籤 loading 简体版
原文   原文鏈接

咱們先一塊兒看下原gif圖效果： android


20150322173842391.gif


從效果上看，咱們須要考慮如下幾個問題： 編程

1.葉子的隨機產生； canvas

2.葉子隨着一條正餘弦曲線移動； dom

3.葉子在移動的時候旋轉，旋轉方向隨機，正時針或逆時針； ide

4.葉子遇到進度條，彷佛是融合進入； 函數

5.葉子不能超出最左邊的弧角； post

7.葉子飄出時的角度不是一致，走的曲線的振幅也有差異，不然太有規律性，缺少美感； ui

總的看起來，須要注意和麻煩的地方主要是以上幾點，固然還有一些細節問題，好比最左邊是圓弧等等； this

那接下來咱們將效果進行分解，而後逐個擊破： spa

整個效果來講，咱們須要的圖主要是飛動的小葉子和右邊旋轉的風扇，其餘的部分均可以用色值進行繪製，固然咱們爲了方便，就連底部框一塊兒切了；

先從gif 圖裏把飛動的小葉子和右邊旋轉的風扇、底部框摳出來，小葉子圖以下：


                                          20150322181205172.png


咱們須要處理的主要有兩個部分：

1. 隨着進度往前繪製的進度條；

2. 不斷飛出來的小葉片；


咱們先處理第一部分 － 隨着進度往前繪製的進度條：

進度條的位置根據外層傳入的 progress 進行計算，能夠分爲圖中 一、二、3 三個階段：

20150322215713127.jpg


1. 當progress 較小，算出的當前距離還在弧形之內時，須要繪製如圖所示 1 區域的弧形，其他部分用白色填充；

2. 當 progress 算出的距離到2時，須要繪製棕色半圓弧形，其他部分用白色矩形填充；

3. 當 progress 算出的距離到3 時，須要繪製棕色半圓弧形，棕色矩形，白色矩形；

4. 當 progress 算出的距離到頭時，須要繪製棕色半圓弧形，棕色矩形；（能夠合併到3中）


首先根據進度條的寬度和當前進度、總進度算出當前的位置：

1
2
        //mProgressWidth爲進度條的寬度，根據當前進度算出進度條的位置
        mCurrentProgressPosition = mProgressWidth * mProgress / TOTAL_PROGRESS;

而後按照上面的邏輯進行繪製，其中須要計算上圖中的紅色弧角角度，計算方法以下：

1
2
    // 單邊角度
    int angle = (int) Math.toDegrees(Math.acos((mArcRadius - mCurrentProgressPosition)/ (float) mArcRadius));

Math.acos()  －反餘弦函數；

Math.toDegrees() － 弧度轉化爲角度，Math.toRadians 角度轉化爲弧度

因此圓弧的起始點爲：

1
int startAngle = 180 - angle;

圓弧劃過的角度爲：

1
2 * angle


這一塊的代碼以下：

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
        // mProgressWidth爲進度條的寬度，根據當前進度算出進度條的位置
        mCurrentProgressPosition = mProgressWidth * mProgress / TOTAL_PROGRESS;
        // 即當前位置在圖中所示1範圍內
        if (mCurrentProgressPosition < mArcRadius) {
            Log.i(TAG, "mProgress = " + mProgress + "---mCurrentProgressPosition = "
                    + mCurrentProgressPosition
                    + "--mArcProgressWidth" + mArcRadius);
            // 1.繪製白色ARC，繪製orange ARC
            // 2.繪製白色矩形
 
            // 1.繪製白色ARC
            canvas.drawArc(mArcRectF, 90, 180, false, mWhitePaint);
 
            // 2.繪製白色矩形
            mWhiteRectF.left = mArcRightLocation;
            canvas.drawRect(mWhiteRectF, mWhitePaint);
 
            // 3.繪製棕色 ARC
            // 單邊角度
            int angle = (int) Math.toDegrees(Math.acos((mArcRadius - mCurrentProgressPosition)
                    / (float) mArcRadius));
            // 起始的位置
            int startAngle = 180 - angle;
            // 掃過的角度
            int sweepAngle = 2 * angle;
            Log.i(TAG, "startAngle = " + startAngle);
            canvas.drawArc(mArcRectF, startAngle, sweepAngle, false, mOrangePaint);
        } else {
            Log.i(TAG, "mProgress = " + mProgress + "---transfer-----mCurrentProgressPosition = "
                    + mCurrentProgressPosition
                    + "--mArcProgressWidth" + mArcRadius);
            // 1.繪製white RECT
            // 2.繪製Orange ARC
            // 3.繪製orange RECT
            
            // 1.繪製white RECT
            mWhiteRectF.left = mCurrentProgressPosition;
            canvas.drawRect(mWhiteRectF, mWhitePaint);
             
            // 2.繪製Orange ARC
            canvas.drawArc(mArcRectF, 90, 180, false, mOrangePaint);
            // 3.繪製orange RECT
            mOrangeRectF.left = mArcRightLocation;
            mOrangeRectF.right = mCurrentProgressPosition;
            canvas.drawRect(mOrangeRectF, mOrangePaint);
 
        }

接下來再來看葉子部分：

首先根據效果狀況基本肯定出 曲線函數，標準函數方程爲：y = A(wx+Q)+h，其中w影響週期，A影響振幅 ，週期T＝ 2 * Math.PI/w;

根據效果能夠看出，週期大體爲總進度長度，因此肯定w＝(float) ((float) 2 * Math.PI /mProgressWidth)；


仔細觀察效果，咱們能夠發現，葉子飄動的過程當中振幅不是徹底一致的，產生一種錯落的效果，既然如此，咱們給葉子定義一個Type，根據Type 肯定不一樣的振幅；

咱們建立一個葉子對象：

1
2
3
4
5
6
7
8
9
10
11
12
13
   private class Leaf {
 
        // 在繪製部分的位置
        float x, y;
        // 控制葉子飄動的幅度
        StartType type;
        // 旋轉角度
        int rotateAngle;
        // 旋轉方向--0表明順時針，1表明逆時針
        int rotateDirection;
        // 起始時間(ms)
        long startTime;
    }

類型採用枚舉進行定義，其實就是用來區分不一樣的振幅：

1
2
3
    private enum StartType {
        LITTLE, MIDDLE, BIG
    }

建立一個LeafFactory類用於建立一個或多個葉子信息：

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
    private class LeafFactory {
        private static final int MAX_LEAFS = 6;
        Random random = new Random();
 
        // 生成一個葉子信息
        public Leaf generateLeaf() {
            Leaf leaf = new Leaf();
            int randomType = random.nextInt(3);
            // 隨時類型－ 隨機振幅
            StartType type = StartType.MIDDLE;
            switch (randomType) {
                case 0:
                    break;
                case 1:
                    type = StartType.LITTLE;
                    break;
                case 2:
                    type = StartType.BIG;
                    break;
                default:
                    break;
            }
            leaf.type = type;
            // 隨機起始的旋轉角度
            leaf.rotateAngle = random.nextInt(360);
            // 隨機旋轉方向（順時針或逆時針）
            leaf.rotateDirection = random.nextInt(2);
            // 爲了產生交錯的感受，讓開始的時間有必定的隨機性
            mAddTime += random.nextInt((int) (LEAF_FLOAT_TIME * 1.5));
            leaf.startTime = System.currentTimeMillis() + mAddTime;
            return leaf;
        }
 
        // 根據最大葉子數產生葉子信息
        public List<Leaf> generateLeafs() {
            return generateLeafs(MAX_LEAFS);
        }
 
        // 根據傳入的葉子數量產生葉子信息
        public List<Leaf> generateLeafs(int leafSize) {
            List<Leaf> leafs = new LinkedList<Leaf>();
            for (int i = 0; i < leafSize; i++) {
                leafs.add(generateLeaf());
            }
            return leafs;
        }
    }

定義兩個常亮分別記錄中等振幅和之間的振幅差：

1
2
3
4
    // 中等振幅大小
    private static final int MIDDLE_AMPLITUDE = 13;
    // 不一樣類型之間的振幅差距
    private static final int AMPLITUDE_DISPARITY = 5;
1
2
3
4
    // 中等振幅大小
    private int mMiddleAmplitude = MIDDLE_AMPLITUDE;
    // 振幅差
    private int mAmplitudeDisparity = AMPLITUDE_DISPARITY;

有了以上信息，咱們則能夠獲取到葉子的Y值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    // 經過葉子信息獲取當前葉子的Y值
    private int getLocationY(Leaf leaf) {
        // y = A(wx+Q)+h
        float w = (float) ((float) 2 * Math.PI / mProgressWidth);
        float a = mMiddleAmplitude;
        switch (leaf.type) {
            case LITTLE:
                // 小振幅 ＝ 中等振幅 － 振幅差
                a = mMiddleAmplitude - mAmplitudeDisparity;
                break;
            case MIDDLE:
                a = mMiddleAmplitude;
                break;
            case BIG:
                // 小振幅 ＝ 中等振幅 + 振幅差
                a = mMiddleAmplitude + mAmplitudeDisparity;
                break;
            default:
                break;
        }
        Log.i(TAG, "---a = " + a + "---w = " + w + "--leaf.x = " + leaf.x);
        return (int) (a * Math.sin(w * leaf.x)) + mArcRadius * 2 / 3;
    }

接下來，咱們開始繪製葉子：

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
    /**
     * 繪製葉子
     * 
     * @param canvas
     */
    private void drawLeafs(Canvas canvas) {
        long currentTime = System.currentTimeMillis();
        for (int i = 0; i < mLeafInfos.size(); i++) {
            Leaf leaf = mLeafInfos.get(i);
            if (currentTime > leaf.startTime && leaf.startTime != 0) {
                // 繪製葉子－－根據葉子的類型和當前時間得出葉子的（x，y）
                getLeafLocation(leaf, currentTime);
                // 根據時間計算旋轉角度
                canvas.save();
                // 經過Matrix控制葉子旋轉
                Matrix matrix = new Matrix();
                float transX = mLeftMargin + leaf.x;
                float transY = mLeftMargin + leaf.y;
                Log.i(TAG, "left.x = " + leaf.x + "--leaf.y=" + leaf.y);
                matrix.postTranslate(transX, transY);
                // 經過時間關聯旋轉角度，則能夠直接經過修改LEAF_ROTATE_TIME調節葉子旋轉快慢
                float rotateFraction = ((currentTime - leaf.startTime) % LEAF_ROTATE_TIME)
                        / (float) LEAF_ROTATE_TIME;
                int angle = (int) (rotateFraction * 360);
                // 根據葉子旋轉方向肯定葉子旋轉角度
                int rotate = leaf.rotateDirection == 0 ? angle + leaf.rotateAngle : -angle
                        + leaf.rotateAngle;
                matrix.postRotate(rotate, transX
                        + mLeafWidth / 2, transY + mLeafHeight / 2);
                canvas.drawBitmap(mLeafBitmap, matrix, mBitmapPaint);
                canvas.restore();
            } else {
                continue;
            }
        }
    }

最後，向外層暴露幾個接口：

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
    /**
     * 設置中等振幅
     * 
     * @param amplitude
     */
    public void setMiddleAmplitude(int amplitude) {
        this.mMiddleAmplitude = amplitude;
    }
 
    /**
     * 設置振幅差
     * 
     * @param disparity
     */
    public void setMplitudeDisparity(int disparity) {
        this.mAmplitudeDisparity = disparity;
    }
 
    /**
     * 獲取中等振幅
     * 
     * @param amplitude
     */
    public int getMiddleAmplitude() {
        return mMiddleAmplitude;
    }
 
    /**
     * 獲取振幅差
     * 
     * @param disparity
     */
    public int getMplitudeDisparity() {
        return mAmplitudeDisparity;
    }
 
    /**
     * 設置進度
     * 
     * @param progress
     */
    public void setProgress(int progress) {
        this.mProgress = progress;
        postInvalidate();
    }
 
    /**
     * 設置葉子飄完一個週期所花的時間
     * 
     * @param time
     */
    public void setLeafFloatTime(long time) {
        this.mLeafFloatTime = time;
    }
 
    /**
     * 設置葉子旋轉一週所花的時間
     * 
     * @param time
     */
    public void setLeafRotateTime(long time) {
        this.mLeafRotateTime = time;

這些接口用來幹嗎呢？用於把咱們的動效作成徹底可手動調節的，這樣作有什麼好處呢？

1. 更加便於產品、射雞溼查看效果，避免YY，本身手動調節，不會出現要你一遍遍的改參數安裝、查看、再改、再查看... ... N遍以後說 「這好像不是我想要的」 -- 瞬間天崩地裂，天昏地暗，感受被全世界拋棄；

2. 便於體現你是一個考慮全面，思惟縝密，會編程、會設計的藝術家，固然這純屬YY，主要仍是方便你們；


如此一來，射雞溼們只須要不斷的調節便可實時的看到展示的效果，最後只須要把最終的參數反饋過來便可，萬事大吉，一了百了；

固然，若是對方是個漂亮的妹子，而你又苦於沒有機會搭訕，以上內容就當我沒說，盡情的不按要求寫吧，她確定會主動找你的，說不定連飯都反過來請了... ...


好啦，言歸正傳，完成收尾部分，咱們讓全部的參數均可調節起來：

把剩下的layout 和activity貼出來：

activity：

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
public class LeafLoadingActivity extends Activity implements OnSeekBarChangeListener,
        OnClickListener {
 
    Handler mHandler = new Handler() {
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case REFRESH_PROGRESS:
                    if (mProgress < 40) {
                        mProgress += 1;
                        // 隨機800ms之內刷新一次
                        mHandler.sendEmptyMessageDelayed(REFRESH_PROGRESS,
                                new Random().nextInt(800));
                        mLeafLoadingView.setProgress(mProgress);
                    } else {
                        mProgress += 1;
                        // 隨機1200ms之內刷新一次
                        mHandler.sendEmptyMessageDelayed(REFRESH_PROGRESS,
                                new Random().nextInt(1200));
                        mLeafLoadingView.setProgress(mProgress);
 
                    }
                    break;
 
                default:
                    break;
            }
        };
    };
 
    private static final int REFRESH_PROGRESS = 0x10;
    private LeafLoadingView mLeafLoadingView;
    private SeekBar mAmpireSeekBar;
    private SeekBar mDistanceSeekBar;
    private TextView mMplitudeText;
    private TextView mDisparityText;
    private View mFanView;
    private Button mClearButton;
    private int mProgress = 0;
 
    private TextView mProgressText;
    private View mAddProgress;
    private SeekBar mFloatTimeSeekBar;
 
    private SeekBar mRotateTimeSeekBar;
    private TextView mFloatTimeText;
    private TextView mRotateTimeText;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.leaf_loading_layout);
        initViews();
        mHandler.sendEmptyMessageDelayed(REFRESH_PROGRESS, 3000);
    }
 
    private void initViews() {
        mFanView = findViewById(R.id.fan_pic);
        RotateAnimation rotateAnimation = DXAnimationUtils.initRotateAnimation(false, 1500, true,
                Animation.INFINITE);
        mFanView.startAnimation(rotateAnimation);
        mClearButton = (Button) findViewById(R.id.clear_progress);
        mClearButton.setOnClickListener(this);
 
        mLeafLoadingView = (LeafLoadingView) findViewById(R.id.leaf_loading);
        mMplitudeText = (TextView) findViewById(R.id.text_ampair);
        mMplitudeText.setText(getString(R.string.current_mplitude,
                mLeafLoadingView.getMiddleAmplitude()));
 
        mDisparityText = (TextView) findViewById(R.id.text_disparity);
        mDisparityText.setText(getString(R.string.current_Disparity,
                mLeafLoadingView.getMplitudeDisparity()));
 
        mAmpireSeekBar = (SeekBar) findViewById(R.id.seekBar_ampair);
        mAmpireSeekBar.setOnSeekBarChangeListener(this);
        mAmpireSeekBar.setProgress(mLeafLoadingView.getMiddleAmplitude());
        mAmpireSeekBar.setMax(50);
 
        mDistanceSeekBar = (SeekBar) findViewById(R.id.seekBar_distance);
        mDistanceSeekBar.setOnSeekBarChangeListener(this);
        mDistanceSeekBar.setProgress(mLeafLoadingView.getMplitudeDisparity());
        mDistanceSeekBar.setMax(20);
 
        mAddProgress = findViewById(R.id.add_progress);
        mAddProgress.setOnClickListener(this);
        mProgressText = (TextView) findViewById(R.id.text_progress);
 
        mFloatTimeText = (TextView) findViewById(R.id.text_float_time);
        mFloatTimeSeekBar = (SeekBar) findViewById(R.id.seekBar_float_time);
        mFloatTimeSeekBar.setOnSeekBarChangeListener(this);
        mFloatTimeSeekBar.setMax(5000);
        mFloatTimeSeekBar.setProgress((int) mLeafLoadingView.getLeafFloatTime());
        mFloatTimeText.setText(getResources().getString(R.string.current_float_time,
                mLeafLoadingView.getLeafFloatTime()));
 
        mRotateTimeText = (TextView) findViewById(R.id.text_rotate_time);
        mRotateTimeSeekBar = (SeekBar) findViewById(R.id.seekBar_rotate_time);
        mRotateTimeSeekBar.setOnSeekBarChangeListener(this);
        mRotateTimeSeekBar.setMax(5000);
        mRotateTimeSeekBar.setProgress((int) mLeafLoadingView.getLeafRotateTime());
        mRotateTimeText.setText(getResources().getString(R.string.current_float_time,
                mLeafLoadingView.getLeafRotateTime()));
    }
 
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        if (seekBar == mAmpireSeekBar) {
            mLeafLoadingView.setMiddleAmplitude(progress);
            mMplitudeText.setText(getString(R.string.current_mplitude,
                    progress));
        } else if (seekBar == mDistanceSeekBar) {
            mLeafLoadingView.setMplitudeDisparity(progress);
            mDisparityText.setText(getString(R.string.current_Disparity,
                    progress));
        } else if (seekBar == mFloatTimeSeekBar) {
            mLeafLoadingView.setLeafFloatTime(progress);
            mFloatTimeText.setText(getResources().getString(R.string.current_float_time,
                    progress));
        }
        else if (seekBar == mRotateTimeSeekBar) {
            mLeafLoadingView.setLeafRotateTime(progress);
            mRotateTimeText.setText(getResources().getString(R.string.current_rotate_time,
                    progress));
        }
 
    }
 
    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
 
    }
 
    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
 
    }
 
    @Override
    public void onClick(View v) {
        if (v == mClearButton) {
            mLeafLoadingView.setProgress(0);
            mHandler.removeCallbacksAndMessages(null);
            mProgress = 0;
        } else if (v == mAddProgress) {
            mProgress++;
            mLeafLoadingView.setProgress(mProgress);
            mProgressText.setText(String.valueOf(mProgress));
        }
    }
}

layout：

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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=" http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fed255"
    android:orientation="vertical" >
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="100dp"
        android:text="loading ..."
        android:textColor="#FFA800"
        android:textSize=" 30dp" />
 
    <RelativeLayout
        android:id="@+id/leaf_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp" >
 
        <com.baidu.batterysaverDemo.ui.LeafLoadingView
            android:id="@+id/leaf_loading"
            android:layout_width="302dp"
            android:layout_height="61dp"
            android:layout_centerHorizontal="true" />
 
        <ImageView
            android:id="@+id/fan_pic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="35dp"
            android:src="@drawable/fengshan" />
    </RelativeLayout>
 
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >
 
            <LinearLayout
                android:id="@+id/seek_content_one"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp" >
 
                <TextView
                    android:id="@+id/text_ampair"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:textColor="#ffffa800"
                    android:textSize="15dp" />
 
                <SeekBar
                    android:id="@+id/seekBar_ampair"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1" />
            </LinearLayout>
 
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:orientation="horizontal" >
 
                <TextView
                    android:id="@+id/text_disparity"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:textColor="#ffffa800"
                    android:textSize="15dp" />
 
                <SeekBar
                    android:id="@+id/seekBar_distance"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1" />
            </LinearLayout>
 
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:orientation="horizontal" >
 
                <TextView
                    android:id="@+id/text_float_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:textColor="#ffffa800"
                    android:textSize="15dp" />
 
                <SeekBar
                    android:id="@+id/seekBar_float_time"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1" />
            </LinearLayout>
 
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:orientation="horizontal" >
 
                <TextView
                    android:id="@+id/text_rotate_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:textColor="#ffffa800"
                    android:textSize="15dp" />
 
                <SeekBar
                    android:id="@+id/seekBar_rotate_time"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1" />
            </LinearLayout>
 
            <Button
                android:id="@+id/clear_progress"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:text="去除進度條,玩轉弧線"
                android:textSize="18dp" />
 
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:orientation="horizontal" >
 
                <Button
                    android:id="@+id/add_progress"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="增長進度: "
                    android:textSize="18dp" />
 
                <TextView
                    android:id="@+id/text_progress"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:textColor="#ffffa800"
                    android:textSize="15dp" />
            </LinearLayout>
        </LinearLayout>
    </ScrollView>
 
</LinearLayout>

最終效果以下，原本錄了20+s，可是PS只能轉5s，因此有興趣的你們本身運行的玩吧：


20150323014910130.gif

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程