点击标记上的谷歌地图从底部滑入 [英] Slide in view from bottom over Google Map on Marker click
问题描述
我想实现以下目标：
模型中的GMaps幻灯片
当我点击标记时，信息视图应从最下面滑入。黑圈是一个浮动操作按钮，它应该在信息窗口的顶部上升，并以信息窗口的上边界为中心。
当我点击任何地方，但在信息窗口，它应该向下滑动并消失。
你能给我一些起点吗？我已经阅读过关于对象动画师和CoordinatorLayout的知识，但我不知道从哪里开始。 您可以自己实现它通过向 MapFragment 的父布局添加底部表格元素，然后设置自定义 OnMarkerClickListener
要使底部工作表工作，您应该使用 CoordinatorLayout 作为 MapFragment 。要创建底部表单元素，您应将 app：layout_behavior =android.support.design.widget.BottomSheetBehavior 设置为布局元素，例如 NestedScrollView 。
<？xml version =1.0encoding =utf-8？ >
< android.support.design.widget.CoordinatorLayout
xmlns：android =http://schemas.android.com/apk/res/android
xmlns：app = http://schemas.android.com/apk/res-auto
xmlns：tools =http://schemas.android.com/toolsandroid：layout_width =match_parent
android ：layout_height =match_parentandroid：fitsSystemWindows =true
tools：context =。MainActivity>
< include layout =@ layout / content_main/>
< android.support.v4.widget.NestedScrollView android：id =@ + id / bottom_sheet
android：layout_width =match_parentandroid：layout_height =550dp
android：background =@ android：color / whiteandroid：clipToPadding =true
app：layout_behavior =android.support.design .widget.BottomSheetBehavior>
< TextView android：id =@ + id / detail_nameandroid：layout_width =0dp
android：layout_height =wrap_contentandroid：layout_margin =25dp
android：layout_weight =3android：gravity =center_vertical
android：textAppearance =？android：textAppearanceLarge/>
< /android.support.v4.widget.NestedScrollView>
地图片段： p>
<？xml version =1.0encoding =utf-8？>
< RelativeLayout 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：paddingBottom =@ dimen / activity_vertical_margin
android：paddingLeft =@ dimen / activity_horizontal_margin
android：paddingRight =@ dimen / activity_horizontal_margin
android：paddingTop =@ dimen / activity_vertical_margin
app：layout_behavior =@ string / appbar_scrolling_view_behavior
tools：context =。MainActivity
tools：showIn =@ layout / app_bar_main>
< fragment
android：layout_width =match_parent
android：layout_height =match_parent
android：id =@ + id / map
android：name =com.google.android.gms.maps.MapFragment/>
< / RelativeLayout>
然后在您的活动课中，您可以在 onCreate（）：
private BottomSheetBehavior bottomSheetBehavior;
private查看bottomSheet;
@Override
protected void onCreate（Bundle savedInstanceState）{
super.onCreate（savedInstanceState）;
setContentView（R.layout.activity_main）;
bottomSheet = findViewById（R.id.bottom_sheet）;
bottomSheetBehavior = BottomSheetBehavior.from（bottomSheet）;
bottomSheetBehavior.setPeekHeight（200）;
bottomSheetBehavior.setHideable（true）;
bottomSheetBehavior.setState（BottomSheetBehavior.STATE_HIDDEN）;
$ / code> 然后修改 onMapReady（）中的地图行为：
@Override
public void onMapReady（GoogleMap googleMap）{
map = googleMap;
map.setOnMarkerClickListener（new GoogleMap.OnMarkerClickListener（）{
@Override
public boolean onMarkerClick（Marker marker）{
updateBottomSheetContent（marker）;
return true;
}
}）;
map.setOnMapClickListener（new GoogleMap.OnMapClickListener（）{
@Override
public void onMapClick（LatLng latLng）{
bottomSheetBehavior.setState（BottomSheetBehavior.STATE_HIDDEN）;
}
}）;
}
private void updateBottomSheetContent（Marker marker）{
TextView name =（TextView）bottomSheet.findViewById（R.id.detail_name）;
name.setText（marker.getTitle（））;
bottomSheetBehavior.setState（BottomSheetBehavior.STATE_COLLAPSED）;
}
当然，您也可以使用存储在标记中的一些数据来查询您的数据库或 ContentProvider 以获得适当的记录，然后使用返回的数据在底部表单中设置更多文本，图像等。
I want to achieve the following: GMaps slide in mockup
The Info view should slide in from the bottom when I click on a marker. The black circle is a Floating Action Button and should rise to the top with the info window and rest with its center at the upper border of the info window.
When I click anywhere but on the info window, it should slide back down and disappear.
Could you give me some starting points? I already read about object animators and the CoordinatorLayout, yet I don't know where to begin.
You can implement it yourself by adding a bottomsheet element to the parent layout of the MapFragment and then setting a custom OnMarkerClickListener.
For the bottom sheet to work, you should use the CoordinatorLayout for the parent of the MapFragment. To create a bottomsheet element, you should set app:layout_behavior="android.support.design.widget.BottomSheetBehaviorto a layout element, such as a NestedScrollView.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true"
tools:context=".MainActivity">
<include layout="@layout/content_main" />
<android.support.v4.widget.NestedScrollView android:id="@+id/bottom_sheet"
android:layout_width="match_parent" android:layout_height="550dp"
android:background="@android:color/white" android:clipToPadding="true"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<TextView android:id="@+id/detail_name" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_margin="25dp"
android:layout_weight="3" android:gravity="center_vertical"
android:textAppearance="?android:textAppearanceLarge" />
</android.support.v4.widget.NestedScrollView>
The map fragment:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="@layout/app_bar_main">
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/map"
android:name="com.google.android.gms.maps.MapFragment"/>
</RelativeLayout>
Then in your activity class, you can set up the bottom sheet initial behaviour in onCreate():
private BottomSheetBehavior bottomSheetBehavior;
private View bottomSheet;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bottomSheet = findViewById(R.id.bottom_sheet);
bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
bottomSheetBehavior.setPeekHeight(200);
bottomSheetBehavior.setHideable(true);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}
Then modify the map behaviour in onMapReady():
@Override
public void onMapReady(GoogleMap googleMap) {
map = googleMap;
map.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
@Override
public boolean onMarkerClick(Marker marker) {
updateBottomSheetContent(marker);
return true;
}
});
map.setOnMapClickListener(new GoogleMap.OnMapClickListener() {
@Override
public void onMapClick(LatLng latLng) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}
});
}
private void updateBottomSheetContent(Marker marker) {
TextView name = (TextView) bottomSheet.findViewById(R.id.detail_name);
name.setText(marker.getTitle());
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
}
Of course, you can also use some data stored in the marker to query your database or ContentProvider for appropriate record and then use the returned data to set more text, images, etc. in the bottom sheet.
这篇关于点击标记上的谷歌地图从底部滑入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![模型中的GMaps幻灯片](\"http://i.stack.imgur.com/Ug0Cf.png\"){kind=link}
