Android自定义文件路径箭头,Android自定义ViewGroup实现带箭头的圆角矩形菜单
本文和大家一起做一個(gè)帶箭頭的圓角矩形菜單，大概長(zhǎng)下面這個(gè)樣子：
要求頂上的箭頭要對(duì)準(zhǔn)菜單錨點(diǎn)，菜單項(xiàng)按壓反色，菜單背景色和按壓色可配置。
最簡(jiǎn)單的做法就是讓UX給個(gè)三角形的圖片往上一貼，但是轉(zhuǎn)念一想這樣是不是太low了點(diǎn)，而且不同分辨率也不太好適配，干脆自定義一個(gè)ViewGroup吧！
自定義ViewGroup其實(shí)很簡(jiǎn)單，基本都是按一定的套路來的。
一、定義一個(gè)attrs.xml
就是聲明一下你的這個(gè)自定義View有哪些可配置的屬性，將來使用的時(shí)候可以自由配置。這里聲明了7個(gè)屬性，分別是：箭頭寬度、箭頭高度、箭頭水平偏移、圓角半徑、菜單背景色、陰影色、陰影厚度。
二、寫一個(gè)繼承ViewGroup的類，在構(gòu)造函數(shù)中初始化這些屬性
這里需要用到一個(gè)obtainStyledAttributes()方法，獲取一個(gè)TypedArray對(duì)象，然后就可以根據(jù)類型獲取相應(yīng)的屬性值了。需要注意的是該對(duì)象用完以后需要顯式調(diào)用recycle()方法釋放掉。public class ArrowRectangleView extends ViewGroup {
... ...
public ArrowRectangleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.ArrowRectangleView, defStyleAttr, 0);
for (int i = 0; i < a.getIndexCount(); i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.ArrowRectangleView_arrow_width:
mArrowWidth = a.getDimensionPixelSize(attr, mArrowWidth);
break;
case R.styleable.ArrowRectangleView_arrow_height:
mArrowHeight = a.getDimensionPixelSize(attr, mArrowHeight);
break;
case R.styleable.ArrowRectangleView_radius:
mRadius = a.getDimensionPixelSize(attr, mRadius);
break;
case R.styleable.ArrowRectangleView_background_color:
mBackgroundColor = a.getColor(attr, mBackgroundColor);
break;
case R.styleable.ArrowRectangleView_arrow_offset:
mArrowOffset = a.getDimensionPixelSize(attr, mArrowOffset);
break;
case R.styleable.ArrowRectangleView_shadow_color:
mShadowColor = a.getColor(attr, mShadowColor);
break;
case R.styleable.ArrowRectangleView_shadow_thickness:
mShadowThickness = a.getDimensionPixelSize(attr, mShadowThickness);
break;
}
}
a.recycle();
}
三、重寫onMeasure()方法
onMeasure()方法，顧名思義，就是用來測(cè)量你這個(gè)ViewGroup的寬高尺寸的。
我們先考慮一下高度：
?首先要為箭頭跟圓角預(yù)留高度，maxHeight要加上這兩項(xiàng)
?然后就是測(cè)量所有可見的child，ViewGroup已經(jīng)提供了現(xiàn)成的measureChild()方法
?接下來就把獲得的child的高度累加到maxHeight上，當(dāng)然還要考慮上下的margin配置
?除此以外，還需要考慮到上下的padding，以及陰影的高度
?最后通過setMeasuredDimension()設(shè)置生效
在考慮一下寬度：
?首先也是通過measureChild()方法測(cè)量所有可見的child
?然后就是比較這些child的寬度以及左右的margin配置，選最大值
?接下來還有加上左右的padding，以及陰影寬度
?最后通過setMeasuredDimension()設(shè)置生效@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int count = getChildCount();
int maxWidth = 0;
// reserve space for the arrow and round corners
int maxHeight = mArrowHeight + mRadius;
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
if (child.getVisibility() != GONE) {
measureChild(child, widthMeasureSpec, heightMeasureSpec);
maxWidth = Math.max(maxWidth, child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin);
maxHeight = maxHeight + child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
}
}
maxWidth = maxWidth + getPaddingLeft() + getPaddingRight() + mShadowThickness;
maxHeight = maxHeight + getPaddingTop() + getPaddingBottom() + mShadowThickness;
setMeasuredDimension(maxWidth, maxHeight);
}
看起來是不是很簡(jiǎn)單？當(dāng)然還有兩個(gè)小問題：
1. 高度為圓角預(yù)留尺寸的時(shí)候，為什么只留了一個(gè)半徑，而不是上下兩個(gè)半徑？
其實(shí)這是從顯示效果上來考慮的，如果上下各留一個(gè)半徑，會(huì)造成菜單的邊框很厚不好看，后面實(shí)現(xiàn)onLayout()的時(shí)候你會(huì)發(fā)現(xiàn)，我們布局菜單項(xiàng)的時(shí)候會(huì)往上移半個(gè)半徑，這樣邊框看起來就好看多了。
2. Child的布局參數(shù)為什么可以強(qiáng)轉(zhuǎn)成MarginLayoutParams?
這里其實(shí)需要重寫另一個(gè)方法generateLayoutParams()，返回你想要布局參數(shù)類型。一般就是用MarginLayoutParams，當(dāng)然你也可以用其他類型或者自定義類型。@Override
public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
四、重寫onLayout()方法
onLayout()方法，顧名思義，就是用來布局這個(gè)ViewGroup里的所有子View的。
實(shí)際上每個(gè)View都有一個(gè)layout()方法，我們需要做的只是把合適的left/top/right/bottom坐標(biāo)傳入這個(gè)方法就可以了。
這里就可以看到，我們布局菜單項(xiàng)的時(shí)候往上提了半個(gè)半徑，因此topOffset只加了半個(gè)半徑，另外右側(cè)的坐標(biāo)也只減了半個(gè)半徑。@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
int topOffset = t + mArrowHeight + mRadius/2;
int top = 0;
int bottom = 0;
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
top = topOffset + i * child.getMeasuredHeight();
bottom = top + child.getMeasuredHeight();
child.layout(l, top, r - mRadius/2 - mShadowThickness, bottom);
}
}
五、重寫dispatchDraw()方法
這里因?yàn)槲覀兪菍懥艘粋€(gè)ViewGroup容器，本身是不需要繪制的，因此我們就需要重寫它的dispatchDraw()方法。如果你重寫的是一個(gè)具體的View，那也可以重寫它的onDraw()方法。
繪制過程分為三步：
1. 繪制圓角矩形
這一步比較簡(jiǎn)單，直接調(diào)用Canvas的drawRoundRect()就完成了。
2. 繪制三角箭頭
這個(gè)需要根據(jù)配置的屬性，設(shè)定一個(gè)路徑，然后調(diào)用Canvas的drawPath()完成繪制。
3. 繪制菜單陰影
這個(gè)說白了就是換一個(gè)顏色再畫一個(gè)圓角矩形，位置略有偏移，當(dāng)然還要有模糊效果。
要獲得模糊效果，需要通過Paint的setMaskFilter()進(jìn)行配置，并且需要關(guān)閉該圖層的硬件加速，這一點(diǎn)在API里有明確說明。
除此以外，還需要設(shè)置源圖像和目標(biāo)圖像的重疊模式，陰影顯然要疊到菜單背后，根據(jù)下圖可知，我們需要選擇DST_OVER模式。
其他細(xì)節(jié)看代碼就清楚了：@Override
protected void dispatchDraw(Canvas canvas) {
// disable h/w acceleration for blur mask filter
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(mBackgroundColor);
paint.setStyle(Paint.Style.FILL);
// set Xfermode for source and shadow overlap
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER));
// draw round corner rectangle
paint.setColor(mBackgroundColor);
canvas.drawRoundRect(new RectF(0, mArrowHeight, getMeasuredWidth() - mShadowThickness, getMeasuredHeight() - mShadowThickness), mRadius, mRadius, paint);
// draw arrow
Path path = new Path();
int startPoint = getMeasuredWidth() - mArrowOffset;
path.moveTo(startPoint, mArrowHeight);
path.lineTo(startPoint + mArrowWidth, mArrowHeight);
path.lineTo(startPoint + mArrowWidth / 2, 0);
path.close();
canvas.drawPath(path, paint);
// draw shadow
if (mShadowThickness > 0) {
paint.setMaskFilter(new BlurMaskFilter(mShadowThickness, BlurMaskFilter.Blur.OUTER));
paint.setColor(mShadowColor);
canvas.drawRoundRect(new RectF(mShadowThickness, mArrowHeight + mShadowThickness, getMeasuredWidth() - mShadowThickness, getMeasuredHeight() - mShadowThickness), mRadius, mRadius, paint);
}
super.dispatchDraw(canvas);
}
六、在layout XML中引用該自定義ViewGroup
到此為止，自定義ViewGroup的實(shí)現(xiàn)已經(jīng)完成了，那我們就在項(xiàng)目里用一用吧！使用自定義ViewGroup和使用系統(tǒng)ViewGroup組件有兩個(gè)小區(qū)別：
一、是要指定完整的包名，否則運(yùn)行的時(shí)候會(huì)報(bào)找不到該組件。
二、是配置自定義屬性的時(shí)候要需要另外指定一個(gè)名字空間，避免跟默認(rèn)的android名字空間混淆。比如這里就指定了一個(gè)新的app名字空間來引用自定義屬性。<?xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@android:color/transparent"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:splitMotionEvents="false"
app:arrow_offset="31dp"
app:arrow_width="16dp"
app:arrow_height="8dp"
app:radius="5dp"
app:background_color="#ffb1df83"
app:shadow_color="#66000000"
app:shadow_thickness="5dp">
android:id="@+id/cmx_toolbar_menu_turn_off"
android:layout_width="wrap_content"
android:layout_height="42dp">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="16sp"
android:textColor="#FF393F4A"
android:paddingLeft="16dp"
android:paddingRight="32dp"
android:clickable="false"
android:text="Menu Item #1"/>
android:id="@+id/cmx_toolbar_menu_feedback"
android:layout_width="wrap_content"
android:layout_height="42dp">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="16sp"
android:textColor="#FF393F4A"
android:paddingLeft="16dp"
android:paddingRight="32dp"
android:clickable="false"
android:text="Menu Item #2"/>
七、在代碼里引用該layout XML
這個(gè)就跟引用正常的layout XML沒有什么區(qū)別了，這里主要是在創(chuàng)建彈出菜單的時(shí)候指定了剛剛那個(gè)layout XML，具體看下示例代碼就清楚了。
至此，一個(gè)完整的自定義ViewGroup的流程就算走了一遍了，后面有時(shí)間可能還會(huì)寫一些復(fù)雜一些的自定義組件，但是萬變不離其宗，基本的原理跟步驟都是相同的。本文就是拋磚引玉，希望能給需要自定義ViewGroup的朋友一些幫助。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持PHP中文網(wǎng)
更多Android自定義ViewGroup實(shí)現(xiàn)帶箭頭的圓角矩形菜單相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！
聲明：本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請(qǐng)注明出處，感謝您的尊重！如有疑問，請(qǐng)聯(lián)系admin@php.cn處理
總結(jié)
以上是生活随笔為你收集整理的Android自定义文件路径箭头,Android自定义ViewGroup实现带箭头的圆角矩形菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android WebView重定向问题
- 下一篇： android 模拟来电广播,在Andr