自定義view 之多個引導層動畫效果

管浩然發表於2017-09-26
View動畫

##SupernatantView

  • 如果我英文還可以的話這個應該叫做漂浮在上層的view---引導層
  • 今天閒來無事看了網上的一些引導層案例總感覺如果不是很舒服,就是類似於很死板的顯示和消失
  • 我在想能不能弄點動畫上去看著舒服一些 所以就有了以下的gif gif有點短但是沒辦法太長了github傳不上去 不知道是不是我操作不太對

Markdown
Markdown

  • 剛開始點選螢幕是沒有反應的 因為我把點選事件攔截了 後面程式碼可以看得到
  • 因為我們產品汪沒有這樣的需求 所以我有的地方寫的不是很嚴謹 包括指示箭頭在下方如果下方距離不夠箭頭顯示的時候 我也沒有做判斷 只是把大體的意思寫出來了 大家如果想更改 可以看裡邊的註釋 (偷偷告訴你們裡邊註釋賊多 不怕你看不懂)

  • step 1

    繼承view 重寫構造方法 和 onTouchEvent 和 draw 方法

       public SupernatantView(Context context) {
          this(context, null);
      }

      public SupernatantView(Context context, AttributeSet attrs) {
              this(context, attrs, 0);
      }

      public SupernatantView(Context context, AttributeSet attrs, int defStyleAttr) {
          super(context, attrs, defStyleAttr);

      }複製程式碼

    onDraw 方法

          @Override
  protected void onDraw(Canvas canvas) {
      super.onDraw(canvas);
  }複製程式碼

    onTouchEvent方法

           @Override
      public boolean onTouchEvent(MotionEvent event) {

  //        return super.onTouchEvent(event);
  return true;  //攔截點選事件
      }複製程式碼

  • step 2

    初始化畫筆方法 單獨抽取出來

      private Paint createPaint(int paintColor, int alpha, int textSize, Paint.Style style, int linWidth) {
  Paint paint = new Paint();                  //初始化畫筆
  paint.setAntiAlias(true);                   //抗鋸齒
  paint.setDither(true);                      //防抖動
  paint.setStrokeCap(Paint.Cap.ROUND);        //筆觸風格為圓角
  paint.setStrokeJoin(Paint.Join.ROUND);      //結合處形狀為圓角
  paint.setColor(paintColor);                 //設定顏色
  paint.setAlpha(alpha);                      //設定透明度
  paint.setTextSize(textSize);                //設定文字大小
  paint.setStyle(style);                      //設定樣式
  paint.setStrokeWidth(linWidth);             //設定邊寬度
  return paint;
      }    複製程式碼

  • step 3

    初始化各種數值 包括 螢幕的寬高 狀態列

        public static int[] getScreenSize(Context context) {
  DisplayMetrics metrics = new DisplayMetrics();
  WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
  windowManager.getDefaultDisplay().getMetrics(metrics);
  return new int[]{metrics.widthPixels, metrics.heightPixels};
      }

   public static int getStatusBarHeight() {
  return Resources.getSystem().getDimensionPixelSize(
          Resources.getSystem().getIdentifier("status_bar_height", "dimen", "android"));
      }複製程式碼

  • step 4

    一些基本的方法包括獲取view 的螢幕座標,獲取view 的 RectF 具體在程式碼裡會有詳細的註釋 給你先看個圖片 沒錯就是這麼詳細 哦哈哈哈~~~

Markdown
Markdown

  • step 5

    就是重寫onDraw方法了 再加上計算一些動態資料之類的 程式碼太多就不貼出來了 大家如果感興趣可以看看

github風火輪:github.com/guanhaoran/…

QQ 765307272

相關文章