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);