카드 뷰 리플 핫스팟을 설정하는 방법은 무엇입니까? 터치 포인트</p> <p>구글에서

Question

잔물결은 그 잔물결 애니메이션을 트리거 터치 포인트에서 발산하지 않는 것 그들이 재질 디자인 스타일의 사용자 인터페이스에 리플 애니메이션을 사용하는 응용 프로그램 개발자를 지적하기 시작했다.

Google의 검색 엔진을 사용하여이 작업을 수행하는 방법을 설명하는 것으로 보이는 유일한 것이 Lucas Rocha의 TwoWayView 라이브러리에 대한 문제에 대한 의견이었습니다. 다행스럽게도 그 의견은 저에게 맞는 것 같습니다.

그의 짹짹에서 Butcher 씨가 암시 한 것처럼 열쇠는 Drawable의 setHotspot() 메소드 인 것 같습니다. API 레벨 21에 추가되어 드로어 블을 "핫스팟"으로 가르치고 RippleDrawable은 파급 효과의 발산 지점으로 사용합니다. setHotspot()은 한 쌍의 float 값을 취합니다. 아마도 OnTouchListener 내부에서 setHotspot()을 사용하는 방향으로 볼 수 있습니다. 이는 MotionEvent가 float 값으로 터치 이벤트의 X/Y 위치를보고하기 때문입니다.

이 샘플 응용 프로그램은 다음 책 업데이트를 위해 작업중인 50 개 이상의 페이지 장의 일부로 RecycleView의 컨텍스트에서 setHotspot()을 사용하는 방법을 보여줍니다. 이 RecyclerView는 고전적인 ListView의 기본 구조를 복제하기 위해 LinearLayoutManager를 사용합니다. 내 행은 CardView을 기반으로합니다

```사용자가 행을 건 드리면 XML

그래서, 나는 그것의 핫스팟으로 배경에 터치 포인트를 전파. 우리가 touch 이벤트를 소비하지 않는다는 것을 나타 내기 위해 false를 반환한다. 그래서 필요할 경우 나머지 이벤트 핸들러로 계속 진행할 것이다.

이 setHotspot() 호출이 없으면 RippleDrawable은 기본적으로 드로어 블의 가운데로 보인다. 따라서 목록 스타일 RecyclerView 행의 경우 행의 중심에서 파급 효과가 발생합니다. touch 이벤트에 연결된 setHotspot()은 방사 지점을 변경합니다.

<?xml version="1.0" encoding="utf-8"?> 
 
<android.support.v7.widget.CardView 
 
    xmlns:android="http://schemas.android.com/apk/res/android" 
 
    xmlns:cardview="http://schemas.android.com/apk/res-auto" 
 
    android:layout_width="match_parent" 
 
    android:layout_height="wrap_content" 
 
    android:layout_margin="4dp" 
 
    cardview:cardCornerRadius="4dp"> 
 

 
    <LinearLayout 
 
    android:id="@+id/row_content" 
 
    android:layout_width="match_parent" 
 
    android:layout_height="wrap_content" 
 
    android:orientation="horizontal" 
 
    android:background="?android:attr/selectableItemBackground"> 
 

 
    <!-- other widgets in here --> 
 

 
    </LinearLayout> 
 

 
    </LinearLayout> 
 

 
</android.support.v7.widget.CardView> 
 
``` 
 

 
The LinearLayout that the CardView wraps has ?android:attr/selectableItemBackground as its background, pulling in a theme attribute. If this app runs on API Level 21, that background will be a RippleDrawable. 
 

 
When I set up the row, I attach an OnTouchListener to set the hotspot, but only on API Level 21+ devices (as setHotspot() does not exist before then): 
 

 
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
 
    row.setOnTouchListener(new View.OnTouchListener() { 
 
    @TargetApi(Build.VERSION_CODES.LOLLIPOP) 
 
    @Override 
 
    public boolean onTouch(View v, MotionEvent event) { 
 
     v 
 
     .findViewById(R.id.row_content) 
 
     .getBackground() 
 
     .setHotspot(event.getX(), event.getY()); 
 

 
     return(false); 
 
    } 
 
    }); 
 
}

이 작동하는 것 같다

. Google에서이 코드를 구현하는 코드를 보지 못했다면 (예 : setHotspot()에 대한 SDK 샘플을 검색해도 아무 것도 표시되지 않음) 공식적인 정답인지 잘 모르겠습니다. 특히, 백그라운드에서 setHotspot()을 직접 호출하면 걱정이됩니다 (먼저 mutate()를 호출해야합니까?). 따라서 한면에 약 15cm 크기의 소금 입자를 상상해보십시오.

Answer 1

표시 애니메이션은 사용자에게 표시하거나 UI 요소 그룹을 숨길 때 시각적 연속성을 제공합니다. ViewAnimationUtils.createCircularReveal() 메서드를 사용하면 에 클리핑 원을 애니메이션으로 표시하여보기를 표시하거나 숨길 수 있습니다.

// previously visible view 
final View myView = findViewById(R.id.my_view); 

// get the center for the clipping circle 
int cx = myView.getWidth()/2; 
int cy = myView.getHeight()/2; 

// get the initial radius for the clipping circle 
float initialRadius = (float) Math.hypot(cx, cy); 

// create the animation (the final radius is zero) 
Animator anim = 
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0); 

// make the view invisible when the animation is done 
anim.addListener(new AnimatorListenerAdapter() { 
    @Override 
    public void onAnimationEnd(Animator animation) { 
     super.onAnimationEnd(animation); 
     myView.setVisibility(View.INVISIBLE); 
    } 
}); 

// start the animation 
anim.start(); 

:

View myView = findViewById(R.id.my_view); 

// get the center for the clipping circle 
int cx = myView.getWidth()/2; 
int cy = myView.getHeight()/2; 

// get the final radius for the clipping circle 
float finalRadius = (float) Math.hypot(cx, cy); 

// create the animator for this view (the start radius is zero) 
Animator anim = 
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius); 

// make the view visible and start the animation 
myView.setVisibility(View.VISIBLE); 
anim.start(); 

이 효과를 이용하여 미리보기 표시를 숨기도록 :

이 효과를 이용하여 이전에 보이지 뷰를 공개