影响ImageView的下面我TextView的布局ImageView的填充 [英] ImageView padding affecting my textview layout below the imageview

查看：293
本文介绍了影响ImageView的下面我TextView的布局ImageView的填充的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个类似的东西是什么Facebook已经做过如下：

脸谱组

我已经创建了一个空的RelativeLayout：

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT;的RelativeLayout的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：方向=垂直的android：layout_width =match_parent
    机器人：layout_height =WRAP_CONTENT
    机器人：ID =@ + ID / fav_cake_rl＆GT;
＆LT; / RelativeLayout的＆GT;

然后我写了下面的code动态地创建自己的看法。因为我想在整个页面一行将4圈（Facebook的只有3），我得到我放到下面的code名为DM对象，然后除以4的widthpixels的DisplayMetrics

的布局在recyclerview动态创建的。

  RelativeLayout的RL =（RelativeLayout的）v.findViewById（R.id.fav_cake_rl）;    CircularImageView circularImageView =新CircularImageView（背景）;
    RelativeLayout.LayoutParams circlellp =新RelativeLayout.LayoutParams（dm.widthPixels / 4，dm.widthPixels / 4）;
    circularImageView.setLayoutParams（circlellp）;
    circularImageView.setId（1）;
    可绘制可绘制=（绘制对象）ContextCompat.getDrawable（背景下，R.drawable.cake）;
    circularImageView.setImageDrawable（绘制）;
    rl.addView（circularImageView）;    最终的TextView组名=新的TextView（背景）;
    RelativeLayout.LayoutParams textLp =新RelativeLayout.LayoutParams（dm.widthPixels / 4，RelativeLayout.LayoutParams.WRAP_CONTENT）;
    textLp.addRule（RelativeLayout.BELOW，1）;
    groupname.setLayoutParams（textLp）;
    groupname.setGravity（Gravity.CENTER_HORIZONTAL）;
    groupname.setText（草莓园）;
    rl.addView（组名）;

最后的结果是这样的：

草莓蛋糕

我真的不希望圆那么大或非常接近，所以后来我加入填充和利润率的ImageView的：

  CircularImageView circularImageView =新CircularImageView（背景）;
    RelativeLayout.LayoutParams circlellp =新RelativeLayout.LayoutParams（dm.widthPixels / 4，dm.widthPixels / 4）;
    ** circlellp.setMargins（保证金，保证金，0，0）; **
    circularImageView.setLayoutParams（circlellp）;
    ** circularImageView.setPadding（32，32，32，0）; **
    circularImageView.setId（1）;
    可绘制可绘制=（绘制对象）ContextCompat.getDrawable（背景下，R.drawable.cake）;
    circularImageView.setImageDrawable（绘制）;
    rl.addView（circularImageView）;

现在，它看起来像这样：

增加保证金后strawberrry

我不希望该文本是如此远离ImageView的，看来，虽然有填充减少ImageView的，这也增加了ImageView的和文本之间的额外空间。

我怎样才能获得的TextView和ImageView的要接近对方吗？

更新：

我使用XML试了一下，而不是通过执行以下操作：

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT;的RelativeLayout的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：方向=垂直的android：layout_width =match_parent
    机器人：layout_height =WRAP_CONTENT
    机器人：ID =@ + ID / fav_group_rl＆GT;    ＆LT; com.example.simon.customshapes.CircularImageView
        机器人：layout_width =WRAP_CONTENT
        机器人：layout_height =WRAP_CONTENT
        机器人：ID =@ + ID / circlecake
        机器人：layout_centerHorizo​​ntal =真
        机器人：填充=24dp
        机器人：layout_margin =8DP
        机器人：SRC =@绘制/蛋糕
        /＆GT;    ＆LT;的TextView
        机器人：layout_width =WRAP_CONTENT
        机器人：layout_height =WRAP_CONTENT
        机器人：ID =@用户名/组名
        机器人：文字=草莓园
        机器人：layout_centerHorizo​​ntal =真
        机器人：layout_below =@ + ID / circlecake/＆GT;＆LT; / RelativeLayout的＆GT;

要得到他们的4至正常显示，我尝试这样做：

  RelativeLayout的RL =（RelativeLayout的）v.findViewById（R.id.fav_group_rl）;
        RelativeLayout.LayoutParams LLP =新RelativeLayout.LayoutParams（dm.widthPixels / 4，RelativeLayout.LayoutParams.WRAP_CONTENT）;
        rl.setLayoutParams（LLP）;

当我运行这个程序，是什么也不显示。


解决方案

我找到了解决这个通过实际利润与玩弄到底。

有关的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 =新CircularImageView（背景）;
    RelativeLayout.LayoutParams circlellp =新RelativeLayout.LayoutParams（dm.widthPixels / 4，dm.widthPixels / 4）;
    circlellp.setMargins（保证金，保证金，保证金，0）;
    circularImageView.setLayoutParams（circlellp）;
    circularImageView.setId（1）;
    可绘制可绘制=（绘制对象）ContextCompat.getDrawable（背景下，R.drawable.cake）;
    circularImageView.setImageDrawable（绘制）;
    rl.addView（circularImageView）;    最终的TextView组名=新的TextView（背景）;
    RelativeLayout.LayoutParams textLp =新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（草莓园）;
    rl.addView（组名）;
    groupname.getViewTreeObserver（）。addOnGlobalLayoutListener（新ViewTreeObserver.OnGlobalLayoutListener（）{
        @覆盖
        公共无效onGlobalLayout（）{
            如果（Build.VERSION.SDK_INT＆LT; 16）{
                H = groupname.getHeight（）;
                。groupname.getViewTreeObserver（）removeGlobalOnLayoutListener（本）;
            }其他{
                H = groupname.getHeight（）;
                Log.e（groupnameH：，+ H）;
                。groupname.getViewTreeObserver（）removeOnGlobalLayoutListener（本）;
            }
        }
    }）;    RelativeLayout.LayoutParams LLP =新RelativeLayout.LayoutParams（dm.widthPixels / 4，dm.widthPixels / 3 + H +缘）;
    rl.setLayoutParams（LLP）;

I'm trying to create something similar to what Facebook has done below:

I have created an empty 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>

Then I wrote the following code to dynamically create my views. As I would like 4 circles in one row going across the page (facebook only had 3), I obtained the DisplayMetrics which i placed into an object called "dm" in the code below and then divided the widthpixels by 4.

The layouts are created dynamically in a 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);

The end result looks like this:

I don't really want the circles to be so big or so close together so then I added padding and margin to the imageview:

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

Now, it looks like this:

I do not want the text to be so far away from the imageview and it appears that while the padding has reduce the imageview, it has also added an extra space between the imageview and the text.

How can I get the textview and the imageview to be close to one another?

UPDATE:

I tried it with XML instead by doing the following:

<?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>

To get 4 of them to display properly, I tried this:

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

When I ran this app, nothing was displayed.

解决方案

I found the solution to this by actually playing around with margins in the end.

For the imageView, to reduce the size of the imageview, I had set the margin to some 8dp for top, left and right but not bottom.

Then for the textview, I have set the margin to -8dp for the top to compensate for the margin taken by the imageView at the imageView's top.

Then to draw the actual linearLayout properly, I had to set the linearLayout at the height of the imageView (dm.widthPixels/4), add on the margin at the top of the imageView and then the height of the 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的下面我TextView的布局ImageView的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆