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>

然后我编写了以下代码来动态创建我的视图。因为我希望在一行中有4个圆圈穿过页面（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);

最终结果如下：

我真的不希望圆圈如此大或如此接近，所以我在图像视图中添加了填充和边距：

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

现在，它看起来像这样：

我不希望文本离图像视图太远，看起来当填充减少了图像视图时，它还在图像视图和文本之间添加了额外的空间。

如何让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，您可以使用n技巧轻松地将屏幕宽度划分为layout_weight等分段。据我所知，您只能在LinearLayout s。

中使用此属性

然而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是整个宽度划分的权重。这对于每个细胞产生异质细胞可能是不同的。

More Info

Answer 3

我通过实际利用边缘来找到解决方案。

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

ImageView填充影响我在imageview

3 个答案: