話不多說,先貼出效果圖
看到這裏,肯定有人會撓着頭問:“那個…你有沒有….那種….?”
答案肯定是有的啦,繫好安全帶,黑車司機準備開車。
具體思路
思路很簡單:
其實就是巧用佈局,把父佈局設置成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事件處理不是特別熟悉,唉只有以後再填坑了。