内容简介:通过拖拽事件,改变列表的高度
点击实现列表的伸缩,拖拽实现列表的伸缩
一句话原理
通过拖拽事件,改变列表的高度
代码
activity_map.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
android:orientation="vertical">
<include layout="@layout/common_title_lib" />
<com.amap.api.maps.MapView
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="60dp"
android:layout_weight="1"></com.amap.api.maps.MapView>
<LinearLayout
android:id="@+id/ll_line"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@android:color/white"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:id="@+id/cl_top"
android:paddingLeft="16dp"
android:paddingTop="8dp"
android:paddingRight="16dp">
<ImageView
android:layout_width="56dp"
android:layout_height="8dp"
android:src="@drawable/gray_tag"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<ImageView
android:id="@+id/imgVew_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:src="@drawable/red_point"
app:layout_constraintBottom_toTopOf="@id/imgVew_2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv_start_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:textColor="@android:color/black"
app:layout_constraintBottom_toBottomOf="@id/imgVew_1"
app:layout_constraintLeft_toRightOf="@id/imgVew_1"
app:layout_constraintTop_toTopOf="@id/imgVew_1"
tools:text="山西鼎盛钢铁" />
<ImageView
android:id="@+id/imgVew_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingBottom="8dp"
android:src="@drawable/blue_point"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/imgVew_1" />
<TextView
android:id="@+id/tv_end_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:paddingBottom="8dp"
android:textColor="@android:color/black"
app:layout_constraintBottom_toBottomOf="@id/imgVew_2"
app:layout_constraintLeft_toRightOf="@id/imgVew_2"
app:layout_constraintTop_toTopOf="@id/imgVew_2"
tools:text="山西鼎盛钢铁" />
</android.support.constraint.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/edit_hint" />
<android.support.v7.widget.RecyclerView
android:id="@+id/lstVew_line"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
关键逻辑代码
llLine = findViewById(R.id.ll_line);
clTop = findViewById(R.id.cl_top);
llLineMinHight = (int) (ScreenUtil.getScreenHeight(GpsActivity.this) * 0.3 + 0.5);
llLineMaxHight = (int) (ScreenUtil.getScreenHeight(GpsActivity.this) * 0.8 + 0.5);
llLineCurrentHight = llLineMinHight;
ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) llLine.getLayoutParams();
lp.height = llLineMinHight;
llLine.setLayoutParams(lp);
clTop.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 获取当前列表的高度
currentHight = llLine.getLayoutParams().height;
lastY = (int) event.getRawY();
break;
case MotionEvent.ACTION_MOVE:
// 滑动的距离
int dy = (int) event.getRawY() - lastY;
//判断是点击事件还是拖拽事件
if(dy==0){
isClick=true;
}else{
isClick=false;
}
int newHight = currentHight - dy;
//判断拖拽的高度在最大值和最小值之间
if (newHight >= llLineMaxHight) {
llLineCurrentHight = llLineMaxHight;
newHight = llLineMaxHight;
} else if (newHight <= llLineMinHight) {
llLineCurrentHight = llLineMinHight;
newHight = llLineMinHight;
}
llLine.getLayoutParams().height = newHight;
//刷新UI
llLine.requestLayout();
break;
case MotionEvent.ACTION_UP:
// 手指抬起时,获取当前列表的高度
currentHight = llLine.getLayoutParams().height;
// 点击事件的 展开
if (currentHight == llLineMinHight && isClick) {
startPropertyAnimation(llLine, llLineMinHight, llLineMaxHight);
llLineCurrentHight = llLineMaxHight;
}
//如果拖拽的高度接近最大,则缓缓展开
else if (currentHight > llLineMinHight && currentHight <= llLineMaxHight/1.5) {
startPropertyAnimation(llLine, currentHight, llLineMinHight);
llLineCurrentHight = llLineMinHight;
}
//如果拖拽的高度接近最小,则缓缓收缩
else if (currentHight > llLineMaxHight / 1.5 && currentHight < llLineMaxHight) {
startPropertyAnimation(llLine, currentHight, llLineMaxHight);
llLineCurrentHight = llLineMaxHight;
}
//收缩点击事件
else if (currentHight == llLineMaxHight && isClick) {
startPropertyAnimation(llLine, llLineMaxHight, llLineMinHight);
llLineCurrentHight = llLineMinHight;
}
clTop.performClick();
break;
default:
break;
}
return true;
}
});
以上所述就是小编给大家介绍的《仿微信地图的可变化高度的列表页》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 认知的高度 = 人生的高度
- 父div高度不能自适应子div高度的解决方案
- html – 没有固定高度的滚动条/带滚动条的动态高度
- Android XML灵活布局之 EditText实现自适应高度同时限制最小和最大高度
- iOS初级开发学习笔记:一个页面中自动计算cell的高度来自适应tableView的高度
- RN 踩坑:内容区域高度
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Ext JS学习指南
(美)布莱兹、(美)拉姆齐、(美)弗雷德里克 / 孔纯、肖景海、张祖良 / 人民邮电出版社 / 2009-10 / 39.00元
《Ext JS学习指南》系统化地介绍了Ext JS的基础知识,从框架的下载安装到各种常用小部件的实例介绍,从如何自定义小部件到Ext JS代码复用和扩展机制,《Ext JS学习指南》覆盖了Ext JS知识的所有主要方面。作为Web 2.0时代企业应用的一把开发利器,Ext JS为企业应用开发的表现层实现提供了优秀的解决方案。 如果你掌握了HTML,并且了解一般的CSS和JavaScript的......一起来看看 《Ext JS学习指南》 这本书的介绍吧!