ฉันจะให้เอฟเฟกต์การคลิกภาพเหมือนปุ่มบน Android ได้อย่างไร


84

ฉันมี imageview ในแอพ Android ที่ฉันใช้เหมือนกับปุ่มที่มีเหตุการณ์ onClick ให้มา แต่อย่างที่คุณอาจเดาได้ว่ามันไม่ได้ให้เอฟเฟกต์ที่คลิกได้เมื่อคลิกที่ imageview ฉันจะบรรลุสิ่งนั้นได้อย่างไร?

คำตอบ:


53

คุณสามารถออกแบบรูปภาพที่แตกต่างกันสำหรับสถานะคลิก / ไม่คลิกและตั้งค่าใน onTouchListener ได้ดังนี้

final ImageView v = (ImageView) findViewById(R.id.button0);
        v.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View arg0, MotionEvent arg1) {
                switch (arg1.getAction()) {
                case MotionEvent.ACTION_DOWN: {
                    v.setImageBitmap(res.getDrawable(R.drawable.img_down));
                    break;
                }
                case MotionEvent.ACTION_CANCEL:{
                    v.setImageBitmap(res.getDrawable(R.drawable.img_up));
                    break;
                }
                }
                return true;
            }
        });

ทางเลือกที่ดีกว่าคือคุณกำหนดตัวเลือกดังนี้

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"   
        android:drawable="@drawable/img_down" />
    <item android:state_selected="false"   
        android:drawable="@drawable/img_up" />
</selector>

และเลือกภาพในกิจกรรม:

v.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View arg0, MotionEvent arg1) {
                v.setSelected(arg1.getAction()==MotionEvent.ACTION_DOWN);
                return true;
            }
        });

1
คุณช่วยอธิบายได้ไหมว่า res.getDrawable res ทำหน้าที่อะไร
VenushkaT

v.setSelected จะเพียง == true หนึ่งครั้งโดยจะย้ายไปที่ false ทันทีเนื่องจาก MotionEvent.ACTION_MOVE เมื่อปล่อยนิ้วแล้ว MotionEvent.ACTION_UP จะเกิดขึ้น หากใช้วิธีการเลือกให้ใช้ตรรกะแยกต่างหากเพื่อ setSelected หรือ setPressed ถ้า (arg1.getAction () == MotionEvent.ACTION_DOWN) {v.setPressed (จริง); } else if (arg1.getAction () == MotionEvent.ACTION_UP) {v.setPressed (เท็จ); }
Adam Denoon

ควรMotionEvent.ACTION_DOWN || MotionEvent.ACTION_MOVEเก็บภาพไว้นานที่สุดเท่าที่เรากำลังกด
Alaa M.

setOnTouchListener(...คุณไม่จำเป็นต้อง คุณสามารถสร้าง<selector ...>และตั้งค่า ImageView ที่คลิกได้ใน XML เช่น<ImageView ... android:clickable="true" android:focusable="true" android:src="@drawable/my_selector" />
Pierre

76

คุณสามารถทำได้ด้วยภาพเดียวโดยใช้สิ่งนี้:

     //get the image view
    ImageView imageView = (ImageView)findViewById(R.id.ImageView);

    //set the ontouch listener
    imageView.setOnTouchListener(new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN: {
                    ImageView view = (ImageView) v;
                    //overlay is black with transparency of 0x77 (119)
                    view.getDrawable().setColorFilter(0x77000000,PorterDuff.Mode.SRC_ATOP);
                    view.invalidate();
                    break;
                }
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL: {
                    ImageView view = (ImageView) v;
                    //clear the overlay
                    view.getDrawable().clearColorFilter();
                    view.invalidate();
                    break;
                }
            }

            return false;
        }
    });

ฉันอาจจะทำให้สิ่งนี้เป็นคลาสย่อยของ ImageView (หรือ ImageButton เนื่องจากเป็นคลาสย่อยของ ImageView) เพื่อให้สามารถใช้งานซ้ำได้ง่ายขึ้น แต่สิ่งนี้จะช่วยให้คุณใช้รูปลักษณ์ที่ "เลือก" กับมุมมองภาพได้


2
ฉันยังเพิ่มเคสสำหรับ ACTION_CANCEL มันใช้งานได้ดีขอบคุณ!
Alan

โทรดี - ฉันได้เพิ่มตัวเองในรหัสของฉันเอง แต่จะอัปเดตที่นี่ด้วย
Mr Zorn

1
นี่อาจเป็นอีกคำถามหนึ่ง แต่ฉันจะยกเลิกหลังจาก ACTION_UP ได้อย่างไร โดยเฉพาะ ... ผู้ใช้ชมภาพ ผู้ใช้ลากนิ้วออกจากภาพเพื่อยกเลิก แต่การกระทำจะไม่ถูกยกเลิกด้วยรหัสนี้
sudocoder

ฉันจะเพิ่ม MotionEvent ด้วย ACTION_OUTSIDE;)
bonnyz

3
คุณอาจต้องการกลับfalseมิฉะนั้นonClick()เหตุการณ์จริงของวิวจะไม่ถูกยิง
Nimrod Dayan

45

เป็นไปได้ที่จะทำกับไฟล์ภาพเพียงไฟล์เดียวโดยใช้เมธอด ColorFilter อย่างไรก็ตาม ColorFilter คาดว่าจะทำงานร่วมกับ ImageViews ไม่ใช่ปุ่มดังนั้นคุณต้องเปลี่ยนปุ่มของคุณเป็น ImageViews นี่ไม่ใช่ปัญหาถ้าคุณใช้รูปภาพเป็นปุ่มของคุณอยู่แล้ว แต่มันน่ารำคาญกว่าถ้าคุณมีข้อความ ... อย่างไรก็ตามสมมติว่าคุณพบวิธีแก้ปัญหาด้วยข้อความนี่คือรหัสที่จะใช้:

ImageView button = (ImageView) findViewById(R.id.button);
button.setColorFilter(0xFFFF0000, PorterDuff.Mode.MULTIPLY);

ซึ่งใช้การซ้อนทับสีแดงกับปุ่ม (รหัสสีคือรหัสฐานสิบหกสำหรับสีแดงทึบแสง - ตัวเลขสองหลักแรกคือความโปร่งใสจากนั้นคือ RR GG BB)


3
คุณช่วยอธิบายได้ไหมว่าจะเกิดอะไรขึ้นหลังจากที่โค้ดนั้นทำงานและมีจุดประสงค์ให้เรียกใช้งานที่ไหน ฉันพยายามเรียก 2 บรรทัดนี้ในการเริ่มต้น imageView - มันวาดภาพของฉันเป็นสีแดงและไม่มีอะไรเกิดขึ้นไม่ว่าจะคลิกหรือเมื่อสัมผัส เช่นเดียวกับการโทรเมื่อสัมผัส
esteewhy

45

แก้ไข : แม้ว่าคำตอบเดิมด้านล่างจะใช้งานได้และตั้งค่าได้ง่าย แต่โปรดอ้างอิงโพสต์นี้โดยผู้สนับสนุนนักพัฒนา Android ที่ Google หากคุณต้องการ / ต้องการการใช้งานที่มีประสิทธิภาพมากขึ้น โปรดทราบว่าandroid:foregroundแอตทริบิวต์จะมาถึง Views ทั้งหมดรวมถึง ImageView โดยค่าเริ่มต้นใน Android M


ปัญหาในการใช้ตัวเลือกสำหรับ ImageView คือคุณสามารถตั้งค่าเป็นพื้นหลังของมุมมองได้เท่านั้นตราบใดที่ภาพของคุณทึบแสงคุณจะไม่เห็นเอฟเฟกต์ของตัวเลือกที่อยู่ด้านหลัง

เคล็ดลับคือการรวม ImageView ของคุณไว้ใน FrameLayout ด้วยแอตทริบิวต์android:foregroundที่ช่วยให้เรากำหนดภาพซ้อนทับสำหรับเนื้อหาได้ หากเราตั้งค่าandroid:foregroundเป็นตัวเลือก (เช่น?android:attr/selectableItemBackgroundสำหรับ API ระดับ 11+) และแนบเข้าOnClickListenerกับ FrameLayout แทน ImageView ภาพจะถูกวางทับด้วยตัวเลือกที่วาดได้ - เอฟเฟกต์การคลิกที่เราต้องการ!

ดูเถิด:

<FrameLayout
    android:id="@+id/imageButton"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="?android:attr/selectableItemBackground" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/yourImageFile" />

</FrameLayout>

(โปรดทราบว่าควรวางไว้ในเค้าโครงหลักของคุณ)

final View imageButton = findViewById(R.id.imageButton);
imageButton.setOnClickListener(new OnClickListener(){
    @Override
    public void onClick(View view) {
        // do whatever we wish!
    }
});

2
เยี่ยมมาก! นี่เป็นทางออกที่ดีมาก โซลูชันเดียวกับที่ใช้ในแอปพลิเคชันผู้ติดต่อสำหรับ SMS หรือการโทร
Jerry

ไม่ทำงานใน API <11. android: attr / selectableItemBackground ต้องการ API ระดับ 11 (ปัจจุบันขั้นต่ำคือ 8)
MSaudi

มีการselectableItemBackgroundเพิ่มแอตทริบิวต์ใน API ระดับ 11 เท่านั้นดังนั้นคุณต้องใช้ตัวเลือกอื่นหากคุณต้องการใช้โซลูชันนี้สำหรับระดับ API ที่เก่ากว่า ตัวอย่างเช่นสำหรับหนึ่งของการใช้งานของฉันที่ระดับการสนับสนุน API 7 ผมใช้@drawable/list_selector_holo_lightทรัพยากรที่สร้างขึ้นโดยใช้เครื่องมือ Android Holo สีปั่นไฟ
justasm

คุณสามารถบรรลุพฤติกรรมเดียวกันได้โดยใช้เพียง 1 เดียว<ImageButton>กับ selectableItemBackground!
Yohan Dahmani

28

ใช้style = "? android: borderlessButtonStyle"ในไฟล์ XML มันจะแสดงเอฟเฟกต์การคลิกเริ่มต้นของ Android

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" 
    style="?android:borderlessButtonStyle"
/>

1
นี่เป็นคำตอบที่ดีที่สุดง่ายกว่ามาก
FrankMonza

1
สิ่งนี้จะตั้งค่าช่องว่างภายในและแม้ว่าคุณจะตั้งค่าช่องว่างภายในเป็น 0 แต่หากภาพที่คุณให้มานั้นใช้ imageView ทั้งหมดคุณจะไม่เห็นผลใด ๆ จากการคลิก
นักพัฒนา Android

2
@androiddeveloper ใช้android:adjustViewBounds="true"เพื่อยกเลิกการตั้งค่าช่องว่างภายใน
Hafez Divandari

1
ขอแนะนำให้ใช้style="?android:attr/borderlessButtonStyle": developer.android.com/guide/topics/ui/controls/…
Hafez Divandari

ใช้style="?android:actionButtonStyle"สำหรับ ImageView ที่คลิกได้บน ActionBar หรือ ToolBar
palindrom

21

เพียงแค่ใช้ImageButton


3
โดยส่วนตัวแล้วไม่สามารถทำให้มันดูเหมือน ImageView ได้ ไม่มีขอบให้ยืดรูปภาพให้มีขนาดเท่ากับ ImageButton เป็นต้นหากคุณสามารถให้เส้นขอบและปัญหาการยืดได้และอัปเดตโพสต์ของคุณ ชื่อเสียงบางส่วนของฉัน
ตกเป็นของ

15

นี่คือวิธีง่ายๆของฉันในการแก้ปัญหานั้น:

ImageView iv = (ImageView) findViewById(R.id.imageView);

iv.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View arg0) {
        // TODO Auto-generated method stub
        //Agrega porcentajes de cada fraccion de grafica pastel

        Animation animFadein = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_in);

        iv.startAnimation(animFadein);
    });

ในไฟล์ res/anim/fade_in.xml :

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
         android:fillAfter="true" >

<alpha
    android:duration="100"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="1.0" />
 </set>

ทางออกที่ดี - ขอบคุณ! ฉันเลื่อนดูโพสต์นี้โดยพยายามใช้คำที่กระชับทั้งหมด - และไม่ประสบความสำเร็จ ในที่สุดฉันก็มาถึงที่นี่และได้ผลสำหรับฉัน ข้อสังเกตประการหนึ่ง - หากคุณมีปุ่มมากกว่า 2 ปุ่มที่คุณต้องการใช้แอนิเมชั่นกับ .. สำหรับโค้ดของฉันฉันพบว่าฉันจำเป็นต้องสร้างอินสแตนซ์ของออบเจ็กต์แอนิเมชั่นที่ไม่ซ้ำกันสำหรับแต่ละปุ่มที่ฉันต้องการใช้เอฟเฟกต์ การใช้อินสแตนซ์เดิมซ้ำทำให้ปุ่มทั้งหมดกะพริบเมื่อคลิก 1 ครั้ง
ยีนบ่อ

9

ตั้งค่าพื้นหลังที่เลือกได้เป็น ImageView และเพิ่มช่องว่างภายใน จากนั้นแนบไฟล์OnClickListener.

<ImageView
    android:id="@+id/your_image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/your_image"
    android:padding="10dp"
    android:background="?android:attr/selectableItemBackground"/>

มีวิธีใช้โดยไม่ต้องตั้งค่าช่องว่างภายในและทำให้ ImageView ทั้งหมดมีเอฟเฟกต์ไม่ใช่แค่พื้นที่ว่างเปล่า?
นักพัฒนา android

สิ่งนี้จะแสดงการกระเพื่อมเป็นลูกบาศก์เราต้องการระลอกกลาง
Kishan Solanki

8

สำหรับการกำหนดตัวเลือกที่เลือกได้

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"   
        android:drawable="@drawable/img_down" />
    <item android:state_selected="false"   
        android:drawable="@drawable/img_up" />
</selector>

ฉันต้องใช้ android: state_pressed แทน android: state_selected

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed ="true"   
        android:drawable="@drawable/img_down" />
    <item android:state_pressed ="false"   
        android:drawable="@drawable/img_up" />
</selector>

6

หากคุณต้องการระลอกคลื่นเมื่อแตะรหัสนี้สามารถกำหนดได้:

<ImageView
    ...
    android:background="?attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    ...
</ImageView>

ในทำนองเดียวกันคุณสามารถใช้เอฟเฟกต์การคลิกสำหรับ TextView

<TextView
    ...
    android:background="?attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    ...
</TextView>

5

คุณสามารถลองใช้android:background="@android:drawable/list_selector_background" เพื่อให้ได้ผลเช่นเดียวกับ "เพิ่มการปลุก" ใน "นาฬิกาปลุก" ที่เป็นค่าเริ่มต้น (ปัจจุบันคือนาฬิกาตั้งโต๊ะ)


4

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

img.setOnTouchListener(new OnTouchListener(){

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction())
                {
                    case MotionEvent.ACTION_DOWN:
                    {
                        ((ImageView)v).setImageAlpha(200);
                        break;
                    }
                    case MotionEvent.ACTION_MOVE:
                    {
                        // if inside bounds
                        if(event.getX() > 0 && event.getX() < v.getWidth() && event.getY() > 0 && event.getY() < v.getHeight())
                        {
                            ((ImageView)v).setImageAlpha(200);
                        }
                        else
                        {
                            ((ImageView)v).setImageAlpha(255);
                        }

                        break;
                    }
                    case MotionEvent.ACTION_UP:
                    {
                        ((ImageView)v).setImageAlpha(255);
                    }
                }
                return true;
            }

        });

@ แก้ไข: ตามที่ Gunhan กล่าวว่าจะมีปัญหาความเข้ากันได้ย้อนหลังกับเมธอด setImageAlpha ฉันใช้วิธีนี้:

public static void setImageAlpha(ImageView img, int alpha)
    {
        if(Build.VERSION.SDK_INT > 15)
        {
            img.setImageAlpha(alpha);
        }
        else
        {
            img.setAlpha(alpha);
        }
    }

1
setImageAlpha ต้องใช้ API ระดับ 16 ดังนั้นสำหรับแอปที่เข้ากันได้แบบย้อนหลังจะไม่สามารถใช้งานได้
ฮัน

1
@Gunhan จริงๆแล้วคุณสามารถใช้ไลบรารี "nineOldAndroids" ซึ่งอนุญาตให้ใช้อัลฟาได้แม้ใน API รุ่นเก่า เพียงใช้: ViewHelper.setAlpha (มุมมองอัลฟา);
นักพัฒนา Android

4

ฉันทำสิ่งที่คล้ายกันดูว่าเหมาะกับคุณหรือไม่

ดูตัวช่วยผลกด:

  • การใช้งาน: ทำเอฟเฟกต์การกดง่ายๆเช่น iOS

    ใช้งานง่าย:

  • ImageView img = (ImageView) findViewById (R.id.img);

  • ViewPressEffectHelper.attach (img)

https://gist.github.com/extralam/7489370


4

เมื่อรวมกับคำตอบทั้งหมดข้างต้นฉันต้องการให้ ImageView ถูกกดและเปลี่ยนสถานะ แต่ถ้าผู้ใช้ย้ายไปแล้ว "ยกเลิก" และไม่ดำเนินการ onClickListener

ฉันลงเอยด้วยการสร้างวัตถุ Point ภายในคลาสและตั้งค่าพิกัดตามเวลาที่ผู้ใช้กดลงบน ImageView ใน MotionEvent.ACTION_UP ฉันบันทึกจุดใหม่และเปรียบเทียบคะแนน

ฉันสามารถอธิบายได้ดี แต่นี่คือสิ่งที่ฉันทำ

// set the ontouch listener
weatherView.setOnTouchListener(new OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // Determine what action with a switch statement
        switch (event.getAction()) {

        // User presses down on the ImageView, record the original point
        // and set the color filter
        case MotionEvent.ACTION_DOWN: {
            ImageView view = (ImageView) v;

            // overlay is black with transparency of 0x77 (119)
            view.getDrawable().setColorFilter(0x77000000,
                    PorterDuff.Mode.SRC_ATOP);
            view.invalidate();

            p = new Point((int) event.getX(), (int) event.getY());
            break;
        }

        // Once the user releases, record new point then compare the
        // difference, if within a certain range perform onCLick
        // and or otherwise clear the color filter
        case MotionEvent.ACTION_UP: {
            ImageView view = (ImageView) v;
            Point f = new Point((int) event.getX(), (int) event.getY());
            if ((Math.abs(f.x - p.x) < 15)
                    && ((Math.abs(f.x - p.x) < 15))) {
                view.performClick();
            }
            // clear the overlay
            view.getDrawable().clearColorFilter();
            view.invalidate();
            break;
        }
        }
        return true;
    }
});

ฉันมี onClickListener ที่ตั้งค่าบน imageView แต่นี่อาจเป็นวิธีการ


ด้วยการเพิ่มกรณีที่MotionEvent.ACTION_CANCELมีฟังก์ชันการทำงานเดียวกันMotionEvent.ACTION_UPจึงสามารถ "ล้าง" มุมมองได้หากผู้ใช้ทำการ "ลาก" ซึ่งไม่ใช่การคลิก
madlymad

4

คุณสามารถแทนที่setPressedใน ImageView และทำการกรองสีได้ที่นั่นแทนที่จะสร้างตัวฟัง onTouchEvent:

@Override
public void setPressed(boolean pressed) {
    super.setPressed(pressed);

    if(getDrawable() == null)
        return;

    if(pressed) {
        getDrawable().setColorFilter(0x44000000, PorterDuff.Mode.SRC_ATOP);
        invalidate();
    }
    else {
        getDrawable().clearColorFilter();
        invalidate();
    }
}

4

จากคำตอบของคุณ Zornฉันใช้วิธีการคงที่ในคลาสยูทิลิตี้นามธรรมของฉัน:

public abstract class Utility {
...

    public static View.OnTouchListener imgPress(){
        return imgPress(0x77eeddff); //DEFAULT color
    }

    public static View.OnTouchListener imgPress(final int color){
        return new View.OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {

                switch(event.getAction()) {

                    case MotionEvent.ACTION_DOWN: {
                        ImageView view = (ImageView) v;
                        view.getDrawable().setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
                        view.invalidate();
                        break;
                    }

                    case MotionEvent.ACTION_UP:
                        v.performClick();

                    case MotionEvent.ACTION_CANCEL: {
                        ImageView view = (ImageView) v;

                        //Clear the overlay
                        view.getDrawable().clearColorFilter();
                        view.invalidate();
                        break;
                    }
                }

                return true;
            }
        };
    }

    ...
}

จากนั้นฉันจะใช้กับ onTouchListener:

ImageView img=(ImageView) view.findViewById(R.id.image);
img.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) { /* Your click action */ }
});
img_zc.setOnTouchListener(Utility.imgPress()); //Or Utility.imgPress(int_color_with_alpha)

มันง่ายมากถ้าคุณมีรูปภาพจำนวนมากและคุณต้องการเอฟเฟกต์ onTouch แบบง่ายๆโดยไม่ต้องดึง XML ใด ๆ และมีเพียงรูปภาพเดียว




3

ฉันคิดว่า ImageButton เป็นทางออกที่ดีกว่า

<ImageButton
    android:layout_width="96dp"
    android:layout_height="56dp"
    android:src="@mipmap/ic_launcher"
    android:adjustViewBounds="true"
    android:background="@android:color/transparent"
    android:foreground="@drawable/selector" />

2

ฉันมีวิธีแก้ปัญหาความงามมากกว่านี้หากคุณใช้ภาพพื้นหลัง :)

public static void blackButton(View button){
    button.setOnTouchListener(new OnTouchListener() {

        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN: {
                    v.getBackground().setColorFilter(0xf0f47521,PorterDuff.Mode.SRC_ATOP);
                    v.invalidate();
                    break;
                }
                case MotionEvent.ACTION_UP: {
                    v.getBackground().clearColorFilter();
                    v.invalidate();
                    break;
                }
            }
            return false;
        }
    });
}

2

หรือ:

คุณสามารถใช้แบบฟอร์มนี้ด้วยปุ่มรูปภาพ

สร้างไฟล์res/drawable/btn_video.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/image"
        android:state_pressed="true" />
    <item android:drawable="@drawable/ico2"
        android:state_focused="true" />
    <item android:drawable="@drawable/ico2" />
</selector>

และres/layout/activity_main.xml:

<ImageButton
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/imageButton"
    android:layout_gravity="center_horizontal"
    android:onClick="eventImageBtn"
    android:background="@drawable/btn_video"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"
/>

ภาพของคุณจะเปลี่ยนไปด้วยการคลิกและคุณสามารถปรับเปลี่ยนได้ด้วยเค้าโครงเชิงเส้น:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/menu_item_background">

        <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"
                      android:paddingLeft="@dimen/main_screen_side_padding" android:paddingRight="@dimen/main_screen_side_padding" android:paddingTop="@dimen/main_screen_side_padding" android:paddingBottom="@dimen/main_screen_side_padding"
                      android:background="#ffb3ff13" android:weightSum="10.00">


            <LinearLayout android:layout_weight="2.50" android:background="#ff56cfcd" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="0dp" >

                <ImageButton
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/imageButton"
                    android:layout_gravity="center_horizontal"
                    android:onClick="eventImageBtn"
                    android:background="@drawable/btn_video"
                    android:adjustViewBounds="true"
                    android:scaleType="fitXY"
                />
            </LinearLayout>

            <LinearLayout android:layout_weight="0.50" android:layout_height="0dp" android:background="#ffffffff" android:orientation="vertical" android:layout_width="fill_parent" >
            </LinearLayout>

            <LinearLayout android:layout_weight="4.50" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="0dp" android:background="#ff8aa5ff">
            </LinearLayout>

            <LinearLayout android:layout_weight="0.50" android:layout_height="0dp" android:background="#ffffffff" android:orientation="vertical" android:layout_width="fill_parent" >
            </LinearLayout>

            <LinearLayout android:layout_weight="2.00" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="0dp" android:background="#ffff7d1a" >
            </LinearLayout>

        </LinearLayout>
    </LinearLayout>
</ScrollView>

2

นี่คือวิธีแก้ปัญหาของฉันซึ่งการใช้ไลบรารี " nineOldAndroids " รองรับ API เก่าด้วย:

rootView.setOnTouchListener(new OnTouchListener() {

    @Override
    public boolean onTouch(final View v, final MotionEvent event) {

        switch (event.getAction()) {

            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                v.setBackgroundResource(R.drawable.listview_normal);
                ViewHelper.setAlpha(imageView, 1);
                break;

            case MotionEvent.ACTION_DOWN:
                v.setBackgroundResource(0);
                v.setBackgroundColor(getResources().getColor(R.color.listview_pressed));
                ViewHelper.setAlpha(imageView, 0.75f);
                break;
        }
        return false;
    }
});

ถือว่ารูทวิวเป็นเซลล์ (เค้าโครง) และมี imageView เดียวที่คุณต้องการให้ได้รับผลกระทบจากสีที่คุณต้องการใช้กับทั้งเซลล์


แก้ไข: หากคุณต้องการคุณยังสามารถขยาย ImageView เพื่อจัดการเบื้องหน้าและตั้งค่าเป็น "? android: attr / selectableItemBackground" มีห้องสมุดสำหรับการนี้คือที่นี่และสอนเกี่ยวกับวิธีที่จะทำเพื่อมุมมองที่คุณต้องการให้ที่นี่


@madlymad ขอบคุณสำหรับการแก้ไขการจัดรูปแบบโค้ดแม้ว่าฉันคิดว่ามีบางอย่างผิดพลาดกับการเยื้อง อย่างไรก็ตามมันดีพอที่จะอ่านได้ ...
นักพัฒนา android

1

ขอบคุณสำหรับความช่วยเหลือในหัวข้อนี้ อย่างไรก็ตามคุณพลาดสิ่งหนึ่งไป ... คุณต้องจัดการ ACTION_CANCEL ด้วย หากคุณไม่ทำเช่นนั้นคุณอาจกู้คืนค่าอัลฟาของ ImageView ไม่ถูกต้องในกรณีที่มุมมองระดับบนสุดในลำดับชั้นของมุมมองขัดขวางเหตุการณ์การสัมผัส (ให้คิดว่า ScrollView กำลังห่อ ImageView ของคุณ)

นี่คือคลาสที่สมบูรณ์ซึ่งมีพื้นฐานมาจากคลาสข้างต้น แต่ดูแล ACTION_CANCEL ด้วย ใช้คลาสตัวช่วย ImageViewCompat เพื่อสรุปความแตกต่างใน JellyBean API ก่อนโพสต์

public class ChangeAlphaOnPressedTouchListener implements OnTouchListener {

    private final float pressedAlpha;

    public ChangeAlphaOnPressedTouchListener(float pressedAlpha) {
        this.pressedAlpha = pressedAlpha;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        ImageView iv = (ImageView) v;
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            ImageViewCompat.setAlpha(iv, pressedAlpha);
            break;

        case MotionEvent.ACTION_MOVE:
            if (isInsideViewBounds(v, event)) {
                ImageViewCompat.setAlpha(iv, pressedAlpha);
            } else {
                ImageViewCompat.setAlpha(iv, 1f);
            }
            break;
        case MotionEvent.ACTION_UP:
            ImageViewCompat.setAlpha(iv, 1f);
            break;
        case MotionEvent.ACTION_CANCEL:
            ImageViewCompat.setAlpha(iv, 1f);
        }
        return false;
    }

    private static boolean isInsideViewBounds(View v, MotionEvent event) {
        return event.getX() > 0 && event.getX() < v.getWidth() && event.getY() > 0
                && event.getY() < v.getHeight();
    }
}

1

นี่คือรหัสของฉัน แนวคิดคือ ImageView ได้รับฟิลเตอร์สีเมื่อผู้ใช้สัมผัสและฟิลเตอร์สีจะถูกลบออกเมื่อผู้ใช้หยุดสัมผัส

Martin Booka Weser, András, Ah Lam, altosh วิธีแก้ปัญหาไม่ทำงานเมื่อ ImageView มีบนClickEventด้วย worawee.s และ kcoppock (พร้อม ImageButton) ต้องใช้พื้นหลังซึ่งไม่มีความรู้สึกเมื่อ ImageView ไม่โปร่งใส

อันนี้เป็นส่วนเสริมของAZ_แนวคิดเกี่ยวกับฟิลเตอร์สี

class PressedEffectStateListDrawable extends StateListDrawable {

    private int selectionColor;

    public PressedEffectStateListDrawable(Drawable drawable, int selectionColor) {
        super();
        this.selectionColor = selectionColor;
        addState(new int[] { android.R.attr.state_pressed }, drawable);
        addState(new int[] {}, drawable);
    }

    @Override
    protected boolean onStateChange(int[] states) {
        boolean isStatePressedInArray = false;
        for (int state : states) {
            if (state == android.R.attr.state_pressed) {
                isStatePressedInArray = true;
            }
        }
        if (isStatePressedInArray) {
            super.setColorFilter(selectionColor, PorterDuff.Mode.MULTIPLY);
        } else {
            super.clearColorFilter();
        }
        return super.onStateChange(states);
    }

    @Override
    public boolean isStateful() {
        return true;
    }
}

การใช้งาน:

Drawable drawable = new FastBitmapDrawable(bm);
imageView.setImageDrawable(new PressedEffectStateListDrawable(drawable, 0xFF33b5e5));

1

ฉันลองใช้:

<ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/get_started"
        android:src="@drawable/home_started"
        style="?android:borderlessButtonStyle"
        android:adjustViewBounds="true"
        android:clickable="true"
        android:elevation="5dp"
        android:longClickable="true" />

และสิ่งนี้ได้ผล โปรดทราบในบรรทัด:style="?android:borderlessButtonStyle"


วิธีนี้ใช้ไม่ได้ในกรณีของการเว้นระยะห่าง 0 และรูปภาพใช้พื้นที่ทั้งหมดของมุมมอง
นักพัฒนา android

1

ฉันคิดว่าวิธีที่ง่ายที่สุดคือการสร้างไฟล์ XML ใหม่ ในกรณีนี้ให้เรียกว่า "example.xml" ในโฟลเดอร์ drawable และใส่รหัสต่อไปนี้:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/blue"
          android:state_pressed="true" />

</selector>

แต่ก่อนหน้านั้นคุณต้องตั้งค่าสีในไฟล์ colors.xml ในโฟลเดอร์ค่าดังนี้:

<resources>
    <color name="blue">#0000FF</color>
</resources>

นั่นทำให้คุณเพียงแค่ตั้งค่าปุ่ม / ImageButton เพื่อใช้เลย์เอาต์ใหม่เช่นนี้:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/example"
/>

จากนั้นเมื่อคุณคลิกภาพนั้นภาพนั้นจะเปลี่ยนเป็นสีที่กำหนดไว้

<item android:drawable="@color/blue"
      android:state_pressed="true" />

ให้ข้อเสนอแนะที่คุณต้องการ ...


1

นี่เป็นทางออกที่ดีที่สุดที่ฉันเคยเห็น ทั่วไปมากขึ้น

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true" >

    <alpha
        android:duration="100"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />
</set>

2
ควรฉีดในสถานที่และไฟล์ใด
DmitryBoyko

0

ฉันไม่ดังต่อไปนี้ในรูปแบบ XML - มี0 paddingรอบภาพและระลอกontopของภาพ:

<ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@drawable/my_image"
    android:clickable="true"
    android:focusable="true"
    android:src="?android:attr/selectableItemBackground" />


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.