android 自定義view之側(cè)滑效果

200711215441831_2.jpg

效果圖:


這里寫圖片描述

看網(wǎng)上的都是兩個(gè)view拼接癣防,默認(rèn)右側(cè)的不顯示割择,水平移動(dòng)的時(shí)候把右側(cè)的view顯示出來(lái)梧田。但是看最新版QQ上的效果不是這樣的,但給人的感覺(jué)卻很好绝淡,所以獻(xiàn)丑來(lái)一發(fā)比較高仿的铐伴。

知識(shí)點(diǎn):
1瘤睹、ViewDragHelper 的用法朱灿;
2、滑動(dòng)沖突的解決攻臀;
3焕数、自定義viewgroup。

ViewDragHelper 出來(lái)已經(jīng)比較久了 相信大家都比較熟悉茵烈,不熟悉的話google一大把 這里主要簡(jiǎn)單用一下它的幾個(gè)方法
1百匆、tryCaptureView(View child, int pointerId) :確定那個(gè)子view可以滑動(dòng)
2、 getViewHorizontalDragRange(View child):用我蹩腳的英語(yǔ)翻譯一下是‘返回的是子view在水平方向上可移動(dòng)的大小呜投,以像素為單位加匈,返回0的時(shí)候表示水平方向上不能拖動(dòng)’
3、clampViewPositionHorizontal(View child, int left, int dx):在這里可以對(duì)邊界進(jìn)行檢查仑荐,left和dx分別代表即將移動(dòng)到的位置
4雕拼、onViewPositionChanged(View changedView, int left, int top, int dx, int dy):當(dāng)要捕獲view,由于拖曳或者設(shè)定而發(fā)生位置變更時(shí)回調(diào)

它的基本用法是:

  public SwipeLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }
    private void init() {
        viewDragHelper = ViewDragHelper.create(this, callback);
    }
     public boolean onInterceptTouchEvent(MotionEvent ev) {
        boolean result = viewDragHelper.shouldInterceptTouchEvent(ev);
     }

      public boolean onTouchEvent(MotionEvent event) {
        viewDragHelper.processTouchEvent(event);
        return true;
    }

1)粘招、在構(gòu)造方法中創(chuàng)建
2)啥寇、在onInterceptTouchEvent 中判斷是否攔截
3 )、 在 onTouchEvent出來(lái)事件

好了 最不好理解的已經(jīng)搞定了。接下來(lái)看看具體實(shí)現(xiàn):

首先看布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <scrollviewgroup.lly.com.swiplayout.SwipeLayout
        android:id="@+id/swipeLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <!-- delete區(qū)域的布局 -->
        <include layout="@layout/layout_delete" />
        <!-- item內(nèi)容的布局 -->
        <include layout="@layout/layout_content" />
    </scrollviewgroup.lly.com.swiplayout.SwipeLayout>

</LinearLayout>

這個(gè)沒(méi)什么好說(shuō)的辑甜,一個(gè)自定義viewgroup包含兩個(gè)子控件衰絮。 接著看看SwipeLayout是怎么實(shí)現(xiàn)的:

 @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        deleteView = getChildAt(0);
        contentView = getChildAt(1);

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        deleteHeight = deleteView.getMeasuredHeight();
        deleteWidth = deleteView.getMeasuredWidth();
        contentWidth = contentView.getMeasuredWidth();
        screenWidth = getWidth();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right,
                            int bottom) {
        // super.onLayout(changed, left, top, right, bottom);
        deleteView.layout(screenWidth - deleteWidth, 0, (screenWidth - deleteWidth)
                + deleteWidth, deleteHeight);
        contentView.layout(0, 0, contentWidth, deleteHeight);
    }

上面代碼進(jìn)行了一些初始化的操作,重點(diǎn)看看onlayout里面的磷醋,我們繼承的是framelayout 這里先畫(huà)出來(lái) deleteView并讓他在右邊猫牡,然后在上面改了一層contentView,這樣顯示的時(shí)候只會(huì)顯示contentView邓线。

接下來(lái)看ontouch方法

public boolean onTouchEvent(MotionEvent event) {
        //如果當(dāng)前有打開(kāi)的淌友,則下面的邏輯不能執(zhí)行
        if(!SwipeLayoutManager.getInstance().isShouldSwipe(this)){
            requestDisallowInterceptTouchEvent(true);
            return true;
        }

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                downY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                //1.獲取x和y方向移動(dòng)的距離
                float moveX = event.getX();
                float moveY = event.getY();
                float delatX = moveX - downX;//x方向移動(dòng)的距離
                float delatY = moveY - downY;//y方向移動(dòng)的距離
                if(Math.abs(delatX)>Math.abs(delatY)){
                    //表示移動(dòng)是偏向于水平方向,那么應(yīng)該SwipeLayout應(yīng)該處理骇陈,請(qǐng)求父view不要攔截
                    requestDisallowInterceptTouchEvent(true);
                }
                //更新downX震庭,downY
                downX = moveX;
                downY = moveY;
                break;
            case MotionEvent.ACTION_UP:

                break;
        }
        viewDragHelper.processTouchEvent(event);
        return true;
    }

上面主要就是對(duì)事件沖突的處理,當(dāng)是水平移動(dòng)的時(shí)候就請(qǐng)求父視圖不要攔截你雌。

接下來(lái)來(lái)重點(diǎn)就來(lái)了

private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {
        @Override
        public boolean tryCaptureView(View child, int pointerId) {
            return child==contentView;
        }
        @Override
        public int getViewHorizontalDragRange(View child) {
            return deleteWidth;
        }
        @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {
            if(child==contentView){
                if(left>0)left = 0;
                if(left<-deleteWidth)left = -deleteWidth;
            }
            return left;
        }
        @Override
        public void onViewPositionChanged(View changedView, int left, int top,
                                          int dx, int dy) {
            super.onViewPositionChanged(changedView, left, top, dx, dy);
            //判斷開(kāi)和關(guān)閉的邏輯
            if(contentView.getLeft()==0 && currentState!=SwipeState.Close){
                //說(shuō)明應(yīng)該將state更改為關(guān)閉
                currentState = SwipeState.Close;

                //回調(diào)接口關(guān)閉的方法
                if(listener!=null){
                    listener.onClose(getTag());
                }

                //說(shuō)明當(dāng)前的SwipeLayout已經(jīng)關(guān)閉器联,需要讓Manager清空一下
                SwipeLayoutManager.getInstance().clearCurrentLayout();
            }else if (contentView.getLeft()==-deleteWidth && currentState!=SwipeState.Open) {
                //說(shuō)明應(yīng)該將state更改為開(kāi)
                currentState = SwipeState.Open;

                //回調(diào)接口打開(kāi)的方法
                if(listener!=null){
                    listener.onOpen(getTag());
                }
                //當(dāng)前的Swipelayout已經(jīng)打開(kāi),需要讓Manager記錄一下下
                SwipeLayoutManager.getInstance().setSwipeLayout(SwipeLayout.this);
            }
        }
        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            super.onViewReleased(releasedChild, xvel, yvel);
            if(contentView.getLeft()<-deleteWidth/2){
                //應(yīng)該打開(kāi)
                open();
            }else {
                //應(yīng)該關(guān)閉
                close();
            }
        }
    };

上面這段代碼里面的方法一開(kāi)始我們都說(shuō)過(guò)了匪蝙,在來(lái)看下 在tryCaptureView中我們讓 contentView可以滑動(dòng)主籍,在getViewHorizontalDragRange中確定滑動(dòng)范圍是deleteWidth,在clampViewPositionHorizontal中對(duì)邊界進(jìn)行了下限制逛球,在onViewPositionChanged中進(jìn)行狀態(tài)的更新, 最后在手指抬起的時(shí)候讓view自動(dòng)回滾.

/**
     * 打開(kāi)的方法
     */
    public void open() {
        viewDragHelper.smoothSlideViewTo(contentView,-deleteWidth,contentView.getTop());
        ViewCompat.postInvalidateOnAnimation(SwipeLayout.this);
    }
    /**
     * 關(guān)閉的方法
     */
    public void close() {
        viewDragHelper.smoothSlideViewTo(contentView,0,contentView.getTop());
        ViewCompat.postInvalidateOnAnimation(SwipeLayout.this);
    };
    public void computeScroll() {
        if(viewDragHelper.continueSettling(true)){
            ViewCompat.postInvalidateOnAnimation(this);
        }
    }

這里注意一定要重寫computeScroll方法苫昌,不然滑動(dòng)效果動(dòng)一下就不動(dòng)了颤绕。

至此這個(gè)自定義framelayout就完成了

但是發(fā)現(xiàn)一個(gè)問(wèn)題,我們?cè)谝呀?jīng)滑動(dòng)出來(lái)的view中上下滑動(dòng)時(shí)祟身,這個(gè)view的deleteView還是顯示狀態(tài)奥务,所以還要在activity中處理一下:

 recyView.setOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if(dy>0 || dy<0){
                    SwipeLayoutManager.getInstance().closeCurrentLayout();
                }
            }
        });

當(dāng)這個(gè)RecyclerView是上下滑動(dòng)時(shí),讓子view復(fù)位袜硫。 收工氯葬。 ps:本來(lái)是在eclipse中l(wèi)istview中實(shí)現(xiàn)的,但是想想google都已經(jīng)不支持eclipse了婉陷,而listview也快被RecyclerView代替了帚称,所以最后還是切換到Android studio,用RecyclerView實(shí)現(xiàn)了一套秽澳。
github

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末闯睹,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子担神,更是在濱河造成了極大的恐慌楼吃,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異孩锡,居然都是意外死亡酷宵,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門躬窜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)忧吟,“玉大人,你說(shuō)我怎么就攤上這事斩披×镒澹” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,345評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵垦沉,是天一觀的道長(zhǎng)煌抒。 經(jīng)常有香客問(wèn)我,道長(zhǎng)厕倍,這世上最難降的妖魔是什么寡壮? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,851評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮讹弯,結(jié)果婚禮上况既,老公的妹妹穿的比我還像新娘。我一直安慰自己组民,他們只是感情好棒仍,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著臭胜,像睡著了一般莫其。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上耸三,一...
    開(kāi)封第一講書(shū)人閱讀 51,688評(píng)論 1 305
  • 那天乱陡,我揣著相機(jī)與錄音,去河邊找鬼仪壮。 笑死憨颠,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的积锅。 我是一名探鬼主播爽彤,決...
    沈念sama閱讀 40,414評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼乏沸!你這毒婦竟也來(lái)了淫茵?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,319評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤蹬跃,失蹤者是張志新(化名)和其女友劉穎匙瘪,沒(méi)想到半個(gè)月后铆铆,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,775評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡丹喻,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年薄货,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片碍论。...
    茶點(diǎn)故事閱讀 40,096評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡谅猾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出鳍悠,到底是詐尸還是另有隱情税娜,我是刑警寧澤,帶...
    沈念sama閱讀 35,789評(píng)論 5 346
  • 正文 年R本政府宣布藏研,位于F島的核電站敬矩,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏蠢挡。R本人自食惡果不足惜弧岳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望业踏。 院中可真熱鬧禽炬,春花似錦、人聲如沸勤家。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,993評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)却紧。三九已至桐臊,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間晓殊,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,107評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工伤提, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留巫俺,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,308評(píng)論 3 372
  • 正文 我出身青樓肿男,卻偏偏與公主長(zhǎng)得像介汹,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子舶沛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容