因为顶层布局是
RelativeLayout
,您将需要使用可用于
相对布局
去实现你想要的。(见
documentation
)
这是一个您想要用xml实现的模型。这个模型将演示我们如何处理实际的解决方案。我使用的是标准视图,但这不重要。此技术将应用于自定义视图。图片来自android studio的设计器,因此没有使用代码创建图片。
活动\主.xml
<RelativeLayout
android:id="@+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="@+id/customView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:background="@android:color/holo_green_light" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignStart="@id/customView"
android:layout_alignTop="@id/customView"
android:src="@drawable/circle"
android:translationX="-10dp"
android:translationY="-10dp" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignEnd="@id/customView"
android:layout_alignTop="@id/customView"
android:src="@drawable/circle"
android:translationX="10dp"
android:translationY="-10dp" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignBottom="@id/customView"
android:layout_alignStart="@id/customView"
android:src="@drawable/circle"
android:translationX="-10dp"
android:translationY="10dp" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignBottom="@id/customView"
android:layout_alignEnd="@id/customView"
android:src="@drawable/circle"
android:translationX="10dp"
android:translationY="10dp" />
</RelativeLayout>
圆.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!-- fill color -->
<solid android:color="@android:color/holo_red_light" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
实际解决方案
现在,我们已经演示了模拟方法的工作原理,现在我们必须在代码中重现这种效果。我们必须添加圆视图并将其定位在父视图中
相对布局
使用
相对布局
查看定位和翻译。下面的代码只显示了左上角的圆,但其他圆将以类似的方式定位。
活动\主.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Drawable circle = ContextCompat.getDrawable(this, R.drawable.circle);
ImageView imageView = new ImageView(this);
imageView.setImageDrawable(circle);
int circleSize = dpToPx(CIRCLE_SIZE_DP);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(circleSize, circleSize);
// Position top left circle within the custom view.
lp.addRule(RelativeLayout.ALIGN_START, R.id.customView);
lp.addRule(RelativeLayout.ALIGN_TOP, R.id.customView);
// Uncomment these 2 lines to position the top left circle with translation.
imageView.setTranslationX(-circleSize / 2);
imageView.setTranslationY(-circleSize / 2);
// Uncomment these 3 lines to position the top left circle with margins.
// View customView = findViewById(R.id.customView);
// lp.leftMargin = customView.getLeft() - circleSize / 2;
// lp.topMargin = customView.getTop() - circleSize / 2;
((RelativeLayout) findViewById(R.id.relativeLayout)).addView(imageView, lp);
}
private int dpToPx(int dp) {
return (int) (dp * getResources().getDisplayMetrics().density);
}
private static final int CIRCLE_SIZE_DP = 20;
}
上面的代码使用了一个缩短的布局:
活动\主.xml
<RelativeLayout
android:id="@+id/relativeLayout"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="@+id/customView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:background="@android:color/holo_green_light" />
</RelativeLayout>
也可以使用边距产生相同的定位。使用页边距的代码已被注释掉,但将起作用。(我认为负利润率也可能起作用,但据我所知
officially supported
,所以我尽量避开它们。)
