Внедрите Swiggy, как дизайн карты приложения доставки - PullRequest
Новая
       34

Внедрите Swiggy, как дизайн карты приложения доставки

0 голосов
/ 17 января 2020

Swiggy или любое другое On-Demand Services подобное приложение доставки использует действия карты, подобные изображению ниже enter image description here enter image description here

Я планировал реализовать - 1) Добавление фрагмента / действия API автозаполнения мест. 2) Используйте кнопку текущего местоположения (обозначенную на втором снимке экрана, так как автозаполнение API api мест предоставляет только список местоположений, но не параметр текущего местоположения. 3) Используйте карту, чтобы добавить булавку к пользователю. выбранное место и сделайте его подвижным штифтом, чтобы пользователь мог настроить его / ее местоположение.

Пожалуйста, укажите мне, если я иду в правильном направлении, и какие ресурсы следует соблюдать

1 Ответ

1 голос
/ 17 января 2020

Пожалуйста, попробуйте следующее решение

Добавьте это в ваш xml файл 

<!--Map-->
<LinearLayout
    android:id="@+id/layoutMap"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        <fragment
            android:id="@+id/map"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:name="com.google.android.gms.maps.SupportMapFragment" />

        <LinearLayout
            android:gravity="center"
            android:id="@+id/locationMarker"
            android:layout_centerVertical="true"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/_50sdp"
            android:layout_width="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:gravity="center"
                android:id="@+id/locationMarkertext"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:orientation="vertical">

                <TextView
                    android:background="@drawable/rounded_corner_map"
                    android:gravity="center"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:paddingEnd="@dimen/_10sdp"
                    android:paddingStart="@dimen/_10sdp"
                    android:text="@string/move_map_to_adjust"
                    android:textColor="@android:color/white"
                    android:textSize="@dimen/_9ssp"
                    android:visibility="visible" />

            </LinearLayout>

            <LinearLayout
                android:gravity="center"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/imageMarker"
                    android:layout_height="@dimen/_25sdp"
                    android:layout_marginBottom="@dimen/_55sdp"
                    android:layout_width="@dimen/_25sdp"
                    android:src="@drawable/map_pin" />

            </LinearLayout>

        </LinearLayout>

    </RelativeLayout>

</LinearLayout>

Функция анимации 

private void circleAnimation() {
        GradientDrawable d = new GradientDrawable();
        d.setShape(GradientDrawable.OVAL);
        d.setSize(500, 500);
        d.setColor(0x55dddddd);
        d.setStroke(5, Color.BLACK);

        Bitmap bitmap = Bitmap.createBitmap(d.getIntrinsicWidth()
                , d.getIntrinsicHeight()
                , Bitmap.Config.ARGB_8888);

        // Convert the drawable to bitmap
        Canvas canvas = new Canvas(bitmap);
        d.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        d.draw(canvas);

        // Radius of the circle
        final int radius = 20;

        // Add the circle to the map
        final GroundOverlay circle = mMap.addGroundOverlay(new GroundOverlayOptions()
                .position(mMap.getCameraPosition().target, 2 * radius).image(BitmapDescriptorFactory.fromBitmap(bitmap)));

        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setRepeatMode(ValueAnimator.RESTART);
        valueAnimator.setIntValues(0, radius);
        valueAnimator.setDuration(2000);
        valueAnimator.setEvaluator(new IntEvaluator());
        valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float animatedFraction = valueAnimator.getAnimatedFraction();
                circle.setDimensions(animatedFraction * radius * 2);
            }
        });

        valueAnimator.start();
    }

Добавьте этот код в onMapReady 

@Override
    public void onMapReady(final GoogleMap googleMap) {
        mMap = googleMap;

        mMap.setOnCameraMoveListener(new GoogleMap.OnCameraMoveListener() {
            @Override
            public void onCameraMove() {
                mMap.clear();
            }
        });

        mMap.setOnCameraIdleListener(new GoogleMap.OnCameraIdleListener() {
            @Override
            public void onCameraIdle() {
                latLng = mMap.getCameraPosition().target;
                currLat = latLng.latitude;
                currLong = latLng.longitude;
                Log.e(TAG, "currLat: " + currLat);
                Log.e(TAG, "currLong: " + currLong);
                mMap.clear();
                circleAnimation();
            }
        });
    }

Надеюсь, это поможет Вам!

Спасибо.

...