Question

我想在我的Android应用中重现以下用户界面，但我几乎没有问题。

我使用RelativeLayout
每个圈子都是ImageView
负边距用于CircleLeft和CircleRight

enter image description here

我的尝试：

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/CircleCenter"
        android:layout_marginTop="120dp"
        android:background="@drawable/CircleCenter"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/CircleLeft"
        android:background="@drawable/CircleLeft"
        android:layout_alignTop="@+id/CircleCenter"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="false"
        android:layout_marginLeft="-70dp"
        android:layout_marginTop="-20dp" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/CircleRight"
        android:background="@drawable/CircleRight"
        android:layout_alignTop="@+id/CircleCenter"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="false"
        android:layout_alignParentStart="false"
        android:layout_marginRight="-70dp"
        android:layout_marginTop="-20dp" />

</RelativeLayout>

问题

我认为它不是那么糟糕，但有一个问题：如何获得自动负边距（例如：marginRight = - （ImageView width / 2）？

谢谢！

Answer 1

以编程方式：

RelativeLayout.LayoutParams paramsLeft = (RelativeLayout.LayoutParams) mCircleLeft.getLayoutParams();
paramsLeft.setMargins(mCircleLeft.getMeasuredWidth()/2, marginTop, 0, 0);
// do the same thing for the right image

编辑：如果getMeasuredWidth() = = 0，当您执行代码时，添加一个ViewTreeObserver，他会告诉您何时呈现视图：

ViewTreeObserver vto = mCircleLeft.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
      @Override
      public void onGlobalLayout() {

     // execute the previous code here

      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
           obs.removeOnGlobalLayoutListener(this);
      } else {
           obs.removeGlobalOnLayoutListener(this);
      }

    }
});

Answer 2

解决方案＃1（基于@Andros）

我们需要以编程方式执行此操作。

注意：在系统不呈现它之前，您不能在视图上使用width / height / getMeasuredWidth / getMeasuredHeight（通常来自onCreate / onResume）。因此，我们需要使用ViewTreeObserver (code here)。

查看此示例（我使用RoboGuice简化代码）：

import roboguice.inject.ContentView;
import roboguice.inject.InjectView;

@ContentView(R.layout.activity_foo)
public class FooActivity extends Activity {

    @InjectView(R.id.CircleLeft)
    private ImageView circleLeft;

    @InjectView(R.id.CircleCenter)
    private ImageView circleCenter;

    @InjectView(R.id.CircleRight)
    private ImageView circleRight;

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

        ViewTreeObserver vto = circleLeft.getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {

                RelativeLayout.LayoutParams paramsLeft = (RelativeLayout.LayoutParams) circleLeft.getLayoutParams();
                paramsLeft.setMargins(-circleLeft.getMeasuredWidth()/2, -40, 0, 0);

                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    circleLeft.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                } else {
                    circleLeft.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                }
            }
        });

    }

}

这不完美，因为我必须为imageViewRight创建一个新的ViewTreeObserver ......

也许有更有效的方法可以做到这一点？

编辑：

解决方案＃2

我们可以使用ViewTreeObserver：

而不是.post(new Runnable()

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

    cicleLeft.post(new Runnable() {
        @Override
        public void run() {
            RelativeLayout.LayoutParams paramsLeft = (RelativeLayout.LayoutParams) cicleLeft.getLayoutParams();
            paramsLeft.setMargins(-cicleLeft.getMeasuredWidth()/2, -40, 0, 0);
        }
    });
}

RelativeLayout和ImageView以及自动半边距

2 个答案: