Android 삼각형 기포 효과 구현 방식 집계

개발 과정 에서 우 리 는 이런 수요 양식 을 자주 만 날 수 있다.

이 그림 은 경 동 메시지 알림 을 캡 처 한 팝 업 상자 로 오른쪽 위 에 삼각형 의 기포 효과 가 있 는 것 을 볼 수 있다.이것 은 그 중의 하나 일 뿐 삼각형 의 방향 은 위,아래,왼쪽,오른쪽 일 수도 있다.
캡 처 를 통 해 알 수 있 듯 이 기 포 는 정삼각형 과 원 각 장방형 으로 구성 되 어 있 기 때문에 조합 을 통 해 삼각형 기포 의 효 과 를 형성 할 수 있다.다음은 세 가지 방식 으로 이 루어 진다.
구현 방식:
1.9 그림 을 통 해 실현 한다.
2.shape 방식 으로 실현 한다.
3.사용자 정의 view 방식 으로 이 루어 집 니 다.
논리 구현:
1.9 그림 을 통 해 실현
이런 방식 은 말 할 필요 도 없 이 UI 언니 에 게 9 그림 을 잘라 서 사용 하면 되 지만 이런 방식 의 그림 은 일정한 부 피 를 차지 해 야 합 니 다.
2.shape 방식 으로 실현
정삼각형

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <rotate
      android:fromDegrees="45"
      android:pivotX="-40%"
      android:pivotY="80%">
      <shape android:shape="rectangle">
        <size
          android:width="15dp"
          android:height="15dp" />
        <solid android:color="#ffffff" />
      </shape>
    </rotate>
  </item>
</layer-list>

역 삼각형

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item>
    <rotate
      android:fromDegrees="45"
      android:pivotX="135%"
      android:pivotY="15%">
      <shape android:shape="rectangle">
        <size
          android:width="15dp"
          android:height="15dp" />
        <solid android:color="#ffffff" />
      </shape>
    </rotate>
  </item>
</layer-list>

왼쪽 삼각형

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <rotate
      android:fromDegrees="-45"
      android:pivotX="85%"
      android:pivotY="-35%">>
      <shape android:shape="rectangle">
        <size
          android:width="15dp"
          android:height="15dp" />
        <solid android:color="#ffffff" />
      </shape>
    </rotate>
  </item>
</layer-list>

오른쪽 삼각형

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <rotate
      android:fromDegrees="-45"
      android:pivotX="15%"
      android:pivotY="135%">>
      <shape android:shape="rectangle">
        <size
          android:width="15dp"
          android:height="15dp" />
        <solid android:color="#ffffff" />
      </shape>
    </rotate>
  </item>
</layer-list>

위 는 shape 방식 을 통 해 각 방향의 코드 를 실현 하 는데 이런 방식 은 단점 이 비교적 뚜렷 하 다.서로 다른 각 의 위 치 를 바 꾸 려 면 서로 다른 구 조 를 써 야 한다.
3.사용자 정의 view 방식 으로 구현
비교적 간단 하기 때문에 여 기 는 어떻게 하 는 지 설명 하지 않 고 복사 해서 직접 사용 할 수 있다.
사용자 정의 속성 추가

<declare-styleable name="TriangleView">
    <attr name="trv_color" format="color" />
    <attr name="trv_direction">
      <enum name="top" value="0" />
      <enum name="bottom" value="1" />
      <enum name="right" value="2" />
      <enum name="left" value="3" />
    </attr>
 </declare-styleable>

사용자 정의 코드 파일

public class TriangleView extends View {
  private static final int TOP = 0;
  private static final int BOTTOM = 1;
  private static final int RIGHT = 2;
  private static final int LEFT = 3;
  private static final int DEFUALT_WIDTH = 10;
  private static final int DEFUALT_HEIGHT = 6;
  private static final int DEFUALT_COLOR = R.color.FFF;
  private Paint mPaint;
  private int mColor;
  private int mWidth;
  private int mHeight;
  private int mDirection;
  private Path mPath;

  public TriangleView(final Context context) {
    this(context, null);
  }

  public TriangleView(Context context, @Nullable AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public TriangleView(final Context context, final AttributeSet attrs, final int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
    TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.TriangleView, 0, 0);
    mColor = typedArray.getColor(R.styleable.TriangleView_trv_color, ContextCompat.getColor(getContext(), DEFUALT_COLOR));
    mDirection = typedArray.getInt(R.styleable.TriangleView_trv_direction, mDirection);
    typedArray.recycle();
    mPaint.setColor(mColor);
  }

  private void init() {
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setStyle(Paint.Style.FILL);
    mPath = new Path();
    mDirection = TOP;
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    mWidth = MeasureSpec.getSize(widthMeasureSpec);
    mHeight = MeasureSpec.getSize(heightMeasureSpec);
    final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    if (mWidth == 0 || widthMode != MeasureSpec.EXACTLY) {
      mWidth = (int) PixelUtil.dp2px(DEFUALT_WIDTH);
    }
    if (mHeight == 0 || heightMode != MeasureSpec.EXACTLY) {
      mHeight = (int) PixelUtil.dp2px(DEFUALT_HEIGHT);
    }
    setMeasuredDimension(mWidth, mHeight);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    switch (mDirection) {
      case TOP:
        mPath.moveTo(0, mHeight);
        mPath.lineTo(mWidth, mHeight);
        mPath.lineTo(mWidth / 2, 0);
        break;
      case BOTTOM:
        mPath.moveTo(0, 0);
        mPath.lineTo(mWidth / 2, mHeight);
        mPath.lineTo(mWidth, 0);
        break;
      case RIGHT:
        mPath.moveTo(0, 0);
        mPath.lineTo(0, mHeight);
        mPath.lineTo(mWidth, mHeight / 2);
        break;
      case LEFT:
        mPath.moveTo(0, mHeight / 2);
        mPath.lineTo(mWidth, mHeight);
        mPath.lineTo(mWidth, 0);
        break;
      default:
        break;
    }

    mPath.close();
    canvas.drawPath(mPath, mPaint);
  }
}

레이아웃 파일 추가

<com.sjl.keeplive.triange.TriangleView
    android:layout_width="10dp"
    android:layout_height="6dp"
    app:trv_color="@color/FFF"
    app:trv_direction="top" />

사용자 정의 방식 으로 네 가지 방향 을 해결 할 수 있 고 코드 에서 도 사용 할 수 있 습 니 다.동적 추가,동적 으로 색상 을 바 꾸 는 것 이 좋 습 니 다.
안 드 로 이 드 가 삼각형 기포 효 과 를 실현 하 는 방식 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 안 드 로 이 드 삼각형 기포 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!