android - 如何在 android 中按住和拖动(重新定位)布局及其关联的布局

Question

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

场景 Activity 在导航栏下方有 map ，中间有一个 RelativeLayout(红色背景)，红色 RelativeLayout 下方有一个 ListView

我想要什么:我想拖动或重新定位(无论其他人可能使用什么术语)红色 RelativeLayout，方法是按住它并在屏幕上上下移动下面的 ListView 也应该随着这个布局移动

我试过的代码:

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 时， ListView 覆盖在该布局上并且没有按我的意愿进行调整。任何类型的帮助将不胜感激。

Answer 1

1. 物质方式

   您可以使用 CoordinatorLayout 将其归档(或者至少非常接近您想要的)并将您的 map 布局保存在 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在这里 Design Support Library (III): Coordinator Layout

2. View.OnTouchListener方式

   (这是你用的那个)

   想法很简单:

   • 设置 map android:layout_above 红色分隔符 & ListView - android:layout_below 红色分隔符
   • 一旦移动 Action 完成 - 分别向上或向下翻译分隔符并设置适当的顶部和底部 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>
   

希望对您有所帮助!