ImageView填充影响了我在imageview下方的textview布局

Question

我正在尝试创建类似于Facebook在以下方面所做的事情：

我创建了一个空的RelativeLayout：

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

然后，我编写了以下代码来动态创建视图。 正如我希望在页面中连续四圈（facebook只有3个）一样，我获得了DisplayMetrics，并将其放入下面的代码中的“ dm”对象中，然后将widthpixels除以4。

布局是在recyclerview中动态创建的。

    RelativeLayout rl = (RelativeLayout) v.findViewById(R.id.fav_cake_rl);

    CircularImageView circularImageView = new CircularImageView(context);
    RelativeLayout.LayoutParams circlellp = new RelativeLayout.LayoutParams(dm.widthPixels/4, dm.widthPixels/4);
    circularImageView.setLayoutParams(circlellp);
    circularImageView.setId(1);
    Drawable drawable = (Drawable) ContextCompat.getDrawable(context, R.drawable.cake);
    circularImageView.setImageDrawable(drawable);
    rl.addView(circularImageView);

    final TextView groupname = new TextView(context);
    RelativeLayout.LayoutParams textLp = new RelativeLayout.LayoutParams(dm.widthPixels/4, RelativeLayout.LayoutParams.WRAP_CONTENT);
    textLp.addRule(RelativeLayout.BELOW, 1);
    groupname.setLayoutParams(textLp);
    groupname.setGravity(Gravity.CENTER_HORIZONTAL);
    groupname.setText("StrawBerry Fields");
    rl.addView(groupname);

最终结果如下所示：

我真的不希望圆圈太大或太靠近，所以我在imageview中添加了padding和margin：

    CircularImageView circularImageView = new CircularImageView(context);
    RelativeLayout.LayoutParams circlellp = new RelativeLayout.LayoutParams(dm.widthPixels/4, dm.widthPixels/4);
    **circlellp.setMargins(margin, margin, 0, 0);**
    circularImageView.setLayoutParams(circlellp);
    **circularImageView.setPadding(32, 32, 32, 0);**
    circularImageView.setId(1);
    Drawable drawable = (Drawable) ContextCompat.getDrawable(context, R.drawable.cake);
    circularImageView.setImageDrawable(drawable);
    rl.addView(circularImageView);

现在，它看起来像这样：

我不希望文本离imageview太远，并且看起来虽然填充减少了imageview，但它还在imageview和文本之间添加了额外的空间。

我如何才能使textview和imageview彼此接近？

更新：

我通过执行以下操作使用XML进行了尝试：

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

    <com.example.simon.customshapes.CircularImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/circlecake"
        android:layout_centerHorizontal="true"
        android:padding="24dp"
        android:layout_margin="8dp"
        android:src="@drawable/cake"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@id/groupname"
        android:text="StrawBerry Fields"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/circlecake"/>

</RelativeLayout>

为了使其中4个可以正确显示，我尝试了以下操作：

        RelativeLayout rl = (RelativeLayout) v.findViewById(R.id.fav_group_rl);
        RelativeLayout.LayoutParams llp = new RelativeLayout.LayoutParams(dm.widthPixels/4, RelativeLayout.LayoutParams.WRAP_CONTENT);
        rl.setLayoutParams(llp);

当我运行该应用程序时，什么都没有显示。

Answer 1

为什么不使用xml创建一个项目并使用适配器在recyclerview中重复它呢？ Xml将在设计视图时为您提供更好的控制，并且无论如何您都在使用recyclerview。

Answer 2

使用XML，您可以使用layout_weight技巧轻松地将屏幕宽度划分为n相等的段。 据我所知，您只能在LinearLayout使用此属性。

但是， LinearLayout不会出错，您当然可以在彼此内部组成多个布局。

让我们回到你的情况。 在您的情况下，您需要一个水平LinearLayout ，然后将其划分为4个相等的单元格。 这可以通过这样的XML代码来完成。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <!-- Cell 1 -->

    </FrameLayout>
    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <!-- Cell 2 -->

    </FrameLayout>
    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <!-- Cell 3 -->

    </FrameLayout>
    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <!-- Cell 4 -->

    </FrameLayout>

</LinearLayout>

注意：这些单元格的layout_width应该为零。 而layout_weight是整个宽度除以的权重。 对于每个细胞而言，对于产生异质细胞而言可能是不同的。

更多信息

Answer 3

我最终通过实际处理边距找到了解决方案。

对于imageView，为了减小imageview的大小，我将顶部，左侧和右侧的边距设置为8dp，但未设置底部。

然后对于textview，我将顶部的边距设置为-8dp，以补偿imageView顶部的imageView所留的边距。

然后，要正确绘制实际的linearLayout，我必须将linearLayout设置为imageView的高度（dm.widthPixels / 4），在imageView的顶部添加边距，然后添加textview的高度（h）。

    RelativeLayout rl = (RelativeLayout) v.findViewById(R.id.fav_group_rl);

    CircularImageView circularImageView = new CircularImageView(context);
    RelativeLayout.LayoutParams circlellp = new RelativeLayout.LayoutParams(dm.widthPixels/4, dm.widthPixels/4);
    circlellp.setMargins(margin, margin, margin, 0);
    circularImageView.setLayoutParams(circlellp);
    circularImageView.setId(1);
    Drawable drawable = (Drawable) ContextCompat.getDrawable(context, R.drawable.cake);
    circularImageView.setImageDrawable(drawable);
    rl.addView(circularImageView);

    final TextView groupname = new TextView(context);
    RelativeLayout.LayoutParams textLp = new RelativeLayout.LayoutParams(dm.widthPixels/4, RelativeLayout.LayoutParams.WRAP_CONTENT);
    textLp.addRule(RelativeLayout.BELOW, 1);
    groupname.setLayoutParams(textLp);
    textLp.setMargins(0,-margin,0,0);
    groupname.setGravity(Gravity.CENTER_HORIZONTAL);
    groupname.setText("StrawBerry Fields");
    rl.addView(groupname);
    groupname.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            if (Build.VERSION.SDK_INT < 16) {
                h = groupname.getHeight();
                groupname.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            } else {
                h = groupname.getHeight();
                Log.e("groupnameH: ", ""+h);
                groupname.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
        }
    });

    RelativeLayout.LayoutParams llp = new RelativeLayout.LayoutParams(dm.widthPixels/4, dm.widthPixels/3+ h + margin);
    rl.setLayoutParams(llp);