2013-08-22 7 views
5

初めて実行したとき(またはメジャーアップデートを行った後)、一部のGoogleアプリやコアAndroidシステム自体が、新しい機能の使い方を短いツールチップで透明なオーバーレイで表示することがあります。例として、画像があります。最初の実行時にオーバーレイツールチップを表示

これらを作成するためのAndroidフレームワークにはAPIがありますか、それともすべてカスタムですか?後者の場合、どのように実装しますか?最後に、これらのツールチップには公式/技術的な名前が付いていますか(これは主題に関するいくつかの情報をグーグルで調べるときに役立つかもしれません)。ありがとう。

編集

私はより正確に、私が何を意味するかを示すスクリーンショットを取得しました。 「ポインティングハンド」グラフィックとは別に、このツールチップには時計アプリのアイコンの周りにハイライトサークルがあります。これは、クリック後に消えていく単純な半透明のオーバーレイではありません。この時点で時計アイコンをクリックしたり、長押しすることはできますが、ツールチップが消えるまで他のアイコン(円の外側)にはアクセスできません。この行動はすべてこの目的のために特別に作られたものか、またはいくつかの施設が存在するのでしょうか?

enter image description here

+1

"balloon-tooltip"エフェクトの後であっても、私はこの質問を自分自身で直そうとしていました。あなたはこれを行う方法を見つけましたか?私は一度使用される機能のレイアウトをもっと複雑にしたくないと思っています。 – Basic

答えて

3

それはちょうど半透明のダイアログです。

dialog.show()

Dialog dialog= new Dialog(context, R.style.Theme_TutorialDialog); 

/半透明の効果を得るために、画面上のダイアログを作成RESフォルダに

<style name="Theme.TranparentDialog" parent="@android:style/Theme.NoTitleBar"> 
     <item name="android:colorBackgroundCacheHint">@null</item> 
     <item name="android:windowIsTranslucent">true</item> 
     <item name="android:colorForeground">@color/transparent</item> 
     <item name="android:windowIsFloating">false</item> 
     <item name="android:backgroundDimEnabled">false</item> 
     <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item> 
     <item name="android:windowBackground">@color/transparent</item> 
    </style> 

をthemes.xmlに以下のコードを挿入します。

+0

答えをありがとう。しかし、より正確なスクリーンショットを提供し、少し質問を更新しました。それを見てください。 – Natix

0

上記のダイアログで背景として使用されている場合は、このビューを使用して画面上に透明な四角形を描くことができます。

public class WindowView extends View { 
private static final int LOW_DPI_STATUS_BAR_HEIGHT = 19; 

private static final int MEDIUM_DPI_STATUS_BAR_HEIGHT = 25; 

private static final int HIGH_DPI_STATUS_BAR_HEIGHT = 38; 
Context mContext; 

int mHeight, mWidth, mTop, mRight, mLeft, mBottom; 
Rect mLeftRect, mRightRect, mTopRect, mBottomRect; 

Rect mRect; 
Paint mPaint; 
View mAnchorView; 
Paint mTempPaint1; 

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

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

public WindowView(Context context, AttributeSet attrs, int defStyle) { 
    super(context, attrs, defStyle); 
    mContext = context; 
    initVariables(); 
} 

boolean mReset = false; 

GestureDetector mGestureDetector; 
GestureDetector.SimpleOnGestureListener mSimpleOnGestureListener; 

private View getView() { 
    return this; 
} 

@Override 
public boolean onTouchEvent(MotionEvent event) { 
    if (mSimpleOnGestureListener == null) { 
     mSimpleOnGestureListener = new SimpleOnGestureListener() { 
      @Override 
      public boolean onSingleTapConfirmed(MotionEvent e) { 
       if (mListener != null && e.getX() >= mRect.left 
         && e.getX() <= mRect.right && e.getY() >= mRect.top 
         && e.getY() <= mRect.bottom) 
        mListener.onClick(getView()); 
       return true; 
      } 
     }; 
    } 
    if (mGestureDetector == null) { 
     mGestureDetector = new GestureDetector(mContext, 
       mSimpleOnGestureListener); 
    } 
    mGestureDetector.onTouchEvent(event); 
    return true; 
} 

private void initVariables() { 
    mPaint = new Paint(); 
    mPaint.setStyle(Style.FILL); 
    mPaint.setColor(mContext.getResources().getColor(
      R.color.tut_transcluscent_bg)); 
    mRect = new Rect(); 

    mTempPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG); 
    mTempPaint1.setAlpha(64); 
    mTempPaint1.setColorFilter(new PorterDuffColorFilter(Color.WHITE, 
      Mode.SRC_IN)); 
} 

OnClickListener mListener; 

public void setTransparentBackGroundColor(int color) { 
    mPaint.setColor(color); 
    invalidate(); 
} 

@Override 
public void setOnClickListener(OnClickListener l) { 
    mListener = l; 
} 

public View getAnchorView() { 
    return mAnchorView; 
} 

float[] mPaddings; 
Rect mAnchorRect;; 

public void setAnchorView(View mView, Rect rect, float[] paddings) { 
    mAnchorRect = rect; 
    if (mAnchorRect == null) 
     mAnchorView = mView; 
    else 
     mAnchorView = null; 
    mPaddings = paddings; 
    requestLayout(); 
    invalidate(); 
} 

@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
    if (mAnchorView != null || mAnchorRect != null) 
     initView(); 
    mReset = true; 
} 

boolean mFlagInvalid = false; 
Handler mAnrHandler; 

public void setHandler(Handler handler) { 
    mAnrHandler = handler; 
} 

private int getStatusBarHeight() { 
    DisplayMetrics displayMetrics = new DisplayMetrics(); 
    ((WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE)) 
      .getDefaultDisplay().getMetrics(displayMetrics); 

    int statusBarHeight; 

    switch (displayMetrics.densityDpi) { 
    case DisplayMetrics.DENSITY_HIGH: 
     statusBarHeight = HIGH_DPI_STATUS_BAR_HEIGHT; 
     break; 
    case DisplayMetrics.DENSITY_MEDIUM: 
     statusBarHeight = MEDIUM_DPI_STATUS_BAR_HEIGHT; 
     break; 
    case DisplayMetrics.DENSITY_LOW: 
     statusBarHeight = LOW_DPI_STATUS_BAR_HEIGHT; 
     break; 
    default: 
     statusBarHeight = MEDIUM_DPI_STATUS_BAR_HEIGHT; 
    } 
    return statusBarHeight; 
} 

public void initView() { 

    mFlagInvalid = false; 
    int top = 0, left = 0; 
    if (mAnchorView != null) { 
     top = mAnchorView.getTop(); 
     left = mAnchorView.getLeft(); 
     View temp = mAnchorView; 
     int cnt = 0; 
     try { 
      while (((View) temp.getParent()).getId() != android.R.id.content) { 
       temp = (View) temp.getParent(); 
       int scrolledHeight = 0; 
       if (temp instanceof ScrollView) { 
        scrolledHeight = ((ScrollView) temp).getScrollY(); 
       } 
       top = top + temp.getTop() - scrolledHeight; 
       left = left + temp.getLeft(); 
       cnt++; 
       if (cnt > 100) { 
        if (mAnrHandler != null) 
         mAnrHandler.sendEmptyMessage(9); 
        mFlagInvalid = true; 
        break; 
       } 
      } 
     } catch (Exception e) { 
      mFlagInvalid = true; 
      if (mAnrHandler != null) 
       mAnrHandler.sendEmptyMessage(8); 
      e.printStackTrace(); 
     } 
     TypedValue tv = new TypedValue(); 
     if (getContext() 
       .getTheme() 
       .resolveAttribute(
         VERSION.SDK_INT >= VERSION_CODES.HONEYCOMB ? android.R.attr.actionBarSize 
           : R.attr.actionBarSize, tv, true)) { 
      int actionBarHeight = TypedValue.complexToDimensionPixelSize(
        tv.data, getResources().getDisplayMetrics()); 
      top = top + actionBarHeight; 
     } 

    } else if (mAnchorRect != null) { 
    } 

    if (mFlagInvalid) 
     init(20, 20, 50, 50); 
    else { 
     if (mAnchorRect != null) { 
      init(mAnchorRect.bottom, mAnchorRect.right, mAnchorRect.left, 
        mAnchorRect.top); 
     } else 
      init(mAnchorView.getHeight(), mAnchorView.getWidth(), left, top); 
    } 
} 

public void init(int height, int width, int left, int top) { 
    mWidth = width; 
    mHeight = height; 
    mTop = top; 
    mBottom = top + height; 
    mLeft = left; 
    mRight = left + width; 

    mLeft = (int) (mLeft + mPaddings[0] * mWidth); 
    mTop = (int) (mTop + mPaddings[1] * mHeight); 
    mRight = (int) (mRight - mPaddings[2] * mWidth); 
    mBottom = (int) (mBottom - mPaddings[3] * mHeight); 
    mRect = new Rect(mLeft, mTop, mRight, mBottom); 

    invalidate(); 
} 

public Rect getAnchorRect() { 
    return mRect; 
} 

@Override 
protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
    initOnceOnDraw(); 
    canvas.drawRect(mLeftRect, mPaint); 
    canvas.drawRect(mTopRect, mPaint); 
    canvas.drawRect(mRightRect, mPaint); 
    canvas.drawRect(mBottomRect, mPaint); 
    canvas.drawRect(mRect, mTempPaint1); 
} 

private void initOnceOnDraw() { 
    if (mReset) { 
     mReset = false; 
     mTopRect = new Rect(0, 0, getWidth(), mRect.top); 
     mLeftRect = new Rect(0, mRect.top, mRect.left, mRect.bottom); 
     mRightRect = new Rect(mRect.right, mRect.top, getWidth(), 
       mRect.bottom); 
     mBottomRect = new Rect(0, mRect.bottom, getWidth(), getHeight()); 
    } 
}} 

メソッドsetAnchorViewは()これは、私はそれがShowcaseView Libraryを使用してだと思う

1

を助け

mWindowView = (WindowView) mTutorialView 
          .findViewById(R.id.windowview_tutorial); 
         mWindowView.setTransparentBackGroundColor(backgroundColor); 

        mWindowView.setAnchorView(view, null, padding); 

希望..オーバーレイが描かれていなければ、その上のビューを提供します。 this related question

関連する問題