最近UI设计了这样一个效果 仿照地图底部上拉滑动拖出布局
在网上经过调查 发现scrolllayout这个轮子 下面讲如何使用
1.集成
//向上滑动抽屉 implementation 'com.yinglan.scrolllayout:scrolllayout:1.0.2'
2.布局
<FrameLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="xxx.xxx.xxx.view.home.facilitator.main.MainFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.amap.api.maps.MapView
android:id="@+id/id_main_map"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/id_main_skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:padding="@dimen/dp_10"
android:src="@drawable/bg_home_customer" />
<com.yinglan.scrolllayout.ScrollLayout
android:id="@+id/scroll_down_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="@dimen/dp_10"
android:layout_marginRight="@dimen/dp_10"
android:background="@color/transparent"
app:allowHorizontalScroll="true"
app:exitOffset="0dp"
app:isSupportExit="true"
app:maxOffset="280dp"
app:minOffset="80dp"
app:mode="open">
<com.yinglan.scrolllayout.content.ContentScrollView
android:id="@+id/content_scroll_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/id_ll_open"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:padding="@dimen/dp_10"
android:background="@drawable/bg_item_size"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="告警信息"
android:textColor="@color/text_black"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_10"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/id_main_tmonth"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="@drawable/staff_bg_blue_trans"
android:padding="5dp"
android:text="@string/main_thismonth"
android:textColor="@color/colorWhite" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/id_main_pmonth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="@drawable/staff_bg_gray_trans"
android:padding="5dp"
android:text="@string/main_previous"
android:textColor="@color/text_tip" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:paddingBottom="@dimen/dp_10"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<com.sito.ioammcpv2.widgets.SingleView
android:id="@+id/id_main_chartone"
android:layout_width="match_parent"
android:layout_height="120dp">
</com.sito.ioammcpv2.widgets.SingleView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Ⅰ级告警"
android:textColor="@color/text_soe_i"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:paddingBottom="@dimen/dp_10"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<com.sito.ioammcpv2.widgets.SingleView
android:id="@+id/id_main_charttwo"
android:layout_width="match_parent"
android:layout_height="120dp">
</com.sito.ioammcpv2.widgets.SingleView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Ⅱ级告警"
android:textColor="@color/text_soe_ii"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:paddingBottom="@dimen/dp_10"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<com.sito.ioammcpv2.widgets.SingleView
android:id="@+id/id_main_chartthree"
android:layout_width="match_parent"
android:layout_height="120dp">
</com.sito.ioammcpv2.widgets.SingleView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Ⅲ级告警"
android:textColor="@color/text_soe_iii"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_marginTop="@dimen/dp_10"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/item_bg_top"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/dp_10"
android:text="本月工单处理"
android:textColor="@color/text_black"
android:textSize="14sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="@dimen/dp_10"
android:paddingRight="@dimen/dp_10">
<com.sito.ioammcpv2.widgets.CountView
android:id="@+id/id_main_rout"
android:layout_width="45dp"
android:layout_height="45dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="60dp"
android:layout_weight="1"
android:gravity="left"
android:orientation="horizontal">
<TextView
android:id="@+id/id_rout_total"
android:layout_width="45dp"
android:layout_height="match_parent"
android:gravity="right|center_vertical"
android:text="总数10"
android:textColor="@color/text_black"
android:textSize="12sp" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="@color/white" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/id_rout_normal"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="正常8"
android:textColor="@color/text_normal"
android:textSize="12sp" />
<TextView
android:id="@+id/id_rout_wrong"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="逾期2"
android:textColor="@color/text_soe_ii"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="逾期率"
android:textColor="@color/text_black"
android:textSize="12sp" />
<TextView
android:id="@+id/id_rout_percent"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="20%"
android:textColor="@color/text_soe_ii"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/id_ll_open"
android:background="@drawable/item_bg_bottom"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:background="@color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:paddingLeft="@dimen/dp_10"
android:paddingRight="@dimen/dp_10">
<com.sito.ioammcpv2.widgets.CountView
android:id="@+id/id_main_rush"
android:layout_width="45dp"
android:layout_height="45dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="60dp"
android:layout_weight="1"
android:gravity="left"
android:orientation="horizontal">
<TextView
android:id="@+id/id_rush_total"
android:layout_width="45dp"
android:layout_height="match_parent"
android:gravity="right|center_vertical"
android:text="总数10"
android:textColor="@color/text_black"
android:textSize="12sp" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="@color/white" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/id_rush_normal"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="正常8"
android:textColor="@color/text_normal"
android:textSize="12sp" />
<TextView
android:id="@+id/id_rush_wrong"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="逾期2"
android:textColor="@color/text_soe_ii"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="逾期率"
android:textColor="@color/text_black"
android:textSize="12sp" />
<TextView
android:id="@+id/id_rush_percent"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="20%"
android:textColor="@color/text_soe_ii"
android:textSize="16sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:background="@color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:paddingLeft="@dimen/dp_10"
android:paddingRight="@dimen/dp_10">
<com.sito.ioammcpv2.widgets.CountView
android:id="@+id/id_main_test"
android:layout_width="45dp"
android:layout_height="45dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="60dp"
android:layout_weight="1"
android:gravity="left"
android:orientation="horizontal">
<TextView
android:id="@+id/id_test_total"
android:layout_width="45dp"
android:layout_height="match_parent"
android:gravity="right|center_vertical"
android:text="总数10"
android:textColor="@color/text_black"
android:textSize="12sp" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="@color/white" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/id_test_nomal"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="正常8"
android:textColor="@color/text_normal"
android:textSize="12sp" />
<TextView
android:id="@+id/id_test_wrong"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="逾期2"
android:textColor="@color/text_soe_ii"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="逾期率"
android:textColor="@color/text_black"
android:textSize="12sp" />
<TextView
android:id="@+id/id_test_percent"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="20%"
android:textColor="@color/text_soe_ii"
android:textSize="16sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:background="@color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:paddingLeft="@dimen/dp_10"
android:paddingRight="@dimen/dp_10">
<com.sito.ioammcpv2.widgets.CountView
android:id="@+id/id_main_repair"
android:layout_width="45dp"
android:layout_height="45dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="60dp"
android:layout_weight="1"
android:gravity="left"
android:orientation="horizontal">
<TextView
android:id="@+id/id_repair_total"
android:layout_width="45dp"
android:layout_height="match_parent"
android:gravity="right|center_vertical"
android:text="总数10"
android:textColor="@color/text_black"
android:textSize="12sp" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="@color/white" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/id_repair_normal"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="正常8"
android:textColor="@color/text_normal"
android:textSize="12sp" />
<TextView
android:id="@+id/id_repair_wrong"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="逾期2"
android:textColor="@color/text_soe_ii"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="逾期率"
android:textColor="@color/text_black"
android:textSize="12sp" />
<TextView
android:id="@+id/id_repair_percent"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="20%"
android:textColor="@color/text_soe_ii"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</com.yinglan.scrolllayout.content.ContentScrollView>
</com.yinglan.scrolllayout.ScrollLayout>
</FrameLayout>
</LinearLayout>
</FrameLayout>
首先是刚进入页面 整个页面显示一个地图 底部显示自己想要托出的布局 当上滑拖动时 底部整个布局显示完整 覆盖再地图之上 下滑时可以收回
3.代码控制
private ScrollLayout.OnScrollChangedListener mOnScrollChangedListener = new ScrollLayout.OnScrollChangedListener() {
@Override
public void onScrollProgressChanged(float currentProgress) {
if (currentProgress >= 0) {
float precent = 280 * currentProgress;
if (precent > 280) {
precent = 280;
} else if (precent < 0) {
precent = 0;
}
mScrollLayout.getBackground().setAlpha(255 - (int) precent);
}
}
@Override
public void onScrollFinished(ScrollLayout.Status currentStatus) {
if (currentStatus.equals(ScrollLayout.Status.EXIT)) {
//finish();
}
}
@Override
public void onChildScroll(int top) {
}
};
在你的 Activity或Fragment中定义这个监听 用来监听 布局拖动 可以在布局或者代码中控制布局滑到底部时界面需不需要退出
mScrollLayout = (ScrollLayout) rootView.findViewById(R.id.scroll_down_layout);
mScrollLayout.setOnScrollChangedListener(mOnScrollChangedListener);
mScrollLayout.getBackground().setAlpha(0);
mScrollLayout.setExitOffset(280);
找到滑动控件 实现定义的监听
这里需要注意 你的滑动布局背景以定要设置透明 如下面加粗的 否则 mScrollLayout.getBackground().setAlpha(0); 会报错 ！
<com.yinglan.scrolllayout.ScrollLayout
android:id="@+id/scroll_down_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="@dimen/dp_10"
android:layout_marginRight="@dimen/dp_10"
android:background="@color/transparent"
app:allowHorizontalScroll="true"
app:exitOffset="0dp"
app:isSupportExit="true"
app:maxOffset="280dp"
app:minOffset="80dp"
app:mode="open"/>