Android 사용자 정의 컨트롤 ImageView 클릭 후 그림자 효과 발생

오늘 미 공 은 직접 저 에 게 그림 한 장 을 주 었 습 니 다.그림 클릭 을 한 후에 그림자 효과 가 있 으 라 고 했 습 니 다.그 때 는 ImageButton 이 생각 났 습 니 다.그 러 자 Demo 를 썼 습 니 다.ImageButton 이 ImageView 를 계승 하면 기본 적 인 배경 스타일 이 있 고 구조 에서 src(전망)를 디자인 하 는 것 이 너무 못 생 겨 서 사용자 정의 컨트롤 인 ImageView 를 써 서 클릭 을 한 후에클릭 영역 에 회색 그림자 효과 가 있 습 니 다.다음 과 같 습 니 다.

감청 리 턴 등 추가 하기;
레이아웃 파일 코드:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
 xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:id="@+id/activity_main" 
 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.hanzheng.imagebutton.MainActivity" 
 android:orientation="vertical"> 
 
 
 <ImageButton 
  android:id="@+id/button" 
  android:layout_width="100dp" 
  android:layout_height="100dp" 
  android:src="#ff0000" 
  /> 
 
 
 <com.hanzheng.imagebutton.ClickImageView 
  android:layout_marginTop="10dp" 
  android:id="@+id/clickimageview" 
  android:clickable="true" 
  android:src="@drawable/flow" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content"/> 
 
 
 <com.hanzheng.imagebutton.ClickImageView 
  android:layout_marginTop="10dp" 
  android:id="@+id/clickimageview2" 
  android:clickable="true" 
  android:src="#0f0" 
  android:layout_width="100dp" 
  android:layout_height="100dp"/> 
</LinearLayout> 
메모:컨트롤 에 사용 할 src 속성 을 사용자 정의 합 니 다.background 를 사용 하면 효력 을 잃 습 니 다.
ImageView 에서 xml 속성 src 와 background 의 차이 점:
background 는 ImageView 구성 요소 가 지정 한 길이 와 너비 에 따라 스 트 레 칭 을 하고 src 는 원 그림 의 크기 를 저장 하 며 스 트 레 칭 을 하지 않 습 니 다.src 는 그림 내용(전경)이 고 bg 는 배경 이 며 동시에 사용 할 수 있 습 니 다.
그 밖 에 scale Type 은 src 에 만 작용 합 니 다.bg 는 투명 도 를 설정 할 수 있 습 니 다.예 를 들 어 ImageButton 에서 Android:scaleType 으로 그림 의 크기 를 조절 할 수 있 습 니 다.제어 하 는 그림 은 배경 이 아 닌 자원 입 니 다.즉,android:src="@drawable/logo"입 니 다.android:background="@drawable/logo"프로그램 에서 동적 으로 그림 을 불 러 오 는 것 도 유사 합 니 다.예 를 들 어 imgView.setImageResource(R.drawable.*).imgView 가 아 닌 setBackgroundResource(R.drawable.*);
더 자세 한 scale Type 설명:
CENTER/center 는 보기 중심 에 그림 을 표시 하고 크기 를 조정 하지 않 습 니 다.
CENTER_CROP/centerCrop 비례 에 따라 그림 크기 를 조정 하여 그림 의 길이(너비)가 보기 의 해당 차원 보다 크 도록 합 니 다.
CENTER_INSIDE/center Inside 그림 을 비례 에 따라 크기 를 조정 하여 그림 의 길이(너비)를 보기 와 같은 차원 보다 작 게 합 니 다.
FIT_CENTER/fitCenter 는 그림 을 보기 의 최소 변 으로 비율 에 따라 크기 를 조정 하여 가운데 로 표시 합 니 다.
FIT_END/fitEnd 그림 을 보기 의 가장 작은 쪽 에 비례 하여 크기 를 조정 하여 보기 의 아래 부분 에 표시 합 니 다.
FIT_START/fitStart 그림 을 비례 에 따라 보기 의 최소 변 으로 확대/축소 하여 보기 의 상단 위 치 를 표시 합 니 다.
FIT_XY/fitXY 그림 을 보기 크기 로 크기 조정 하지 않 음
MATRIX/matrix 매트릭스 로 그립 니 다.
사용자 정의 컨트롤 ClickImageView 코드:

package com.hanzheng.imagebutton; 
 
import android.content.Context; 
import android.util.AttributeSet; 
import android.view.MotionEvent; 
import android.widget.ImageView; 
 
/** 
 * Created by zmybi on 2017/1/3. 
 */ 
 
public class ClickImageView extends ImageView { 
 
 public ClickImageView(Context context) { 
  super(context); 
 } 
 public ClickImageView(Context context, AttributeSet attrs) { 
  super(context, attrs); 
 } 
 public ClickImageView(Context context, AttributeSet attrs, int defStyleAttr) { 
  super(context, attrs, defStyleAttr); 
 } 
 
 
 @Override 
 public boolean onTouchEvent(MotionEvent event) { 
 
  switch (event.getAction()) { 
   case MotionEvent.ACTION_DOWN: 
    this.setColorFilter(0x33000000); 
    //         ,          
    mOnClickListener.onClick(); 
    return true; 
   case MotionEvent.ACTION_UP: 
   case MotionEvent.ACTION_CANCEL: 
    this.setColorFilter(null); 
    break; 
  } 
  return super.onTouchEvent(event); 
 } 
 
 /** 
  *         
  */ 
 interface OnClickListener { 
  void onClick(); 
 } 
 
 private OnClickListener mOnClickListener; 
 
 public void setOnClickListener (OnClickListener onClickListener) { 
  this.mOnClickListener = onClickListener; 
 } 
 
 
} 
MainActivity 의 코드:감청 반전

package com.hanzheng.imagebutton; 
 
import android.os.Bundle; 
import android.support.v7.app.AppCompatActivity; 
import android.view.View; 
import android.widget.ImageButton; 
import android.widget.Toast; 
 
public class MainActivity extends AppCompatActivity { 
 
 private ImageButton mBt; 
 private ClickImageView mCiv; 
 private ClickImageView mCiv2; 
 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
  setContentView(R.layout.activity_main); 
  mBt = (ImageButton) findViewById(R.id.button); 
  mCiv = (ClickImageView) findViewById(R.id.clickimageview); 
  mCiv2 = (ClickImageView) findViewById(R.id.clickimageview2); 
  mCiv.setOnClickListener(new ClickImageView.OnClickListener() { 
   @Override 
   public void onClick() { 
    Toast.makeText(MainActivity.this,"   ImageView  1",Toast.LENGTH_SHORT).show(); 
   } 
  }); 
 
  mCiv2.setOnClickListener(new ClickImageView.OnClickListener() { 
   @Override 
   public void onClick() { 
    Toast.makeText(MainActivity.this,"   ImageView  2",Toast.LENGTH_SHORT).show(); 
   } 
  }); 
 
  mBt.setOnClickListener(new View.OnClickListener() { 
   @Override 
   public void onClick(View view) { 
    Toast.makeText(MainActivity.this,"ImageButton  ",Toast.LENGTH_SHORT).show(); 
   } 
  }); 
 } 
} 
이로써 사용자 정의 ImageView 가 그림자 클릭 을 실현 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기