自定義控件之仿QQ側(cè)滑欄

最終效果圖

2017-09-20-02mzZzzz.gif

思路:
打開QQ之后我個(gè)人感覺,QQ的側(cè)滑欄和系統(tǒng)的一個(gè)控件很像,但是由于好奇所以試了一下,感覺近乎完美

        1.有兩個(gè)FrameLayout,一個(gè)測(cè)量時(shí)是全屏幕(中間的),一個(gè)測(cè)量時(shí)是半邊屏根據(jù)QQ的滑動(dòng)初步判斷為1/5,所以獲取當(dāng)前屏幕寬度在除以5[左邊控件寬 = 屏幕寬度 - 屏幕寬度 / 5],就能得到左邊控件所要的寬度,然后使用FragmeLayout的setTranslationX();來移動(dòng)當(dāng)前控件的X位置

全部代碼

package com.example.downlist.view;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.Scroller;

/**
 * Created by Administrator on 2017/9/15.
 */

//仿QQ側(cè)邊欄
public class QQLiftView extends FrameLayout {


    private int startX;
    private int mid = 0;
    private FrameLayout midF;
    private FrameLayout liftF;
    //記錄相加的值
    private int size;
    //防止越界的值
    private int right1;
    private Scroller scroller;

    private int weiht;
    private int liftIntWight;
    private int liftIntWight_;

    public QQLiftView(Context context) {
        super(context);
        initView(context);
    }

    public QQLiftView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    public QQLiftView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }


    public void initView(Context context) {
        scroller = new Scroller(context);
    }


    @Override
    public void computeScroll() {
        super.computeScroll();

        if (scroller.computeScrollOffset()) {
            liftF.setTranslationX(scroller.getCurrX());
            size = scroller.getCurrX();
            midF.setTranslationX(scroller.getCurrX() / 3);
            invalidate();
        }
    }


    private void scToIndex(int index) {
        scroller.startScroll(size, 0, index - size, 0);
        invalidate();

    }

    @Override
    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
        //獲取中間的Fragment
        if (midF == null)
            midF = (FrameLayout) getChildAt(0);
        if (liftF == null)
            liftF = (FrameLayout) getChildAt(1);
        //獲取左邊的Fragment

        right1 = midF.getRight();
        //獲取屏幕寬
        int right = getRight();
        int right5 = right / 5;
        liftF.layout(i, i1, i2, i3);
        liftIntWight = i2 - right5;

        liftIntWight_ = liftIntWight / 3;
        midF.layout(-liftIntWight_, i1, (liftIntWight - liftIntWight_), i3);
        //  measureView(i2 - right5);
        Log.e("----", "onLayout: " + (right - right5));
        weiht = (i2 - right5);
        //獲取子類,重新測(cè)量位置

        //startLayout();
    }

    //開始量測(cè)位置

    public void startLayout() {

        for (int i = 0; i < midF.getChildCount(); i++) {
            midF.getChildAt(i).layout(
                    0,
                    midF.getChildAt(i).getTop(),
                    liftIntWight,
                    midF.getChildAt(i).getBottom()
            );
        }


        for (int i = 0; i < liftF.getChildCount(); i++) {
            liftF.getChildAt(i).layout(
                    liftF.getChildAt(i).getLeft(),
                    liftF.getChildAt(i).getTop(),
                    liftF.getChildAt(i).getRight(),
                    liftF.getChildAt(i).getBottom()
            );
        }

    }

    //獲取要測(cè)量的子類
    public void meIndex() {
        for (int i = 0; i < liftF.getChildCount(); i++) {
            View childAt = liftF.getChildAt(i);
            ViewGroup.LayoutParams layoutParams = childAt.getLayoutParams();
            if (layoutParams == null) {
                layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
            }

            int childMeasureSpec = ViewGroup.getChildMeasureSpec(0, 0, layoutParams.width);

            int height;

            int tempHei = layoutParams.height;

            if (tempHei == 0) {
                height = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
            } else {
                height = MeasureSpec.makeMeasureSpec(tempHei, MeasureSpec.EXACTLY);
            }
            childAt.measure(childMeasureSpec, height);
        }


        for (int i = 0; i < midF.getChildCount(); i++) {
            View childAt = midF.getChildAt(i);
            ViewGroup.LayoutParams layoutParams = childAt.getLayoutParams();
            if (layoutParams == null) {
                layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
            }

            int childMeasureSpec = ViewGroup.getChildMeasureSpec(0, 0, layoutParams.width);

            int height;

            int tempHei = layoutParams.height;

            if (tempHei == 0) {
                height = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
            } else {
                height = MeasureSpec.makeMeasureSpec(tempHei, MeasureSpec.EXACTLY);
            }


            childAt.measure(childMeasureSpec, height);

        }

    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        if (liftF == null) {
            liftF = (FrameLayout) getChildAt(1);
        }

        if (midF == null) {
            midF = (FrameLayout) getChildAt(0);
        }
        //開始測(cè)量
        meIndex();

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                startX = (int) event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                int endX = (int) event.getX();
                mid = endX - startX;
                //scrollBy(-mid, 0);
                ScrollByView(mid);
                startX = endX;
                //invalidate();
                Log.e("----", "onTouchEvent: " + mid);

                break;
            case MotionEvent.ACTION_UP:
                isLiftRight();
                break;

        }
        return true;
    }


    //處理是要左劃還是要往右滑
    private void isLiftRight() {
        //中間值
        int mid = weiht / 2;


        if (size > weiht) {
            liftF.setTranslationX(weiht);
            size = weiht;
            return;
        }

        if (size < 0) {
            liftF.setTranslationX(0);
            size = 0;
            return;
        }


        if (size > mid) {
            //向右
            scToIndex(weiht);
            Log.e("大小", "isLiftRight: " + "向右滑");

        }
        if (size < mid) {
            //向左
            scToIndex(0);
            Log.e("大小", "isLiftRight: " + "向左滑");
        }

    }


    public void ScrollByView(int x) {
        size += x;


        if (size < weiht && size >= 0) {
            liftF.setTranslationX(size);
            midF.setTranslationX(size / 3);
        }


    }

}

//Layout界面代碼

<?xml version="1.0" encoding="utf-8"?>
<com.example.downlist.view.QQLiftView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mySheView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <FrameLayout
        android:id="@+id/mid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#123456">

        <LinearLayout
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="fitXY"
                android:src="@drawable/hxh" />


        </LinearLayout>

    </FrameLayout>

    <FrameLayout
        android:id="@+id/lift"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#654321">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="fitXY"
                android:src="@drawable/hxh" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="dshshfhdskjfhdsf" />

        </LinearLayout>


    </FrameLayout>


</com.example.downlist.view.QQLiftView>

希望以上代碼對(duì)你的自定義控件有所幫助 0.0
如果那塊有不懂得請(qǐng)聯(lián)我喲...0.0 哈哈
----XINHAO_HAN

Demo下載:
鏈接: https://pan.baidu.com/s/1i5P6WML 密碼: 3283

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容