如何在两个布局上放置叠加图像视图?

时间:2018-05-17 06:21:38

标签: android android-layout

我想构建以下屏幕,其中包含应用徽标,成功/失败图标图像,信息消息和确定按钮。

enter image description here

这是代码。我正在使用线性布局来实现这一目标。

<LinearLayout
android:id="@+id/statusLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@android:color/white"
android:weightSum="2"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
    android:id="@+id/statusTopRelativeLayout"
    android:background="@android:color/holo_blue_bright"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:layout_weight="1">
    <ImageView
        android:id="@+id/client_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/no_image_description"
        android:src="@drawable/client_logo"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
    android:id="@+id/statusBottomRelativeLayout"
    android:background="@android:color/holo_blue_light"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">
    <TextView
        android:id="@+id/statusText"           
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="@string/statusText"
        android:textSize="50sp"/>
    <Button
        android:id="@+id/btnOk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/statusText"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"            
        android:clickable="true"
        android:focusable="true"
        android:onClick="goToHomeScreen"
        android:paddingBottom="15dp"
        android:paddingTop="15dp"
        android:text="@string/ok"
        android:textColor="#ffffff"
        android:textSize="40sp"/>
</RelativeLayout>

如何在两个布局之上放置成功/失败图标图像?

3 个答案:

答案 0 :(得分:1)

试试这个

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/nilu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorPrimary"
            android:orientation="vertical"
            android:paddingBottom="30dp">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="NILU" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="NILU" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="NILU" />


        </LinearLayout>

        <LinearLayout
            android:id="@+id/nilu2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/nilu"
            android:layout_weight="1"
            android:background="@color/colorAccent"
            android:orientation="vertical">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="NILU" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="NILU" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="NILU" />

        </LinearLayout>
    </LinearLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@mipmap/ic_launcher_round" />


    </RelativeLayout>


</RelativeLayout>

<强>输出

enter image description here

答案 1 :(得分:1)

您可以使用约束来轻松实现

imageView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (gestureDetector.onTouchEvent(event))
            {
                Toast.makeTest(MainActivity.this, 
                                  "imageView clicked!",Toast.LENGTH_LONG).show();
                return true;
            } else {
                switch (event.getActionMasked()) {
                    case MotionEvent.ACTION_DOWN:
                        initPosX= v.getX();
                        initPosY= v.getY();

                        initTouchX= event.getRawX();
                        initTouchY= event.getRawY();

                        lastAction= event.getAction();

                        return true;

                    case MotionEvent.ACTION_MOVE:
                        v.setX(initPosX+ (int)(event.getRawX() - initTouchX));
                        v.setY(initPosY+ (int)(event.getRawY() - initTouchY));

                        lastAction= event.getAction();
                        return true;

                    case MotionEvent.ACTION_UP:
                        v.setVisibility(View.VISIBLE);
                        lastAction= event.getAction();
                        return true;
                }
            }
            return true;

        }
    });

输出:

enter image description here

答案 2 :(得分:0)

父亲RelativeLayout

  • 将子LinearLayout添加为fillParent并指定权重2.添加两个 布局,每个1重量。 (为每个添加单独的实现 根据您的要求进行布局。)
  • 在亲戚中添加第二个孩子 布局作为该好标志的imageview /按钮并将其设置为中心 父节点。

这将解决您的问题