溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Android自定義View實(shí)現(xiàn)帶4圓角或者2圓角的效果

發(fā)布時(shí)間:2020-10-06 07:28:19 來(lái)源:腳本之家 閱讀:208 作者:chen yu 欄目:移動(dòng)開發(fā)

1 問題

實(shí)現(xiàn)任意view經(jīng)過(guò)自定義帶4圓角或者2圓角的效果

2 原理

1) 實(shí)現(xiàn)view 4圓角

Android自定義View實(shí)現(xiàn)帶4圓角或者2圓角的效果

我們只需要把左邊的圖嵌入到右邊里面去,最終顯示左邊的圖就行。

2) 實(shí)現(xiàn)view上2圓角

Android自定義View實(shí)現(xiàn)帶4圓角或者2圓角的效果

我們只需要把左邊的圖嵌入到右邊里面去,最終顯示左邊的圖就行。

安卓源碼里面有這樣的類

package android.graphics;
 
/**
 * <p>Specialized implementation of {@link Paint}'s
 * {@link Paint#setXfermode(Xfermode) transfer mode}. Refer to the
 * documentation of the {@link PorterDuff.Mode} enum for more
 * information on the available alpha compositing and blending modes.</p>
 *
 */
public class PorterDuffXfermode extends Xfermode {
 /**
  * Create an xfermode that uses the specified porter-duff mode.
  *
  * @param mode   The porter-duff mode that is applied
  */
 public PorterDuffXfermode(PorterDuff.Mode mode) {
  porterDuffMode = mode.nativeInt;
 }
}

然后我們看下點(diǎn)擊mode進(jìn)去看下

 /**
  * @hide
  */
 public static Mode intToMode(int val) {
  switch (val) {
   default:
   case 0: return Mode.CLEAR;
   case 1: return Mode.SRC;
   case 2: return Mode.DST;
   case 3: return Mode.SRC_OVER;
   case 4: return Mode.DST_OVER;
   case 5: return Mode.SRC_IN;
   case 6: return Mode.DST_IN;
   case 7: return Mode.SRC_OUT;
   case 8: return Mode.DST_OUT;
   case 9: return Mode.SRC_ATOP;
   case 10: return Mode.DST_ATOP;
   case 11: return Mode.XOR;
   case 16: return Mode.DARKEN;
   case 17: return Mode.LIGHTEN;
   case 13: return Mode.MULTIPLY;
   case 14: return Mode.SCREEN;
   case 12: return Mode.ADD;
   case 15: return Mode.OVERLAY;
  }
 }

什么意思呢?

Android自定義View實(shí)現(xiàn)帶4圓角或者2圓角的效果

應(yīng)該可以看得懂,這里每個(gè)圖片顯示的效果是最終的效果,然后很明顯,我們這里需要的是SrcIn效果,我們要把左圖的效果嵌套到右圖里面去。

3 代碼實(shí)現(xiàn)

1)MyTextView.java文件如下

package com.onemt.sdk.circle;
 
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
 
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.widget.AppCompatTextView;
 
public class MyTextView extends AppCompatTextView {
 
 private final RectF roundRect = new RectF();
 private final Paint desPaint = new Paint();
 private final Paint srcPaint = new Paint();
 private float mRadius = 10;
 private boolean isChange = false;
 
 public MyTextView(@NonNull Context context) {
  super(context);
  init();
 }
 
 public MyTextView(@NonNull Context context, @Nullable AttributeSet attrs) {
  super(context, attrs);
  init();
 }
 
 public MyTextView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init();
 }
 
 public void change(boolean isChange) {
  this.isChange = isChange;
  invalidate();
 }
 public void init() {
  desPaint.setAntiAlias(true);//設(shè)置抗鋸齒
  desPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  srcPaint.setAntiAlias(true);
  float density = getResources().getDisplayMetrics().density;
  mRadius *= density;
 }
 @Override
 protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
  super.onLayout(changed, left, top, right, bottom);
  int width = getWidth();
  int height = getHeight();
  roundRect.set(0, 0, width, height);
 }
 
 @Override
 public void draw(Canvas canvas) {
  //保存最原始的roundRect
  canvas.saveLayer(roundRect, srcPaint, Canvas.ALL_SAVE_FLAG);
  if (isChange) {
   //保存去掉頭部2圓角的roundRect(實(shí)際就是保留底部的2個(gè)圓角)
   canvas.drawRect(roundRect.left, (roundRect.top + roundRect.bottom) / 2, roundRect.right, roundRect.bottom, srcPaint);
   //保存去掉底部2圓角的roundRect(實(shí)際就是保留頂部的2個(gè)圓角)
//   canvas.drawRect(roundRect.left, roundRect.top, roundRect.right, roundRect.bottom / 2, srcPaint);
  }
  //保存掉頭部2圓角的roundRect
  canvas.drawRoundRect(roundRect, mRadius, mRadius, srcPaint);
  //保存疊加后的內(nèi)容
  canvas.saveLayer(roundRect, desPaint, Canvas.ALL_SAVE_FLAG);
  super.draw(canvas);
  //清空所有的圖像矩陣修改狀態(tài)
  canvas.restore();
 }
 
}

如果你看不懂這個(gè)函數(shù)drawRoundRect,請(qǐng)看下我的這篇博客介紹 Android之Canvas的drawRoundRect()

2)MainActivity.java文件如下

package com.onemt.sdk.circle;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
import android.view.View;
 
public class MainActivity extends AppCompatActivity {
 
 
 public MyTextView myTextView;
 public boolean isChange = true;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  myTextView = findViewById(R.id.my_textview);
  myTextView.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    if (isChange) {
     myTextView.change(true);
     isChange = false;
    } else {
     myTextView.change(false);
     isChange = true;
    }
   }
  });
 }
}

3)activity_main.xml文件如下

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">
 
 <com.onemt.sdk.circle.MyTextView
  android:id="@+id/my_textview"
  android:layout_width="100dp"
  android:layout_height="100dp"
  android:background="@color/colorAccent"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintLeft_toLeftOf="parent"
  app:layout_constraintRight_toRightOf="parent"
  app:layout_constraintTop_toTopOf="parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

4 效果

初始進(jìn)來(lái)如下效果,4圓角效果

Android自定義View實(shí)現(xiàn)帶4圓角或者2圓角的效果

然后我們點(diǎn)擊圖片切換效果如下,上2圓角效果

Android自定義View實(shí)現(xiàn)帶4圓角或者2圓角的效果

總結(jié)

到此這篇關(guān)于Android自定義View實(shí)現(xiàn)帶4圓角或者2圓角的效果的文章就介紹到這了,更多相關(guān)android 自定義view 圓角內(nèi)容請(qǐng)搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI