Question

我被困住了。问题是如何在静态图像上放置文本并保持位置取决于它在不同的屏幕尺寸之间。为实现这一目标，我尝试了上面的布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/default_view_padding">

    <ImageView
        android:id="@+id/iv_background"
        android:layout_width="500dp"
        android:adjustViewBounds="true"
        android:layout_height="900dp"
        android:layout_centerInParent="true"
        android:src="@drawable/example"/>

    <TextView
        android:layout_alignLeft="@id/iv_background"
        android:layout_alignStart="@id/iv_background"
        android:layout_alignEnd="@id/iv_background"
        android:layout_alignRight="@id/iv_background"
        android:layout_alignTop="@id/iv_background"
        android:layout_width="wrap_content"
        android:layout_marginTop="190dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="Dummy text string"/>

</RelativeLayout>

但在不同的屏幕上，它看起来不同。所以，举个例子，截图。静态图像背景（例如带有绿线的白色图像），nexus5上带有文本的视图，位于nexus7上。如您所见，文本放置在图像上的不同位置。我不知道为什么会这样，因为我使用的是dp和相对布局。

我在图像尺寸上尝试了wrap_content / match_parent，没有任何视图边界等等。它没有帮助。

Ty的答案。

编辑：我希望文本在不同屏幕尺寸的相同距离上始终位于绿线之上。（与第二张图片相同）

EDIT2：有人误解了我，对不起，如果问题不清楚的话。作为示例中的背景，我尝试使用imageview而不是相对布局的背景标记，因为它无论如何都有帮助，我之前尝试过

我在示例中使用的这条线仅用于此。它只需要解释文本定位的问题

Answer 1

使用dimens.xml支持不同大小的屏幕。

在res文件夹中创建一些value文件夹，如：

values-xlarge
values-large
values-small
values-sw800dp
...

在这些文件夹中，您应该dimens.xml并定义尺寸。例如，这可能是您正常屏幕的尺寸：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="ImageViewWidth">500dp</dimen>
    <dimen name="ImageViewHeight">900dp</dimen>
    <dimen name="TextViewMarginTop">190dp</dimen>
</resources>

绝对是大屏幕或xlarge屏幕的尺寸不同！

使用这些，只需将它们放在XML而不是硬编码维

<TextView
    android:layout_alignLeft="@id/iv_background"
    android:layout_alignStart="@id/iv_background"
    android:layout_alignEnd="@id/iv_background"
    android:layout_alignRight="@id/iv_background"
    android:layout_alignTop="@id/iv_background"
    android:layout_width="wrap_content"
    android:layout_marginTop="@dimens/TextViewMarginTop"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:text="Dummy text string"/>

Answer 2

如果您只想将绿色作为文字背景，请在textview上使用android:background并移除ImageView。创建一个底部带有绿线的9Patch图像，并将该图像作为文本的背景。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/abc_ab_transparent_light_holo"
    android:text="Dummy text string"
    android:id="@+id/dummy_text" />

enter image description here

Answer 3

我不知道我是否理解这个问题，但我认为解决方案可能是将RelativeLayout置于另一个竞争者中，即：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
        android:padding="@dimen/default_view_padding" >

        <ImageView
            android:id="@+id/iv_background"
            android:layout_width="500dp"
            android:layout_height="900dp"
            android:layout_centerInParent="true"
            android:adjustViewBounds="true"
            android:src="@drawable/example" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignEnd="@id/iv_background"
            android:layout_alignLeft="@id/iv_background"
            android:layout_alignRight="@id/iv_background"
            android:layout_alignStart="@id/iv_background"
            android:layout_alignTop="@id/iv_background"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="190dp"
            android:gravity="center"
            android:text="Dummy text string" />
    </RelativeLayout>

</LinearLayout>

Answer 4

设置textview的android:gravity="center"，android:layout_centerInParent="true"和android:layout_alignParentTop="true"

Answer 5

像我的样本一样创建自定义视图：

布局 view_product_image.xml

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

    <ImageView
        android:id="@+id/imgProduct"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3dip"
        android:src="@drawable/main0x" />

    <TextView
        android:id="@+id/tvQty"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/imgPoduct"
        android:layout_marginLeft="3dp"
        android:layout_marginTop="2dp"
        android:background="@color/lightBlue3"
        android:text="1111"
        android:textColor="@color/red"
        android:textSize="16dip" />

    <TextView
        android:id="@+id/tvInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/imgProduct"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:lines="2"
        android:maxLines="2"
        android:minLines="2"
        android:singleLine="false"
        android:text="TextView"
        android:textColor="@color/black"
        android:textSize="16dip" />

</RelativeLayout>

<强>类别：

package org.mabna.order.ui;

import org.mabna.order.R;
import org.mabna.order.businessLayer.db.BoPreferences;
import org.mabna.order.utils.Farsi;
import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class ImageView_Product extends LinearLayout implements OnTouchListener {

    private static final float FONT_SIZE_LARGE = 20;
    private static final float FONT_SIZE_NORMAL = 16;
    private static final float FONT_SIZE_SMALL = 12;

    private RelativeLayout rlParent;
    private ImageView imgProduct;
    private TextView tvInfo;
    private TextView tvQty;

    private double qty = 0;
    private float mDensity;

    private Typeface tf;

    public ImageView_Product(Context context) {
        super(context);

        initialize();
    }

    public ImageView_Product(Context context, AttributeSet attrs) {
        super(context, attrs);

        initialize();
    }

    protected void initialize() {

        if (!this.isInEditMode()) {
            tf = Farsi.getFarsiFont(this.getContext());
        }
        mDensity = this.getResources().getDisplayMetrics().density;

        LayoutInflater layoutInflater = (LayoutInflater) getContext()
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = layoutInflater
                .inflate(R.layout.view_product_image, this);

        rlParent = (RelativeLayout) view.findViewById(R.id.rlParent);
        imgProduct = (ImageView) view.findViewById(R.id.imgProduct);
        tvInfo = (TextView) view.findViewById(R.id.tvInfo);
        tvQty = (TextView) view.findViewById(R.id.tvQty);

        tvInfo.setTypeface(tf);
        tvInfo.setTextSize(FONT_SIZE_SMALL);

    }

    public TextView getTextView() {
        return tvInfo;
    }

    public ImageView getImageView() {
        return imgProduct;
    }

    public TextView getQtyView() {
        return tvQty;
    }

    public void setInfoText(String text) {
        tvInfo.setText(text);
    }

    public String getInfoText(String text) {
        return tvInfo.getText().toString();
    }

    public void setQty(double value) {
        this.qty = value;

        if (this.qty > 0) {
            tvQty.setText(BoPreferences.getStringValueNoGrouping(this.qty,
                    getContext()));
            setStateHasQty();

        } else {
            tvQty.setText("");
            setStateHasNotQty();
        }
    }

    public double getQty() {
        return Double.valueOf(tvQty.getText().toString());
    }

    public void setStateSelected() {
        imgProduct.setBackgroundResource(R.drawable.border06);
    }

    public void setStateNotSelected() {
        imgProduct.setBackgroundResource(R.drawable.border05);
    }

    private void setStateHasQty() {
        tvQty.setBackgroundResource(R.color.lightBlueTransparent);
        tvQty.setTextSize(FONT_SIZE_LARGE);
        // tvInfo.setBackgroundResource(R.color.darkGreen);
        rlParent.setBackgroundResource(R.drawable.background_light_green);
    }

    private void setStateHasNotQty() {
        tvQty.setBackgroundResource(0);
        tvQty.setTextSize(FONT_SIZE_NORMAL);
        // tvInfo.setBackgroundResource(R.color.lightBlue3);
        rlParent.setBackgroundResource(R.drawable.background_light_blue);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // TODO Auto-generated method stub
        return false;
    }

    public void setImageSize(int width, int height) {

        RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams)
                imgProduct.getLayoutParams();
        lp.width = (int) (width * mDensity);
        lp.height = (int) (height * mDensity);
        imgProduct.setLayoutParams(lp);

        tvInfo.setMaxWidth(lp.width);

    }

}

Answer 6

使用LinearLayout而不是RelativeLayout：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/iv_background"
        android:layout_width="500dp"
        android:layout_height="900dp"
        android:adjustViewBounds="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="190dp"
        android:gravity="center"
        android:text="Dummy text string" />

</LinearLayout>

第二个解决方案是在TextView中使用android:drawablePadding=""和android:drawableBottom=""。

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawablePadding=""
    android:drawableBottom=""
    android:gravity="center"
    android:text="Dummy text string" >

</TextView>

Answer 7

我想我理解你的问题。在此，我将图片与文字的左侧和右侧对齐，并将ImageView和TextView layout_width设置为wrap_content。我使用android:layout_below并给它一个上边距。

这似乎适用于所有屏幕尺寸。

<?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="match_parent"
                android:background="@android:color/white"
                android:padding="20dp">

    <TextView
        android:id="@+id/tv_example"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="190dp"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="Dummy text string"/>

    <ImageView
        android:id="@+id/iv_background"
        android:layout_width="wrap_content"
        android:layout_height="4dp"
        android:layout_alignLeft="@+id/tv_example"
        android:layout_alignRight="@id/tv_example"
        android:layout_marginTop="4dp"
        android:layout_below="@+id/tv_example"
        android:adjustViewBounds="true"
        android:layout_centerInParent="true"
        android:src="@drawable/example"/>

</RelativeLayout>

如果您愿意，可以更改ImageView的高度和上边距。

在不同屏幕尺寸上匹配相对定位的图像上的文本

7 个答案: