谷歌地图与CollapsingToolbar和NestedScrollView [英] Google Map with CollapsingToolbar and NestedScrollView
问题描述
我正在开发像UBER这样的应用程序。自定义标记的第一个滚动在地图上工作正常。之后,我加入了像UBER一样的NestedScrollView。但是地图滚动手势与AppBar滚动行为冲突。
我不知道该怎么做,请帮助我。
截图
< a href =https://i.stack.imgur.com/KxR2C.png =nofollow noreferrer> 这个是我的代码。
home_fragment .xml
<?xml version =1.0encoding =utf-8?>< ;?xml version =1.0encoding =utf-8?>
< android.support.design.widget.AppBarLayout
android:id =@ + id / appbar
android:layout_width =match_parent
android:layout_height =460dp
android:fitsSystemWindows =true
android:theme =@ style / ThemeOverlay.AppCompat.Dark.ActionBar>
< android.support.design.widget.CollapsingToolbarLayout
android:id =@ + id / collapsing_toolbar
android:layout_width =match_parent
android :layout_height =match_parent
android:fitsSystemWindows =true
app:contentScrim =?attr / colorPrimary
app:expandedTitleMarginEnd =64dp
app:expandedTitleMarginStart = 48dp
app:layout_scrollFlags =scroll | exitUntilCollapsed | snap>
<! - 地图布局从这里开始 - >
< FrameLayout
android:layout_width =match_parent
android:layout_height =match_parent
app:layout_collapseMode =parallax>
< RelativeLayout
android:layout_width =match_parent
android:layout_height =match_parent>
片段
android:id =@ + id / map
android:layout_width =match_parent
android:layout_height =match_parent
class =com.anuj.retrofitparsing.customClasses.MySupportMapFragment>< / fragment>
$ b< ImageView
android:id =@ + id / mylocation
android:layout_width =wrap_content
android:layout_height = wrap_content
android:layout_alignParentBottom =true
android:layout_alignParentRight =true
android:layout_margin =@ dimen / activity_margin_16
android:padding =@ dimen / activity_margin_10
android:src =@ drawable / mylocation/>
< LinearLayout
android:id =@ + id / locationMarker
android:layout_width =wrap_content
android:layout_height =wrap_content
android:layout_centerInParent =true
android:layout_gravity =center
android:layout_marginBottom =30dp
android:gravity =center 垂直 >
TextView
android:id =@ + id / locationMarkertext
android:layout_width =wrap_content
android:layout_height =wrap_content
android:background =@ drawable / setlocation_bg
android:gravity =center
android:minWidth =180dp
android:padding =@ dimen / activity_margin_5
android:paddingLeft =2dp
android:paddingRight =2dp
android:text =设置您的位置
android:textColor =@ color / white/>
< ImageView
android:id =@ + id / imageView1
android:layout_width =wrap_content
android:layout_height =wrap_content
android:src =@ drawable / add_marker/>
< / LinearLayout>
< / RelativeLayout>
$ b $< LinearLayout
android:id =@ + id / search_layout
android:layout_width =match_parent
android:layout_height = wrap_content
android:layout_gravity =top
android:layout_margin =@ dimen / activity_margin_16
android:background =@ drawable / searchbar_bg
android:orientation =垂直
android:padding =@ dimen / activity_margin_5>
TextView
android:id =@ + id / textView1
android:layout_width =wrap_content
android:layout_height =wrap_content
android:layout_marginLeft =10dp
android:text =#Button
android:textAppearance =?android:attr / textAppearanceSmall
android:textColor =#28b54c
android:textSize =@dimen / text_size/>
TextView
android:id =@ + id / adressText
android:layout_width =wrap_content
android:layout_height =wrap_content
android:layout_marginLeft =10dp
android:ellipsize =end
android:singleLine =true
android:text =获取位置 =@ color / app_textcolor
android:textSize =@ dimen / text_size_small/>
< / LinearLayout>
< / FrameLayout>
<! - 地图布局结束于此 - >
< /android.support.design.widget.CollapsingToolbarLayout>
< /android.support.design.widget.AppBarLayout>
< android.support.v4.widget.NestedScrollView
android:id =@ + id / nScrollView
android:layout_width =match_parent
android :layout_height =120dp
android:layout_alignParentBottom =true
app:layout_behavior =@ string / appbar_scrolling_view_behavior>
< /android.support.v4.widget.NestedScrollView>
TouchableWrapper.java
public class TouchableWrapper extends FrameLayout {
public TouchableWrapper(Context context){
super (上下文);
}
@Override
public boolean dispatchTouchEvent(MotionEvent event){
switch(event.getAction()){
case MotionEvent.ACTION_DOWN:
HomeFragment.mMapIsTouched = true;
休息;
case MotionEvent.ACTION_UP:
HomeFragment.mMapIsTouched = false;
休息;
}
返回super.dispatchTouchEvent(event);
}
}
MySupportMapFragment
public class MySupportMapFragment extends SupportMapFragment {
public View mOriginalContentView;
public TouchableWrapper mTouchView;
@Override
public View onCreateView(LayoutInflater inflater,ViewGroup parent,Bundle savedInstanceState){
mOriginalContentView = super.onCreateView(inflater,parent,savedInstanceState);
mTouchView = new TouchableWrapper(getActivity());
mTouchView.addView(mOriginalContentView);
返回mTouchView;
}
@Override
public View getView(){
return mOriginalContentView;
}
}
HomeFragment
googleMap.setOnCameraChangeListener(new GoogleMap.OnCameraChangeListener(){
$ b $ @Override
public void onCameraChange CameraPosition arg0){
// TODO自动生成的方法存根
if(!mMapIsTouched){
//显示外部布局
CommonMethods.getInstance()。e(, );
googleMap.getUiSettings()。setAllGesturesEnabled(true);
}
else {
//隐藏外部布局
CommonMethods。 getInstance()。e(,User is touching MAP);
googleMap.getUiSettings()。setAllGesturesEnabled(false);
}
}
});
经过漫长的搜索,我发现设计中存在错误图书馆,它已经 报告
其中提到,在AppBarLayout中的可滚动容器从来没有正式发布过
支持。
如果下一个版本查看AppBarLayout.Behavior.DragCallback
,可以根据需要禁用拖动处理。
这个 DragCallback
方法可以停止appbar布局内容的拖动效果,并且<$ c
pre $ AppBarLayout appBarLayout =(AppBarLayout)findViewById(R。)$ {$ c> NestedScrollView 像魅力一样工作。 id.appbar_layout);
CoordinatorLayout.LayoutParams params =
(CoordinatorLayout.LayoutParams)appBarLayout.getLayoutParams();
AppBarLayout.Behavior behavior = new AppBarLayout.Behavior();
behavior.setDragCallback(new AppBarLayout.Behavior.DragCallback(){
@Override
public boolean canDrag(AppBarLayout appBarLayout){
return false;
}
});
I am developing app like UBER. First scrolling of custom marker was working fine on map. After that i added NestedScrollView just like UBER. But map scrolling gesture is conflicting with AppBar Scrolling behaviour. I don't know what to do, please help me out.
Screenshot
This is my Code.
home_fragment.xml
<?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="460dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<!-- Map Layout starts here -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.anuj.retrofitparsing.customClasses.MySupportMapFragment"></fragment>
<ImageView
android:id="@+id/mylocation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="@dimen/activity_margin_16"
android:padding="@dimen/activity_margin_10"
android:src="@drawable/mylocation" />
<LinearLayout
android:id="@+id/locationMarker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/locationMarkertext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/setlocation_bg"
android:gravity="center"
android:minWidth="180dp"
android:padding="@dimen/activity_margin_5"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:text=" Set your Location "
android:textColor="@color/white" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/add_marker" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:id="@+id/search_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_margin="@dimen/activity_margin_16"
android:background="@drawable/searchbar_bg"
android:orientation="vertical"
android:padding="@dimen/activity_margin_5">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Selected Location"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#28b54c"
android:textSize="@dimen/text_size" />
<TextView
android:id="@+id/adressText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:ellipsize="end"
android:singleLine="true"
android:text="Getting location"
android:textColor="@color/app_textcolor"
android:textSize="@dimen/text_size_small" />
</LinearLayout>
</FrameLayout>
<!-- Map Layout Ends here -->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/nScrollView"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_alignParentBottom="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
TouchableWrapper.java
public class TouchableWrapper extends FrameLayout {
public TouchableWrapper(Context context) {
super(context);
}
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
HomeFragment.mMapIsTouched = true;
break;
case MotionEvent.ACTION_UP:
HomeFragment.mMapIsTouched = false;
break;
}
return super.dispatchTouchEvent(event);
}
}
MySupportMapFragment
public class MySupportMapFragment extends SupportMapFragment {
public View mOriginalContentView;
public TouchableWrapper mTouchView;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
mOriginalContentView = super.onCreateView(inflater, parent, savedInstanceState);
mTouchView = new TouchableWrapper(getActivity());
mTouchView.addView(mOriginalContentView);
return mTouchView;
}
@Override
public View getView() {
return mOriginalContentView;
}
}
HomeFragment
googleMap.setOnCameraChangeListener(new GoogleMap.OnCameraChangeListener() {
@Override
public void onCameraChange(CameraPosition arg0) {
// TODO Auto-generated method stub
if (!mMapIsTouched) {
// Show Outer layout
CommonMethods.getInstance().e("","User Is not touching MAP");
googleMap.getUiSettings().setAllGesturesEnabled(true);
}
else{
// Hide Outer Layout
CommonMethods.getInstance().e("", "User Is touching MAP");
googleMap.getUiSettings().setAllGesturesEnabled(false);
}
}
});
After long search i found that there is bug in design library and it is already reported
Its mentioned there that
Scrollable containers in an AppBarLayout have never been officially supported.
If the next release have a look at AppBarLayout.Behavior.DragCallback which allows you to disable the drag handling if you need.
This DragCallback
method stop drag effect in appbar layout content and NestedScrollView
is working like charm.
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);
CoordinatorLayout.LayoutParams params =
(CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
AppBarLayout.Behavior behavior = new AppBarLayout.Behavior();
behavior.setDragCallback(new AppBarLayout.Behavior.DragCallback() {
@Override
public boolean canDrag(AppBarLayout appBarLayout) {
return false;
}
});
这篇关于谷歌地图与CollapsingToolbar和NestedScrollView的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!