【问题标题】:Button with background color and transparent text具有背景颜色和透明文本的按钮
【发布时间】:2014-05-30 14:07:20
【问题描述】:

我有一个带有一些背景图像的布局,上面有一个按钮。例如,按钮的背景颜色是白色。现在我想在上面写一个文本,使文本通过它显示按钮后面的任何内容(如透明文本)。现在,显然,如果我使文本颜色透明,文本将消失,我将看到一个没有文本的白色按钮。如何做到这一点?

截图:

【问题讨论】:

  • 您可以使用 TextView 并为其提供背景图像。 TextViews 和 Buttons 一样是可点击的。默认情况下,它们的背景是透明的。因此,只需准备一个 png(好的,您要支持的每种分辨率一个),并刻好文字,就完成了。
  • @DerGolem 显然,如果我有一个带有透明文本的 png 图像,它将起作用。我想在不使用任何图像的情况下做到这一点。假设我的应用中有 50-60 个甚至更多按钮。我不能有那么多的图像。所以,我需要一个更好的解决方案。
  • 作为替代方案,您可以制作一个扩展视图的自定义控件,并在 onDraw 方法中从背景填充中分割出文本。
  • 我不知道 HTML 显示在 Android 中有多强大,因为我从来没有机会使用它,但我知道您可以在视图中定义 HTML/CSS 内容。所以也许a solution like this 可能会起作用/帮助你尝试不同的技巧。
  • @indivisible 我猜这只有在phonegap中才有可能。

标签: android


【解决方案1】:

两种方法:(1)不精确的解决方案,因为文本对齐应该手动编码,但是:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Button view1 = new Button(this);

    RelativeLayout layout1 = (RelativeLayout) findViewById(R.id.layout1);
    layout1.setBackground(getResources().getDrawable(R.drawable.choose_background));

    layout1.addView(view1);

    Bitmap mainImage = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888);
    {
        //creating image is not necessary, more important is ability to grab the bitmap.
        Canvas canvas = new Canvas(mainImage);
        canvas.drawColor(Color.WHITE);
        view1.setBackground(new BitmapDrawable(getResources(), mainImage));
    }

    {
        Canvas canvas = new Canvas(mainImage);
        //most interesting part:
        Paint eraserPaint = new Paint();
        eraserPaint.setAlpha(0); //this
        eraserPaint.setTextSize(200);
        eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); //and this
        canvas.drawText("some", 10, 150, eraserPaint);
    }
}

eraserPaint 的想法来自这里Erase bitmap parts using PorterDuff mode 和这里Android how to apply mask on ImageView?

在activity_main.xml中一切都是默认的:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.runup.myapplication2.app.MainActivity">

结果是:

(2) 第二种方法是将此行为添加到类中以便在 xml 中使用它。 https://github.com/togramago/ClearTextViewProject - 带有示例的库项目。您可以将 ClearTextView 类作为库添加或仅复制到您的项目中(因为它是没有 xml 资源的扩展 TextView)。适用于配置更改和动态文本和/或背景更改。

纵向样本的结果:

横向:

【讨论】:

  • +1 干得好!但我想要一个自定义视图,甚至可以在 xml 中使用。您可以使用它制作自定义视图吗?
  • gist.github.com/togramago/7dd276789a39205ee407 将其作为一个类添加到您的项目中,并在 xml 中用作普通文本视图。虽然当您尝试动态更改它时可能会出现一些问题 - 但这只是一个建议。
  • 谢谢,我会尝试使用它!
猜你喜欢
  • 1970-01-01
  • 2011-12-22
  • 2012-07-26
  • 1970-01-01
  • 2014-12-19
  • 2020-04-08
  • 2016-08-02
  • 2013-09-15
  • 1970-01-01
相关资源
最近更新 更多