初探起因

?一開(kāi)始接觸到坐標(biāo)系相關(guān)的東西是使用ScrollView抓狭，因?yàn)镾crollView布局限制高度應(yīng)該為wrap_content,所以項(xiàng)目中實(shí)際展示出來(lái)的布局效果和理想中的布局效果發(fā)了偏差谜洽。如果給布局內(nèi)部的控件設(shè)置固定DP的話，又會(huì)有適配的問(wèn)題的出現(xiàn)，所以就在java代碼使用LayoutParams中對(duì)布局高度進(jìn)行動(dòng)態(tài)賦值饥悴，達(dá)到了自己想要的效果故慈。
?后來(lái)看書看到View這部分的時(shí)候，又看到了坐標(biāo)系這一部分的知識(shí)窗慎，加上身邊大佬的Github里也有研究物喷，就打算簡(jiǎn)單先總結(jié)一下，畢竟這個(gè)東西搞懂了遮斥，自定義View的坐標(biāo)相關(guān)以及自己想實(shí)現(xiàn)一些更靈活的效果的話峦失，就更容易了。

流程步驟

?這里大致分為以下幾步：
????????????1. 了解位置參數(shù)
????????????2. 在程序里讓控件可以隨著我們的手指動(dòng)起來(lái)
????????????3. 對(duì)控件的移動(dòng)范圍給予邊界的限制
????????????4.讓控件“聽(tīng)話”

1. 了解布局參數(shù)

?首先我們需要了解一下坐標(biāo)系的概念术吗。這里我們選取了兩個(gè)參照物尉辑，是為了更好的區(qū)別后面的參數(shù)。

參照坐標(biāo).png

位置參數(shù)1.png

位置參數(shù)二.png

?上面已經(jīng)說(shuō)到了子View的四個(gè)參數(shù)屬性结啼，因?yàn)槲覀円屪覸iew隨我們的手指移動(dòng)掠剑，所以在手指接觸屏幕后，我們可以通過(guò)MotionEvent得到點(diǎn)擊當(dāng)時(shí)的x和y坐標(biāo)郊愧，系統(tǒng)為我們提供了getX(),getY(),getRawX(),getRawY()這四個(gè)方法朴译，前兩個(gè)方法是觸摸點(diǎn)相對(duì)于子View左上角原點(diǎn)的x和y坐標(biāo)，后兩個(gè)方法是相對(duì)于手機(jī)屏幕的x和y坐標(biāo)属铁。

位置參數(shù)三.png

2. 在程序里讓控件可以隨著我們的手指動(dòng)起來(lái)

?布局很簡(jiǎn)單，上面我有提到為了區(qū)分參數(shù)所以中間使用了一個(gè)父布局嵌套低葫，當(dāng)然大家也可以不用父布局详羡，直接在根布局下寫一個(gè)ImageView控件仍律。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/rl_parent"
        android:layout_width="300dp"
        android:layout_height="500dp"
        android:layout_centerInParent="true"
        android:background="@color/text_bg">

        <ImageView
            android:id="@+id/iv_test_icon"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/head_icon" />
    </RelativeLayout>
</RelativeLayout>

?寫完布局后嘿悬，我們?cè)贏S中可以預(yù)覽到是這個(gè)樣子

預(yù)覽布局.png

?然后我們?cè)贛ainActivity中就可以開(kāi)始寫我們想要的效果啦。
?因?yàn)槲覀兿胍丶S我們的手指觸摸移動(dòng)水泉，所以在這里我們用到了setOnTouchListener這個(gè)監(jiān)聽(tīng)善涨。上面我們也提到了getX()和getY()這兩個(gè)方法是MotionEvent調(diào)用得到的值窒盐。而MotionEvent這個(gè)對(duì)象我們正好可以在setOnTouchListener下的onTouch方法里拿到這個(gè)對(duì)象。
?說(shuō)到onTouch钢拧，我們還需要知道蟹漓，關(guān)于觸摸，我們會(huì)發(fā)生的狀態(tài)有三種源内，按下葡粒，移動(dòng)，抬起膜钓。相應(yīng)的嗽交，在onTouch方法里的MotionEvent對(duì)象我們可以通過(guò)判斷ACTION_DOWN，ACTION_MOVE颂斜，ACTION_UP來(lái)決定我們的代碼在哪里執(zhí)行夫壁。
?接下來(lái)，我們?cè)?code>ACTION_DOWN的時(shí)候去獲取到x和y的值沃疮，然后在ACTION_MOVE的時(shí)候先計(jì)算我們的坐標(biāo)移動(dòng)的x和y的位移距離盒让，然后再通過(guò)setTranslationX()/setTranslationY()去讓控件跟著改變距離就可以讓我們的控件動(dòng)起來(lái)了！

 ivTestIcon.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                final int x = (int) motionEvent.getX();
                final int y = (int) motionEvent.getY();
                switch (motionEvent.getActionMasked()) {
                    case MotionEvent.ACTION_DOWN:
                        mLastX = x;
                        mLastY = y;
                        break;
                    case MotionEvent.ACTION_MOVE:
                        int xOffset = x - mLastX;//得到X的位移距離
                        int yOffset = y - mLastY;//得到Y(jié)的位移距離 
                        ivTestIcon.setTranslationX(ivTestIcon.getTranslationX() + xOffset);
                        ivTestIcon.setTranslationY(ivTestIcon.getTranslationY() + yOffset);
                        break;
                    case MotionEvent.ACTION_UP:
                        break;
                }
                return true;
            }
        });

?這里需要注意一下的是onTouch的返回值要改為true司蔬，因?yàn)閒alse的話會(huì)攔截之后的動(dòng)作邑茄，執(zhí)行ACTION_DOWN之后就不會(huì)再執(zhí)行之后的動(dòng)作了。
?然后我們就可以看到下面的效果了

成果1.gif

3. 對(duì)控件的移動(dòng)范圍給予邊界的限制

?首先我們得獲取我們子View的寬高和父布局的寬高（這里以我的布局為例子）泉手，目的是為了計(jì)算我們子View的活動(dòng)范圍來(lái)判斷我們的邊界限制條件。然后偶器，我們用父布局的寬度減去子View的寬度就得到了它可以移動(dòng)的X軸的范圍斩萌，同理，我們得到它可以移動(dòng)的Y軸的范圍屏轰。然后因?yàn)槲覀兿鄬?duì)父布局為坐標(biāo)范圍颊郎，所以我們?cè)O(shè)定最小范圍就是0。

ivTestIcon.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                final int x = (int) motionEvent.getX();
                final int y = (int) motionEvent.getY();
                switch (motionEvent.getActionMasked()) {
                    case MotionEvent.ACTION_DOWN:
                        mLastX = x;
                        mLastY = y;
                        break;
                    case MotionEvent.ACTION_MOVE:
                        int xOffset = x - mLastX;//得到X的位移距離
                        int yOffset = y - mLastY;//得到Y(jié)的位移距離
                        final int oldTransX = (int) ivTestIcon.getTranslationX();
                        final int newTransX = oldTransX + xOffset;
                        final int transXLowerLimit = 0;
                        if (newTransX < transXLowerLimit) {
                            xOffset = transXLowerLimit - oldTransX;//X霎苗，left姆吭，邊界判斷
                        }
                        final int transXUpperLimit = parentW - childW;
                        if (newTransX > transXUpperLimit) {
                            xOffset = transXUpperLimit - oldTransX;//X，right,邊界判斷
                        }

                        final int oldTransY = (int) ivTestIcon.getTranslationY();
                        final int newTransY = oldTransY + yOffset;
                        final int transYLowerLimit = 0;
                        if (newTransY < transYLowerLimit) {
                            yOffset = transYLowerLimit - oldTransY;//Y唁盏，top,邊界判斷
                        }
                        final int transYUpperLimit = parentH - childH;
                        if (newTransY > transYUpperLimit) {
                            yOffset = transYUpperLimit - oldTransY;//Y内狸，bottom检眯，邊界判斷
                        }
                        ivTestIcon.setTranslationX(ivTestIcon.getTranslationX() + xOffset);
                        ivTestIcon.setTranslationY(ivTestIcon.getTranslationY() + yOffset);
                        break;
                    case MotionEvent.ACTION_UP:
                        break;
                }
                return true;
            }
        });

?然后我們就可以看到我們?nèi)ove我們的子View的時(shí)候，就不會(huì)有超出父布局的部分了昆淡。

成果2.gif

4.讓控件“聽(tīng)話”

?這里實(shí)現(xiàn)的效果是锰瘸，我們給我們的子View去再次設(shè)定更小的范圍，讓子View在我們ACTION_UP的時(shí)候昂灵，自己置頂或者到底部避凝。這里的子View自己移動(dòng)的部分是使用了屬性動(dòng)畫ObjectAnimator，以后會(huì)寫一個(gè)動(dòng)畫的總結(jié)博客來(lái)總結(jié)自己動(dòng)畫的使用眨补。

        final int transYLimit = parentH - childH;
        final int transYHalfLimit = transYLimit / 2;
        final float translationY = ivTestIcon.getTranslationY();
        if (translationY == 0 || translationY == transYLimit) {
            return;
        }
        if (translationY < transYHalfLimit) {
            mTransAnimator.setDuration((long) (1 * translationY));
            mTransAnimator.setFloatValues(translationY, 0);
        } else {
            mTransAnimator.setDuration((long) (1 * (transYLimit - translationY)));
            mTransAnimator.setFloatValues(translationY, transYLimit);
        }
        mTransAnimator.start();

?然后運(yùn)行恕曲，我們的控件就可以聽(tīng)代碼的話，自動(dòng)置頂或者到底部了

成果3.gif