如何在 android 中按住和拖动（重新定位）布局及其关联布局

Question

我正在制作一个 android 应用程序。我有一个场景。先看下面的屏幕截图，这样任何来这里回答的人都有我想要的清晰图片。

场景： Activity导航栏下方有地图，中间有一个RelativeLayout（红色背景），红色RelativeLayout下方有一个ListView

我想要什么：我想拖动或重新定位（无论其他人可能使用什么术语）红色 RelativeLayout 按住我的手指并上下移动在屏幕上连同下面的列表视图也应该与此布局一起移动

我试过的代码：

xml布局

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/fifty_five_dp"
            android:id="@+id/topBar"
            android:background="@color/bg_color" >

            <Button
                android:id="@+id/button_menu"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="4dp"
                android:background="@drawable/list_btn"
                android:onClick="toggleMenu" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="Watchover"
                android:textColor="@android:color/white"
                android:textSize="@dimen/eighteen_sp"
                android:textStyle="bold" />
        </RelativeLayout>

        <!-- This is where fragment will show up -->

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/topBar"
            android:id="@+id/root"
            android:background="@android:color/white" >

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/white" >

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

                <RelativeLayout
                    android:id="@+id/redLayout"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/forty_dp"
                    android:layout_centerVertical="true"
                    android:background="@color/btn_color" >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:text="Fences Info"
                        android:textColor="@android:color/white"
                        android:textSize="@dimen/sixteen_sp" />

                    <Button
                        android:id="@+id/btn_drag"
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="4dp"
                        android:background="@drawable/list_btn"
                        android:onClick="toggleMenu"
                        android:visibility="gone" />
                </RelativeLayout>

                <ListView
                    android:id="@+id/list_devices"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/greenBarImage"
                    android:padding="@dimen/five_dp"
                    android:scrollbars="none" />
            </RelativeLayout>
        </FrameLayout>

    </RelativeLayout>

Java代码：

public class MyActivity extends FragmentActivity implements OnTouchListener
{
    private int _xDelta;
    private int _yDelta;
    RelativeLayout redLayout;

    FrameLayout rootLayout;

    ListView devicesList;

    @Override
    protected void onCreate(Bundle arg0) 
    {
        super.onCreate(arg0);

        setContentView(R.layout.main_screen);

        devicesList = (ListView) findViewById(R.id.list_devices);

        rootLayout = (FrameLayout) findViewById(R.id.root);

        redLayout = (RelativeLayout) findViewById(R.id.redLayout);
        redLayout.setOnTouchListener(this);
    }

    @Override
    public boolean onTouch(View view, MotionEvent event) 
    {
        final int X = (int) event.getRawX();
        final int Y = (int) event.getRawY();
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_DOWN:
            RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
            _xDelta = X - lParams.leftMargin;
            _yDelta = Y - lParams.topMargin;
            break;
        case MotionEvent.ACTION_UP:
            break;
        case MotionEvent.ACTION_POINTER_DOWN:
            break;
        case MotionEvent.ACTION_POINTER_UP:
            break;
        case MotionEvent.ACTION_MOVE:
            RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
            layoutParams.leftMargin = X - _xDelta;
            layoutParams.topMargin = Y - _yDelta;
            layoutParams.rightMargin = -250;
            layoutParams.bottomMargin = -250;
            view.setLayoutParams(layoutParams);
            break;
        }
        rootLayout.invalidate();
        return true;
    }
}

获取上述代码帮助的来源here

我试过代码没有得到想要的结果。当我上下拖动红色的 RelativeLayout 时，列表视图覆盖在该布局上并且没有按我的意愿进行调整。任何类型的帮助将不胜感激。

Answer 1

Material 方式

您可以使用 CoordinatorLayout 将其存档（或者至少非常接近您想要的内容）并将地图布局保持在 CollapsingToolbarLayout.

内

您的布局可能如下所示：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <!-- MAP -->
        <RelativeLayout
            ...
            app:layout_collapseMode="parallax">
            .....
        </RelativeLayout>
        <!-- Toolbar -->
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin" />

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

   <!-- This red thingy, if you need it -->
    <View
         android:layout_width="match_parent"
         android:layout_height=".."/>
</android.support.design.widget.AppBarLayout>

<!--List Of your content items -->
<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

您可以在此处阅读更多内容 Android Design Support Library and here Design Support Library (III): Coordinator Layout

View.OnTouchListener 方式

（这是你用的那个）

想法很简单：

设置地图 android:layout_above 红色分隔符 & ListView - android:layout_below 红色分隔符
完成移动操作后 - 分别向上或向下翻译分隔符并设置适当的顶部和底部 mangins

外观如下：

    public class MainActivity extends AppCompatActivity  implements View.OnTouchListener {
        private int _yDelta;
        @Override
        protected void onCreate(Bundle arg0) {
            super.onCreate(arg0);
            setContentView(R.layout.activity_main);
            findViewById(R.id.separator).setOnTouchListener(this);
        }

        @Override
        public boolean onTouch(View view, MotionEvent event) {
            final int Y = (int) event.getRawY();
            switch (event.getAction() & MotionEvent.ACTION_MASK) {
                case MotionEvent.ACTION_DOWN:
                    RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
                    _yDelta = Y - lParams.bottomMargin;
                    break;
                case MotionEvent.ACTION_UP:
                    break;
                case MotionEvent.ACTION_POINTER_DOWN:
                    break;
                case MotionEvent.ACTION_POINTER_UP:
                    break;
                case MotionEvent.ACTION_MOVE:
                    RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view.getLayoutParams();
                    layoutParams.bottomMargin = (Y - _yDelta);
                    layoutParams.topMargin = -layoutParams.bottomMargin;
                    view.setLayoutParams(layoutParams);
                    view.animate().translationY(Y - _yDelta).setDuration(0);
                    break;
            }
            findViewById(R.id.root).invalidate();
            return true;
        }
    }

和activity_main.xml：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/root">
    <View
        android:background="#AA0F00FF"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/separator"/>
    <View
        android:layout_below="@+id/separator"
        android:background="#AA0FF000"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <View
        android:background="#FF0000"
        android:layout_centerVertical="true"
        android:id="@+id/separator"
        android:layout_width="match_parent"
        android:layout_height="20dp" />
</RelativeLayout>

希望对您有所帮助！

如何在 android 中按住和拖动（重新定位）布局及其关联布局

How to hold and drag (re-position) a layout along with its associated layouts in android

android

drag

android-layout