Android 에서 배경 효 과 를 강조 하 는 아래쪽 탐색 표시 줄 기능 선택

오늘 그룹 에서 밑 에 있 는 내 비게 이 션 을 봤 어 요.이렇게.

이것 을 어떻게 해 야 할 지 생각 했 어 요.저 는 소금 에 절 인 생선 과 같은 것 이 중간 에 튀 어 나 온 것 으로 기억 해 요.이런 것 이 어느 것 을 선택 하 는 것 이 아니 라 어느 것 이 튀 어 나 온 것 으로 기억 해 요.
첫 번 째 방법
간단 하고 빠 르 며 UI 에 게 배경 이 돋 보 이 는 그림 몇 장 을 잘라 달라 고 하 세 요.
간단 하고 거 친 그림 전환 선택
그룹 에서 동 료 를 찾 아 UI 컷 을 달라 고 했 습 니 다.보 여 준 6 장의 그림 은 똑 같은 크기 이 고 배경 도 강조 되 지 않 았 습 니 다.
그래서 두 번 째 방법 이 있 을 까 생각 했 어 요.
바 이 두 는 오랫동안 내 가 찾 은 방법 이 틀 렸 는 지 모두 가 이런 UI 를 만 나 지 못 했 을 지도 모른다.
어 떡 해,생각해 보고 마음 을 가 라 앉 히 고 UI 효 과 를 보 니 튀 어 나 온 부분 이 약간 베 세 르 곡선 같 았 다.
베 세 르 곡선 이 두 드 러 지면 어떻게 직선 을 그리고 고정된 위치 가 두 드 러 질 수 있 는 지 다시 한 번 자세히 분석 해 보 자.
베 어 셀 곡선 은 Path 안의 api 이 고 Path 는 연속 으로 선 을 그 을 수 있 습 니 다.
그럼 잘 됐 네요.앞 에 바로 시작 점 을 설정 하 겠 습 니 다. 

mPath.moveTo(0, 0);//   

그리고 중간 에 직접 호출. 

mPath.lineTo(x,y);

강조 가 필요 하면 2 단계 베 세 르 곡선 을 호출 합 니 다.

mPath.quadTo(x1,y1,x2,y2）;

과연 가능 하 다.그림 을 그 리 는 효 과 는 이렇다.

좋 습 니 다.첫 번 째 단 계 를 이 루 었 습 니 다.하지만 자세히 살 펴 보면 남 의 밑 에 흰색 배경 이 있 고 두 드 러 진 곳 도 흰색 배경 이 있어 야 합 니 다.어떻게 하 죠?
Path 와 Paint Api 를 찾 아 봤 더 니 이런 효 과 를 낼 수 있 는 방법 이 있 더 라 고요.

mPaint.setStyle(Paint.Style.FILL_AND_STROKE);

붓 은 이런 스타일 로 해 야 돼 요.

mPath.lineTo(getWidth(), getHeight());
mPath.lineTo(0, getHeight());
mPath.close(); //  path  

패스 경로 가 모두 찼 습 니 다.
그리고 효 과 를 낼 수 있 습 니 다.
붓 색깔 을 흰색 으로 해 주세요.

mPaint.setColor(Color.WHITE);

과연 가능 하 다!
한 끼 에 나 오 는 효 과 는 이 렇 습 니 다.

못 생 겼 다.
하지만 이미 성공 의 첫걸음 을 내 디 뎠 으 니 계속 보완 하 자.
일단 이거 튀 어 나 온 라디안 이 UI 랑 다른 것 같 아 요.
또 한 차례 의 분석 을 통 해 두 드 러 졌 을 때 세 개의 곡선 으로 구 성 된 것 을 발견 하 였 다.
그러면 세 개의 컨트롤 포인트 가 있어 요.

좀 못 생기 게 그 렸 어 요.아 쉬 운 대로 보 세 요.
a.b.c 는 모두 제어점 입 니 다.
1-2 는 1 절.
2-3 은 2 단.
3-4 는 3 단.
3 단 대응 3 개 제어점
그래서 저희 가 4 단계 베 세 르 곡선 을 그 려 야 돼 요.
결국 Path 에 서 는 최대 3 단계 까지...
어 쩔 수 없 이 세 개 로 뜯 었 어 요.
그림 에 따라 a b c 제어점 과 1,2,3,4 점 의 위 치 를 계산 할 수 있다.
핸드폰 화면 길 이 는 w 로 가정 합 니 다.
현재 아래쪽 은 세 개의 모듈 입 니 다.그러면 한 모듈 이 차지 하 는 거리 i=w/3
그러면 1 이 시작 입 니 다. 
b 는 i 의 중심 점 이다.
4 는 i 시
Y 방향의 최고 높이 는-y 입 니 다.
세 개의 베 세 르 곡선 길이 가 같다 면 각 점 의 위 치 는?

1(0,0)
 
2(i/2/2,y/2)
3(i-i/2/2,y/2)
4(i,0)
a(i/2/2/2,y/2/2/2)
 
b(i/2,y)
 
c(i-i/2/2/2,y/2/2/2)

그럼 이 점 들 을 베 세 르 곡선 에 넣 겠 습 니 다.

//             a          2
mPath.quadTo(i / 2 / 2 / 2 , -(minHeight / 2 / 2 / 2), i / 2 / 2 , -(minHeight / 2));
//             b      3
mPath.quadTo(i / 2 + i , -minHeight, i - i / 2 / 2 + i , -(minHeight / 2));
//             c      4
mPath.quadTo(i - i / 2 / 2 / 2 , -(minHeight / 2 / 2 / 2), i + i * (count - 1), 0);

그 다음 에 이것 은 첫 번 째 모듈 의 것 이 고 뒤의 모듈 의 계산 은 바로 몇 단락 의 i 값 을 더 하 는 것 이다.
모듈 은 1 부터 시작 합 니 다.현재 3 개의 모듈 수 치 는(1,2,3)입 니 다. 

//             a          2
mPath.quadTo(i / 2 / 2 / 2 + i * (count - 1), -(minHeight / 2 / 2 / 2), i / 2 / 2 + i * (count - 1) + minHeight / 5, -(minHeight / 2));
//             b      3
mPath.quadTo(i / 2 + i * (count - 1), -minHeight, i - i / 2 / 2 + i * (count - 1) - minHeight / 5, -(minHeight / 2));
//             c      4
mPath.quadTo(i - i / 2 / 2 / 2 + i * (count - 1), -(minHeight / 2 / 2 / 2), i + i * (count - 1), 0);

이렇게 하면 count 값 을 직접 설정 하고 다시 그리 면 클릭 전환 이 완 료 됩 니 다.
모든 코드

package com.wavewave.mylibrary;
 
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.View;
 
import androidx.annotation.Nullable;
 
/**
 * @author wavewave
 * @CreateDate: 2020/10/28 10:23 AM
 * @Description:          View   
 * @Version: 1.0
 */
public class BottomOutNavigation extends View {
 private Paint mPaint;
 //   
 private int beginY = dip2px(0);
 //  
 private int margin = dip2px(0);
 /**
  *          Y
  */
 private int minHeight = dip2px(40);
 
 //    0  
 private int count = 1;
 /**
  *   3         
  */
 private int maxCount = 3;
 public static String TAG = "LineView";
 private int height;
 private int width;
 private Path mPath;
 
 public BottomOutNavigation(Context context) {
  this(context, null);
 }
 
 public BottomOutNavigation(Context context, @Nullable AttributeSet attrs) {
  this(context, attrs, 0);
 }
 
 public BottomOutNavigation(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init();
 }
 
 private void init() {
  mPath = new Path();
  mPaint = new Paint();
//  mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
  mPaint.setColor(Color.WHITE);
  mPaint.setAntiAlias(true);//   
  //2、  Resources  
  DisplayMetrics dm = getResources().getDisplayMetrics();
  height = dm.heightPixels;
  width = dm.widthPixels;
 }
 
 /**
  *     
  *
  * @param count
  */
 public void setCount(int count) {
  this.count = count;
  invalidate();
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  int i = width / maxCount;//      
  Log.d(TAG, "i:" + i);
  mPath.reset();
  mPath.moveTo(0, 0);//   
  mPath.lineTo(margin + i * (count - 1), 0);
//
  //             a          2
  mPath.quadTo(i / 2 / 2 / 2 + i * (count - 1), -(minHeight / 2 / 2 / 2), i / 2 / 2 + i * (count - 1) + minHeight / 5, -(minHeight / 2));
  //             b      3
  mPath.quadTo(i / 2 + i * (count - 1), -minHeight, i - i / 2 / 2 + i * (count - 1) - minHeight / 5, -(minHeight / 2));
  //             c      4
  mPath.quadTo(i - i / 2 / 2 / 2 + i * (count - 1), -(minHeight / 2 / 2 / 2), i + i * (count - 1), 0);
 
  mPath.lineTo(width, beginY);
  mPath.lineTo(getWidth(), getHeight());
  mPath.lineTo(0, getHeight());
  mPath.close(); //  path  
  canvas.drawPath(mPath, mPaint);
 }
 /**
  *           dp         px(  )
  */
 public int dip2px(float dpValue) {
  final float scale = getResources().getDisplayMetrics().density;
  return (int) (dpValue * scale + 0.5f);
 }
 
}

이렇게 하면 끝 이 야.중간 에 튀 어 나 온 거 야.위 gif 그림

코드 는 github 에 올 려 놓 았 습 니 다.데모 실행 을 직접 다운로드 해서 알 아 보 세 요!
github 코드 링크
안 드 로 이 드 가 배경 효 과 를 강조 하 는 아래쪽 네 비게 이 션 바 를 선택 한 것 에 관 한 글 은 여기까지 입 니 다.더 많은 안 드 로 이 드 아래쪽 네 비게 이 션 바 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 저 희 를 많이 사랑 해 주세요!