android：带有文本和背景图像的按钮+使透明区域不可单击

Question

How can I make a button with background image and text on top of it, at the same time the transparent area of background image is not clickable?

As I know,

use ImageButton: have background image(yes), make transparent area not clickable(yes), text(no)

use Button: have background image(yes), make transparent area not clickable(not sure), text(yes)

How can I have 3 'yes' for a single button?

Answer 1

您可以尝试在“框架布局中添加图像”按钮，然后在其上方使用textview，这应该可以解决您的问题

Answer 2

See one thing would be use a custom layout . Take a framelayout for the background , add a centered textview and make just the textview clickable and attach a listener to it for handling its click event

Answer 3

OK I got it: use OnTouchListener() and catch the transparent pixel just like ImageButton, and set text as usual.

Button btn = (Button) findViewById(R.id.btn6);
    btn.setBackground(getResources().getDrawable(R.drawable.ic_launcher));

    // use setOnTouchListener to make transparent area not clickable
    btn.setOnTouchListener(new View.OnTouchListener() {
        public boolean onTouch(View v, MotionEvent event) {

            // get bitmap
            Bitmap bmp = null;
            v.setDrawingCacheEnabled(true);
            v.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH); //Quality of the snapshot(bmp)
            try {
                v.buildDrawingCache(); // UPDATE HERE
                bmp = Bitmap.createBitmap(v.getDrawingCache());
            } finally {
                v.setDrawingCacheEnabled(false);
            }

            // get color of bitmap
            int color = 0;
            try {
                color = bmp.getPixel((int) event.getX(), (int) event.getY());
            } catch (Exception e) {
                e.printStackTrace();
            }

            if (color == Color.TRANSPARENT)
                return false;
            else {

                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        break;
                    case MotionEvent.ACTION_OUTSIDE:
                        break;
                    case MotionEvent.ACTION_CANCEL:
                        break;
                    case MotionEvent.ACTION_MOVE:
                        break;
                    case MotionEvent.ACTION_SCROLL:
                        break;
                    case MotionEvent.ACTION_UP:
                        Toast.makeText(getApplicationContext(), "ACTION UP", Toast.LENGTH_SHORT).show();
                        break;
                    default:
                        break;
                }
                return true;
            }
        }

    });

Answer 4

try something like this,

<RelativeLayout
        android:id="@+id/saveDeleteBar"
        android:layout_width="fill_parent"
        android:layout_height="50dp"

        android:background="@color/purple">

        <TextView
            android:id="@+id/txt1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/imgbtnDrVisitSave"
            android:ellipsize="end"
            android:gravity="left|center_vertical"
            android:paddingLeft="5dp"
            android:singleLine="true"
            android:text=""
            android:textColor="@color/white"
            android:textSize="18dp"
            android:textStyle="normal" />

        <ImageButton
            android:id="@+id/imgbtnDrVisitSave"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:adjustViewBounds="true"
            android:background="@null" //HERE YOU CAN ADD IMAGE
            android:padding="5dp"
            android:scaleType="fitCenter"
            android:src="@drawable/yes_dark" />

    </RelativeLayout>

Answer 5

我认为@amit vaghela所说的最佳实践是考虑其中带有图像和文本的RelativeLayout或LinearLayout并使每个部分都可单击或不按您想要的那样。