Question

基本上，我正在开发一个Android UI，其中包含一个浮动操作按钮以及一个弹出窗口。我分别设置了两个不同的布局，一个是activiy_main，另一个是弹出窗口。我的目标是制作与Google Map非常相似的UI。

Context#output_buffer 就像这张图片一样，有一个浮动动作按钮GPS（白色的圆形按钮，位于弹出窗口之外。）

当不显示弹出窗口时，我想使按钮位于mapview的底部（这就是为什么我将main_activity留在coordinatorlayout的原因），并且当它弹出时，按钮应随窗口一起向上移动使其永远超越它。通常我认为我可以通过将它们组织在一个相对的布局中来做到这一点。但是，我想分离两种布局。

是否可以将一个布局中的视图相对于另一个布局中的另一个视图定位？

activity_main.xml

<?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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/linearLayout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">


        <AutoCompleteTextView
            android:id="@+id/search_view"
            android:layout_width="292dp"
            android:layout_height="43dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            app:layout_constraintEnd_toStartOf="@+id/ButtonEnvoyer"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:id="@+id/ButtonEnvoyer"
            android:layout_width="54dp"
            android:layout_height="46dp"
            android:layout_marginTop="4dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:src="@drawable/places_ic_search"
            android:text="Recherche"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/search_view"
            app:layout_constraintTop_toTopOf="parent" />

        <org.osmdroid.views.MapView
            android:id="@+id/map"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/ButtonEnvoyer"
            app:layout_constraintVertical_bias="0.0" />


    </android.support.constraint.ConstraintLayout>


        <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        android:src="@drawable/cursor"
        android:tint="@android:color/black"
        app:backgroundTint="@android:color/holo_blue_dark"
        app:layout_anchorGravity="bottom|right|end" />

</android.support.design.widget.CoordinatorLayout>

popup.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="154dp"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/position"
            android:layout_width="match_parent"
            android:layout_height="154dp"
            android:layout_margin="10dp"
            android:layout_marginTop="30dp"
            android:background="@android:color/white"
            android:gravity="center"
            android:padding="10dp"
            android:text="1333"
            android:textSize="18sp" />


    </LinearLayout>

</LinearLayout>

和弹出窗口：

 public void pop(String pos){

        popupView = View.inflate(this, R.layout.popup, null);
        popupWindow = new PopupWindow(popupView, WindowManager.LayoutParams.MATCH_PARENT,
                WindowManager.LayoutParams.WRAP_CONTENT);
        TextView tv = popupView.findViewById(R.id.position);
        tv.setText(pos);
        popupWindow.setBackgroundDrawable(new BitmapDrawable());
        popupWindow.setFocusable(true);

        popupWindow.setOutsideTouchable(true);

        animation = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 0,
                Animation.RELATIVE_TO_PARENT, 1, Animation.RELATIVE_TO_PARENT, 0);
        animation.setInterpolator(new AccelerateInterpolator());
        animation.setDuration(200);

        popupWindow.showAtLocation(popupView, Gravity.BOTTOM, 10, 10);
        popupView.startAnimation(animation);

    }

Answer 1

您可以使用以下类似的方法扩展pop(String pos)方法的动画，以使Floating Action Button浮动：

首先，应测量弹出窗口的大小，以便计算应翻译的按钮数量（请注意，减去了FAB的底部填充，以便在弹出窗口和FAB之间保持相同的填充）：

popupView.measure(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
int fabTranslationY = popupView.getMeasuredHeight() - fab.getPaddingBottom();

接下来，在弹出窗口上设置一个关闭侦听器，以便在关闭该窗口后，FAB返回到其初始位置：

popupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
        @Override
        public void onDismiss() {
            ObjectAnimator fabAnimator = ObjectAnimator.ofFloat(fab, "translationY", 0);
            fabAnimator.setDuration(200);
            fabAnimator.setInterpolator(new AccelerateInterpolator());
            fabAnimator.start();
        }
    });

最后，构建并启动FAB的翻译动画：

ObjectAnimator fabAnimator = ObjectAnimator.ofFloat(fab, "translationY", -fabTranslationY);
fabAnimator.setDuration(200);
fabAnimator.setInterpolator(new AccelerateInterpolator());
fabAnimator.start();

注意：fab = findViewById(R.id.fab);

不要忘记阅读ObjectAnimator here。

弹出窗口上方的浮动操作按钮

1 个答案: