沒有好用的底部抽屜?還不速度自己寫一個

話不多說,先貼出效果圖
這裏寫圖片描述

看到這裏,肯定有人會撓着頭問:“那個…你有沒有….那種….?”
答案肯定是有的啦,繫好安全帶,黑車司機準備開車。

具體思路

思路很簡單:
其實就是巧用佈局,把父佈局設置成FrameLayout,這樣一來,後面的佈局就會蓋住前面的。
把底部抽屜放在最低端,剛進入界面把它滑到底端,留出一個把手。點擊把手,彈出抽屜,基本上抽屜就ok了

搭建界面

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorLightDark"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_question"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="46dp" />

    //這個imageView 其實是就是底部抽屜彈出後界面的一個透明灰色背景
    <ImageView
        android:id="@+id/iv_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" />

    //這個就是我的底部抽屜(裏面包裹的內容可以自己定義)
    <com.bdrk.onlineexams.widgets.ScrollBottomLayout
        android:id="@+id/ll_drawer"
        android:layout_width="match_parent"
        android:layout_height="346dp"
        android:layout_gravity="bottom"
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/rl_handle"
            android:layout_width="match_parent"
            android:layout_height="46dp"
            android:layout_gravity="bottom"
            android:background="@color/colorWhite"
            android:clickable="true"
            android:gravity="center_vertical">

            //這個是底部的把手,點擊彈出抽屜
            <LinearLayout
                android:id="@+id/ll_collect"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/iv_collect"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="16dp"
                    android:src="@mipmap/collected" />

                <TextView
                    android:id="@+id/tv_collect"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="4dp"
                    android:gravity="center"
                    android:text="收藏"
                    android:textColor="@color/colorTextDark"
                    android:textSize="12sp" />
            </LinearLayout>


        <TextView
            android:id="@+id/tv_tip"
            android:layout_width="match_parent"
            android:layout_height="36dp"
            android:background="@color/colorDark"
            android:gravity="center_vertical"
            android:paddingLeft="16dp"
            android:text="第一章:道路交通安全法律"
            android:textColor="@color/colorTextDark"
            android:textSize="14sp" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/re_test_number"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorWhite" />

    </com.bdrk.onlineexams.widgets.ScrollBottomLayout>

</FrameLayout>

我這裏彈出效果是用view的scroll方法,但是該方法沒有那種彈出的效果,於是我就百度出了這個:

public class ScrollBottomLayout extends LinearLayout {
    private Scroller mScroller;

    public ScrollBottomLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        mScroller = new Scroller(context);
    }

    //調用此方法滾動到目標位置
    public void smoothScrollTo(int fx, int fy, int duration) {
        int dx = fx - mScroller.getFinalX();
        int dy = fy - mScroller.getFinalY();
        smoothScrollBy(dx, dy, duration);
    }

    //調用此方法設置滾動的相對偏移
    public void smoothScrollBy(int dx, int dy, int duration) {
        //設置mScroller的滾動偏移量
        mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), dx, dy, duration);
        invalidate();//這裏必須調用invalidate()才能保證computeScroll()會被調用,否則不一定會刷新界面,看不到滾動效果
    }

    @Override
    public void computeScroll() {

        //先判斷mScroller滾動是否完成
        if (mScroller.computeScrollOffset()) {

            //這裏調用View的scrollTo()完成實際的滾動
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());

            //必須調用該方法,否則不一定能看到滾動效果
            postInvalidate();
        }
        super.computeScroll();
    }
}

這樣一來,彈入彈出效果也實現了

使用

這裏貼出我的使用代碼:

onCreate()的時候設置它滑到底部,留出把手。

bottomScoll = SizeUtils.dp2px(PersonalPracticeActivity.this, 300);
        llDrawer.smoothScrollTo(0, -bottomScoll, 0);
圖片設置爲半透明黑色
ivBg.setBackgroundColor(Color.argb(100, 0, 0, 0));

開啓抽屜

private void openDrawer() {
        llDrawer.smoothScrollTo(0, 0, 800);
        ivBg.setVisibility(View.VISIBLE);
        isOpen = true;
    }

關閉抽屜

private void closeDrawer() {
        llDrawer.smoothScrollTo(0, -bottomScoll, 800);
        ivBg.setVisibility(View.GONE);
        isOpen = false;
    }

本來寫完這個是打算加一個滑動開啓跟滑動關閉的功能的,奈何太菜,對view事件處理不是特別熟悉,唉只有以後再填坑了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章