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" />
사용자 정의 방식 으로 네 가지 방향 을 해결 할 수 있 고 코드 에서 도 사용 할 수 있 습 니 다.동적 추가,동적 으로 색상 을 바 꾸 는 것 이 좋 습 니 다.안 드 로 이 드 가 삼각형 기포 효 과 를 실현 하 는 방식 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 안 드 로 이 드 삼각형 기포 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.