Android 에서 recyclerView 아래쪽 에 투명 그 라 데 이 션 효과 추가

머리말
최근 에 recyclerView 의 투명 하고 그 라 데 이 션 효 과 를 실현 하여 구덩이 에 부 딪 혀 방법 을 시도 해 보 았 습 니 다.여기에 기록 해 보 세 요.
효과 도


그림 은 위 에 2 열 을 표시 하고 문 자 는 아래 에 1 열 을 표시 합 니 다.바닥 이 전혀 보이 지 않 을 때 까지 투명 하고 그 라 데 이 션 된 효 과 를 가 져 야 합 니 다.
gridLayoutManager 동적 설정 열 수
대략 두 가지 로 나 뉘 는데 하 나 는 그림 을 item 으로 한 줄 에 두 개,하 나 는 문 자 를 item 으로 한 줄 에 한 개 씩 나 뉜 다.
이 첫 번 째 반응 은 view Type 으로 그림 형식 을 구분 하 는 것 이지 만 처음에는 grid Layout 가 동적 열 수 를 모 르 기 때 문 입 니 다.바로 위의 두 열 에 있 는데,아래 열 에 서 는 난처 하기 시작 했다.
한 열 을 통일 적 으로 사용 하 자 면 두 개의 image 를 하나의 item 으로 생각 하 라.그러나 이렇게 하면 스스로 position 를 계산 해 야 하고 홀수 상황 에서 마지막 줄 에 한 개의 그림 만 있 는 상황 도 고려 해 야 한다.그러면 코드 와 논 리 를 많이 써 야 한다.
나중에 spanSize 를 바 꾸 어서 view Type 에 따라 spanCount 를 바 꿀 수 있 습 니 다.

 //gridLayoutManager     spanCount=2
 RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();
 if (manager instanceof GridLayoutManager) {
 final GridLayoutManager gridManager = ((GridLayoutManager) manager);
 gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
  @Override
  public int getSpanSize(int position) {
  int type = getItemViewType(position);
  switch (type) {
  case TYPE_IMAGE:
  //  1/2   2 
  Log.d("tag", "  2");
  return 1;
  case TYPE_TEXT:
  //  2/2   1 
  Log.d("tag", "  1");
  return 2;
  default:
  Log.d("tag", "default  2");
  return 2;
  }
  }
 });
 }

이렇게 item 의 layot 는 매우 깨끗 해서 약간의 번 거 로 움 을 줄 였 다.
투명 그 라 데 이 션 추가
거의 끝나 가 는 것 같 았 는데 바닥 이 투명 하고 그 라 데 이 션 될 뻔 했 는데 그 효과 가 훨씬 높 아 졌 다.
다음 세 가지 방법 을 시도 해 봤 습 니 다.
4

recycle View 위 에 그 라 데 이 션 된 layot 를 덮는다

원생 의 fadingEdeg,반사 로 상단 의 음영 을 제거 하려 고 시도 합 니 다

도 층 합병
첫 번 째 반응 은 recycle View 위 에 그 라 데 이 션 된 layot 를 덮 는 것 이다.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">
 <gradient
 android:angle="90"
 android:startColor="@color/color_FFFFFFFF"
 android:endColor="@color/color_00FFFFFF">
 </gradient>
</shape>

효 과 는 다음 과 같 습 니 다:

'찍 었 어'가 좀 찍 힌 것 같은 데.
그러나 이런 문제 가 있 습 니 다.바로 layot 가 이 shape 를 사용 할 때 처음부터 끝까지 그 라 데 이 션 입 니 다.grandient 의 평평 한 점포 효과 가 없습니다.즉,마지막 점 만 불투명 하고 마지막 이 불투명 합 니 다.그리고 이 00FFFF 는 사실 진정한 의미 의 불투명 이 아니 라 흰색 이다.
효과 그림 아래 의 한 부분 은 모두 투명 하 다.이것 은 효과 그림 과 어느 정도 차이 가 있 기 때문에 단순히 shape 로 는 실현 할 수 없다.그 라 데 이 션 밑 에 투명 한 부분 을 더 넣 으 려 고 시도 하면 끔찍 하 다.

recyclerView 의 fadingEdge
팀 의 오래된 운전 자 는 이 recyclerView 로 원생 이 가지 고 있 는 속성 을 제시 했다.

android:requiresFadingEdge="vertical"
android:fadingEdgeLength="40dp"

실행 하기 에는 ui 와 차이 가 있 는 것 같 지만 받 아들 일 수 있 을 것 같 습 니 다.
그러나 미 끄 러 질 때 문제 가 발생 했 습 니 다.이 자체 테이프 fadingEdge 는 바닥 에 있 을 뿐만 아니 라 윗부분 도 있 습 니 다.또한 리 콜 러 뷰 는 상단 이나 아래쪽 을 취소 하 는 인 터 페 이 스 를 제공 하지 않 았 습 니 다.안 쓰 든 지,아니면 다.

인터넷 의 한 방법 을 참고 하여 반 사 를 통 해 상단 의 엣 지 너비 와 높이 를 설정 하여 상단 의 그림자 가 나타 나 지 않도록 합 니 다.
RecyclerView 의 한쪽 이 머리 그림자 로 미 끄 러 지 는 것 을 어떻게 차단 합 니까(fadingEdge)
이렇게 하면 되 는 줄 알 았 는데 이렇게 설정 하면 효과 가 없 을 줄 누가 알 았 겠 는가.
참고 코드 는 이렇게 설정 되 어 있 습 니 다.

그런데 api 27 의 RecyclerView 에 들 어가 보면 이 mTopGlow 는 EdgeEffect 타 입 입 입 니 다.

mRecycleView.setOnScrollListener(new RecyclerView.OnScrollListener() {
 @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
 super.onScrolled(recyclerView, dx, dy);
 EdgeEffect mTopGlow = null;
 try {
  Field topGlow = mRecycleView.getClass().getDeclaredField("mTopGlow");
  if (topGlow != null) {
  topGlow.setAccessible(true);
  mTopGlow = (EdgeEffect) topGlow.get(mRecycleView);
  }
 } catch (Exception e) {
  e.printStackTrace();
 }

 if (mTopGlow != null) {
  //  TOP         （             ）
  mTopGlow.setSize(0, 0);
  mTopGlow.finish();
 }
 }
 });

이렇게 대부분의 경우 top Glow 도 비어 있 습 니 다.코드 를 보 니 이 방법 만 mTopGlow 를 초기 화 할 수 있 을 것 같 습 니 다.

toGlow 대상 을 가 져 오기 전에 ensureTopGlow 를 강제로 삽입 하여 비어 있 지 않 게 합 니 다.

 public void makeTopGlowNoneNull() {
 final Class<?> clazz = RecyclerView.class;
 try {
 Method method = clazz.getDeclaredMethod("ensureTopGlow");
 method.setAccessible(true);
 method.invoke(mRecycleView);
 } catch (NoSuchMethodException e) {
 e.printStackTrace();
 } catch (IllegalAccessException e) {
 e.printStackTrace();
 } catch (InvocationTargetException e) {
 e.printStackTrace();
 }
 }

자,위의 조작 을 통 해 mtopFlow 를 꺼 내 크기(0,0)를 설정 합 니 다.설교 리 상단 의 그림 자 는 길이 0,너비 0 의 사각형 만 있 으 면 없 는 것 과 같 습 니 다.
그런데...
상단 그림자 가 존재 하고 디 버 깅 시스템 에 상하 그림자 장면 을 만 들 었 는데 setSize 를 호출 하지 않 고 그림 자 를 그 렸 습 니 다.그 러 다 한참 을 뒤 척 였 지만 이 그림자 가 리 콜 러 뷰 에서 어떻게 그 려 졌 는 지 알 수 없 었 습 니 다.아 는 형제 가 있 으 면 알려 주세요.
그래 픽 통합 을 통 해 투명 효 과 를 추가 합 니 다.
참조

 /**
 *   itemDecoration onDraw onDrawOver    ，         
 *
 */
 mRecycleView.addItemDecoration(new RecyclerView.ItemDecoration() {
 @SuppressLint("NewApi") @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
 super.onDraw(c, parent, state);
 layerId = c.saveLayer(0.0f, 0.0f, (float) parent.getWidth(), (float) parent.getHeight(), mPaint);
 }

 @Override public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
 super.onDrawOver(c, parent, state);
 if (linearGradient == null) {
  linearGradient = new LinearGradient(0f,parent.getHeight()-dpToPixel(54), 0f,
  parent.getHeight()-dpToPixel(15), new int[] {startColor,endColor },new float[]{0.2f,0.8f},
  Shader.TileMode.CLAMP);
 }
 mPaint.setXfermode(xfermode);
 mPaint.setShader(linearGradient);
 c.drawRect(0f,parent.getHeight()-dpToPixel(54),parent.getWidth(),parent.getHeight(),mPaint);
 mPaint.setXfermode(null);
 c.restoreToCount(layerId);
 /**
  *                           
  *             ，          ，        
  */

 if (recycleViewfirstComeInFlag == false) {
  recycleViewfirstComeInFlag = true;
  mRecycleView.postInvalidate();
 }
 }

 @Override public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
  RecyclerView.State state) {
 super.getItemOffsets(outRect, view, parent, state);
 }
 });
 }

원리 참고 글 에서 도 아 이 템 데 코 레이 션 의 draw 와 drawover 방법 으로 두 개의 그림 을 합 쳐 DES 로IN 모드 로 SRC 그래 픽 의 아래쪽 에 DES 그래 픽 의 투명 한 그 라 데 이 션 이 있 습 니 다.
보아하니 베 끼 면 끝 날 것 같은 물건 을 나 는 한참 동안 만 들 었 다.
참고 demo 는 recyclerView 입 니 다.저 는 dialog 에 recyclerView 가 들 어 있 습 니 다.dialog 는 중간 에 표 시 됩 니 다.canvas.drawRec()매개 변수 좌표 와 linearGradient 의 사용 에 익숙 하지 않 기 때문에 뭔 가 를 해 냅 니 다.
LinearGrandient 에 대한 인자

앞의 xy 는 방향 을 표시 하 는 데 쓰 인 다.Y 수직 방향의 그 라 데 이 션 이 라면(0,startY)에서(0,endY)까지 만 하면 X 는 아무런 역할 을 하지 않 고 Y 에서 수직 으로 보장 하면 된다.그러나 이 startY 와 endY 이전에 나 는 절대 좌표 로 이해 했다.핸드폰 왼쪽 상단 이 좌표 원점(0,0)인 줄 알 았 다.
뒤에 있 는 postion 은 사실 각종 color 에 대응 하 는 위치 입 니 다.CLAMP 모드(출발점 과 종점 을 초과 하 는 기본 값 은 출발점 과 종점 의 색 을 밖으로 연장 하 는 것)와 함께 사용 하 는 것 이 좋 습 니 다.
첫 번 째 XML shape Lienar Gradient 를 직접 사용 하 는 startColor endColor 보다 훨씬 유연 하 다.
그러나 view 에 서 는 motion Event 처럼 getRowX 를 직접 하 는 방법 이 없어 백분율 계산 을 통 해 위 치 를 찾 고 복잡 도 를 높 였 다.
실제 상황 은 이러한 영향 요소(동시에 fadingEdge)보다 많 고 스스로 번 거 로 움 을 자초 하 는 느낌 이 들 어 일시 적 으로 교착 상태 에 빠 졌 다.
거꾸로 생각해 보 니 구 글 이 절대 왼쪽 을 가 져 오 는 방법 을 제공 하지 않 았 고 linearGradient 도 paint 에 canvas 에 사용 하도록 설정 되 어 있 으 니 그 안의 좌 표 는 cavas 와 일치 할 것 입 니 다.그리고 canvas 는 view 의 draw 와 같은 여러 곳 에서 도 얻 을 수 있 습 니 다.그것 은 canvas 에 해당 하 는 좌표 로 설정 하 는 것 이 편리 합 니 다.
다시 한 번 머리 를 식 히 고 잠시 주석 해 야 할 주석 을 없 애고 최소 입도 의 변 화 를 통 해 효 과 를 디 버 깅 한다(그렇지 않 으 면 한꺼번에 많이 바 뀌 고 나 오 는 효 과 는 사람 을 멍 하 게 할 것 이다).마지막 에 드디어 해 냈 다.
하지만 일이 끝나 지 않 았 다...
제 가 dialog 에 recyclerView 의 관 계 를 표시 한 것 같 습 니 다.그림 을 통 해 합 쳐 지면 이상 한 효 과 를 낼 수 있 습 니 다.미 끄 러 져 야 정상적으로 표시 할 수 있 습 니 다.recyclerView 가 dialog 에 담 겨 있 지 않 았 다 면 이렇게 되 지 않 았 을 것 이 고,단지 저장 한 것 만 사용 하면 이렇게 되 지 않 았 을 것 이다.

이상 하지만 이렇게 하면 SRC 와 DES 그림 을 볼 수 있 습 니 다==
잠시 처 리 는 처음 들 어 왔 습 니 다.drawOver 가 완 성 된 후에 post Invaidate 를 한 번 더 하 겠 습 니 다.이 유 를 아 는 형님 이 좀 알려 주세요!

 if (recycleViewfirstComeInFlag == false) {
   recycleViewfirstComeInFlag = true;
    mRecycleView.postInvalidate();
  }

최종 효과

남 겨 진 문제

recyclerView fadingEdge 의 실현 은 flow.setSize 가 아니 라 디 버 깅 코드 에서 알 아 보지 못 했 습 니 다

dialog 에 recyclerView 의 그림 을 추가 하여 합 쳐 처음에 이상 한 원인 을 표시 합 니 다

총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.