画出片段多对象图 [英] Draw multi object diagram in fragment
本文介绍了画出片段多对象图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想实现绘图就像图像连接，但我无法同时把其它物体放在上面绘制右侧的红色竖长方形的示意图。最大的担忧是做Android设备的众多不同的屏幕尺寸。我完全明白我在尝试的过程中，其中包括以下各项目标过程中实现的。所有帮助将是非常美联社preciated。
- 1红色矩形在屏幕的两侧（右手边，我不知道怎么画有） 在两者之间的红色垂直长方形需要相等宽度
- 在7灰箱
- 黑色垂直线需要在该矩形之间就像上面 在图像中
- 在一个文本框中显示了一些需要在每一个灰色的矩形的中心与小红的人
- 我也希望能够重用图中的未来，所以我可以填补小盒子与红色或黑色每当我想
布局
＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT; RelativeLayout的
的xmlns：机器人=http://schemas.android.com/apk/res/android
机器人：layout_width =match_parent
机器人：layout_height =match_parent
机器人：方向=垂直＆GT;
＆LT; my.package.name.ComplexDiagram
机器人：layout_width =match_parent
机器人：layout_height =65dp
机器人：layout_centerVertical =真
/＆GT;
＆LT; / RelativeLayout的＆GT;
的Java
进口android.content.Context;
进口android.graphics.Canvas;
进口android.graphics.Paint;
进口android.graphics.RectF;
进口android.util.AttributeSet;
进口android.view.View;
公共类ComplexDiagram扩展视图{
私人诠释是measuredWidth，measuredHeight可以;
私人油漆mGreyRectPaint，mBlackLinePaint，mRedRectPaint;
私人RectF mGreyRect，mBlackLineF，mRedRectF;
公共ComplexDiagram（上下文的背景下）{
超（上下文）;
初始化（上下文，空，0）;
}
公共ComplexDiagram（上下文的背景下，ATTRS的AttributeSet）{
超（背景下，ATTRS）;
初始化（上下文，ATTRS，0）;
}
公共ComplexDiagram（上下文的背景下，ATTRS的AttributeSet，诠释defStyleAttr）{
超（背景下，ATTRS，defStyleAttr）;
的init（背景下，ATTRS，defStyleAttr）;
}
私人无效的init（上下文的背景下，AttributeSet中的AttributeSet，INT defStyle）{
mGreyRectPaint =新的油漆（Paint.ANTI_ALIAS_FLAG）;
mGreyRectPaint.setColor（0xFF3C3C3C）;
mGreyRectPaint.setStyle（Paint.Style.FILL）;
mBlackLinePaint =新的油漆（Paint.ANTI_ALIAS_FLAG）;
mBlackLinePaint.setColor（0xFF000000）;
mBlackLinePaint.setStyle（Paint.Style.FILL）;
mRedRectPaint =新的油漆（Paint.ANTI_ALIAS_FLAG）;
mRedRectPaint.setColor（0xFFCC3333）;
mRedRectPaint.setStyle（Paint.Style.FILL）;
}
@覆盖
保护无效onMeasure（INT widthMeasureSpec，诠释heightMeasureSpec）{
super.onMeasure（widthMeasureSpec，heightMeasureSpec）;
是measuredHeight = getDefaultSize（getSuggestedMinimumHeight（），heightMeasureSpec）;
是measuredWidth = getDefaultSize（getSuggestedMinimumWidth（），widthMeasureSpec）;
setMeasuredDimension（是measuredWidth，measuredHeight可以）;
}
@覆盖
保护无效的OnDraw（帆布油画）{
super.onDraw（画布）;
如果（measuredHeight可以== 0 ||是measuredWidth == 0）
返回;
canvas.drawRect（mGreyRect，mGreyRectPaint）;
canvas.drawRect（mBlackLineF，mBlackLinePaint）;
canvas.drawRect（mRedRectF，mRedRectPaint）;
}
}
解决方案
做这样
在你的XML将这个
＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT; LinearLayout中的xmlns：机器人=http://schemas.android.com/apk/res/android
机器人：layout_width =match_parent
机器人：layout_height =50dp
机器人：方向=横向＆GT;
＆LT;查看
机器人：layout_width =5DP
机器人：layout_height =WRAP_CONTENT
机器人：后台=＃CC3333/＆GT;
＆LT; RelativeLayout的
机器人：layout_width =0dp
机器人：layout_height =match_parent
机器人：layout_weight =1
机器人：后台=＃808080＆GT;
＆LT;查看
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentLeft =真
机器人：layout_marginLeft =1DP
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_centerHorizontal =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentRight =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;的TextView
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_centerInParent =真
机器人：重力=中心
机器人：文本=1
机器人：文字颜色=@机器人：彩色/黑白/＆GT;
＆LT;查看
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentLeft =真
机器人：layout_marginLeft =1DP
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_centerHorizontal =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentRight =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT; / RelativeLayout的＆GT;
＆LT;查看
机器人：layout_width =1DP
机器人：layout_height =WRAP_CONTENT
机器人：后台=＃1D1D1D/＆GT;
＆LT; RelativeLayout的
机器人：layout_width =0dp
机器人：layout_height =match_parent
机器人：layout_weight =1
机器人：后台=＃808080＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX1
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentLeft =真
机器人：layout_marginLeft =1DP
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX2
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_marginLeft =2DP
机器人：layout_toRightOf =@ + ID / BOX1
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX3
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_marginRight =2DP
机器人：layout_toLeftOf =@ + ID / box4
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box4
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentRight =真
机器人：后台=＃CC3333/＆GT;
＆LT;的TextView
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_centerInParent =真
机器人：重力=中心
机器人：文本=2
机器人：文字颜色=@机器人：彩色/黑白/＆GT;
＆LT;查看
机器人：ID =@ + ID /了Box5
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentLeft =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX6
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_marginLeft =2DP
机器人：layout_toRightOf =@ + ID /了Box5
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box7
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_marginRight =2DP
机器人：layout_toLeftOf =@ + ID / box8
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box8
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentRight =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT; / RelativeLayout的＆GT;
＆LT;查看
机器人：layout_width =1DP
机器人：layout_height =WRAP_CONTENT
机器人：后台=＃1D1D1D/＆GT;
＆LT; RelativeLayout的
机器人：layout_width =0dp
机器人：layout_height =match_parent
机器人：layout_weight =1
机器人：后台=＃808080＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX1
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentLeft =真
机器人：layout_marginLeft =1DP
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX2
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_marginLeft =2DP
机器人：layout_toRightOf =@ + ID / BOX1
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX3
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_marginRight =2DP
机器人：layout_toLeftOf =@ + ID / box4
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box4
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentRight =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;的TextView
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_centerInParent =真
机器人：重力=中心
机器人：文本=3
机器人：文字颜色=@机器人：彩色/黑白/＆GT;
＆LT;查看
机器人：ID =@ + ID /了Box5
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentLeft =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX6
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_marginLeft =2DP
机器人：layout_toRightOf =@ + ID /了Box5
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box7
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_marginRight =2DP
机器人：layout_toLeftOf =@ + ID / box8
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box8
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentRight =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT; / RelativeLayout的＆GT;
＆LT;查看
机器人：layout_width =1DP
机器人：layout_height =WRAP_CONTENT
机器人：后台=＃1D1D1D/＆GT;
＆LT; RelativeLayout的
机器人：layout_width =0dp
机器人：layout_height =match_parent
机器人：layout_weight =1
机器人：后台=＃808080＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX1
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentLeft =真
机器人：layout_marginLeft =1DP
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX2
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_marginLeft =2DP
机器人：layout_toRightOf =@ + ID / BOX1
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX3
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_marginRight =2DP
机器人：layout_toLeftOf =@ + ID / box4
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box4
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentRight =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;的TextView
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_centerInParent =真
机器人：重力=中心
机器人：文本=4
机器人：文字颜色=@机器人：彩色/黑白/＆GT;
＆LT;查看
机器人：ID =@ + ID /了Box5
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentLeft =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX6
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_marginLeft =2DP
机器人：layout_toRightOf =@ + ID /了Box5
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box7
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_marginRight =2DP
机器人：layout_toLeftOf =@ + ID / box8
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box8
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentRight =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT; / RelativeLayout的＆GT;
＆LT;查看
机器人：layout_width =1DP
机器人：layout_height =WRAP_CONTENT
机器人：后台=＃1D1D1D/＆GT;
＆LT; RelativeLayout的
机器人：layout_width =0dp
机器人：layout_height =match_parent
机器人：layout_weight =1
机器人：后台=＃808080＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX1
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentLeft =真
机器人：layout_marginLeft =1DP
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX2
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_marginLeft =2DP
机器人：layout_toRightOf =@ + ID / BOX1
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX3
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_marginRight =2DP
机器人：layout_toLeftOf =@ + ID / box4
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box4
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentRight =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;的TextView
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_centerInParent =真
机器人：重力=中心
机器人：文本=5
机器人：文字颜色=@机器人：彩色/黑白/＆GT;
＆LT;查看
机器人：ID =@ + ID /了Box5
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentLeft =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX6
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_marginLeft =2DP
机器人：layout_toRightOf =@ + ID /了Box5
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box7
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_marginRight =2DP
机器人：layout_toLeftOf =@ + ID / box8
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box8
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentRight =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT; / RelativeLayout的＆GT;
＆LT;查看
机器人：layout_width =1DP
机器人：layout_height =WRAP_CONTENT
机器人：后台=＃1D1D1D/＆GT;
＆LT; RelativeLayout的
机器人：layout_width =0dp
机器人：layout_height =match_parent
机器人：layout_weight =1
机器人：后台=＃808080＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX1
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentLeft =真
机器人：layout_marginLeft =1DP
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX2
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_marginLeft =2DP
机器人：layout_toRightOf =@ + ID / BOX1
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX3
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_marginRight =2DP
机器人：layout_toLeftOf =@ + ID / box4
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box4
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentRight =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;的TextView
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_centerInParent =真
机器人：重力=中心
机器人：文本=6
机器人：文字颜色=@机器人：彩色/黑白/＆GT;
＆LT;查看
机器人：ID =@ + ID /了Box5
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentLeft =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / BOX6
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_marginLeft =2DP
机器人：layout_toRightOf =@ + ID /了Box5
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box7
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_marginRight =2DP
机器人：layout_toLeftOf =@ + ID / box8
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：ID =@ + ID / box8
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentRight =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT; / RelativeLayout的＆GT;
＆LT;查看
机器人：layout_width =1DP
机器人：layout_height =WRAP_CONTENT
机器人：后台=＃1D1D1D/＆GT;
＆LT; RelativeLayout的
机器人：layout_width =0dp
机器人：layout_height =match_parent
机器人：layout_weight =1
机器人：后台=＃808080＆GT;
＆LT;查看
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentLeft =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_centerHorizontal =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentRight =真
机器人：layout_marginRight =1DP
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;的TextView
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_centerInParent =真
机器人：重力=中心
机器人：文本=7
机器人：文字颜色=@机器人：彩色/黑白/＆GT;
＆LT;查看
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentLeft =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_centerHorizontal =真
机器人：背景=@可绘制/ red_background/＆GT;
＆LT;查看
机器人：layout_width =10dp
机器人：layout_height =10dp
机器人：layout_alignParentBottom =真
机器人：layout_alignParentRight =真
机器人：layout_marginRight =1DP
机器人：背景=@可绘制/ red_background/＆GT;
＆LT; / RelativeLayout的＆GT;
＆LT;查看
机器人：layout_width =5DP
机器人：layout_height =WRAP_CONTENT
机器人：后台=＃CC3333/＆GT;
＆LT; / LinearLayout中＆GT;
红rectangle.xml
＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;形状的xmlns：机器人=http://schemas.android.com/apk/res/android
机器人：形状=矩形＆GT;
[固体机器人：颜色=@机器人：彩色/透明/＆GT;
＆LT;中风
机器人：宽=1dip
机器人：颜色=＃CC3333/＆GT;
＆LT; /形状＆GT;
I'd like to achieve drawing a diagram just like the image attached but I'm having trouble drawing the red vertical rectangle on the right along with putting other objects on top. The biggest concern is the to do with numerous different screen sizes of Android devices. I fully understand what I'm trying to achieve during the process, which includes the objectives below. All help would be highly appreciated.
- 1 red rectangle on each side of the screen (right hand side I don't know how to draw there)
- 7 grey boxes in between the red vertical rectangles need to be equal in width
- a black vertical line needs to be in between the rectangles just like in the image above
- a text box showing a number needs to be in the center of each grey rectangle along with little red ones
- I also want to be able to reuse the diagram in future so I can fill the little boxes with red or black whenever I want
Layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<my.package.name.ComplexDiagram
android:layout_width="match_parent"
android:layout_height="65dp"
android:layout_centerVertical="true"
/>
</RelativeLayout>
Java
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
public class ComplexDiagram extends View {
private int measuredWidth, measuredHeight;
private Paint mGreyRectPaint, mBlackLinePaint, mRedRectPaint;
private RectF mGreyRect, mBlackLineF, mRedRectF;
public ComplexDiagram(Context context) {
super(context);
init(context, null, 0);
}
public ComplexDiagram(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}
public ComplexDiagram(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
private void init(Context context, AttributeSet attributeSet, int defStyle) {
mGreyRectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mGreyRectPaint.setColor(0xFF3C3C3C);
mGreyRectPaint.setStyle(Paint.Style.FILL);
mBlackLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBlackLinePaint.setColor(0xFF000000);
mBlackLinePaint.setStyle(Paint.Style.FILL);
mRedRectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mRedRectPaint.setColor(0xFFCC3333);
mRedRectPaint.setStyle(Paint.Style.FILL);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
setMeasuredDimension(measuredWidth, measuredHeight);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (measuredHeight == 0 || measuredWidth == 0)
return;
canvas.drawRect(mGreyRect, mGreyRectPaint);
canvas.drawRect(mBlackLineF, mBlackLinePaint);
canvas.drawRect(mRedRectF, mRedRectPaint);
}
}
解决方案
do it this way
Put this in your XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
<View
android:layout_width="5dp"
android:layout_height="wrap_content"
android:background="#CC3333" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerHorizontal="true"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="1"
android:textColor="@android:color/black" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#1D1D1D" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:id="@+id/box1"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:id="@+id/box2"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box1"
android:background="@drawable/red_background" />
<View
android:id="@+id/box3"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box4"
android:background="@drawable/red_background" />
<View
android:id="@+id/box4"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:background="#CC3333" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="2"
android:textColor="@android:color/black" />
<View
android:id="@+id/box5"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:id="@+id/box6"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box5"
android:background="@drawable/red_background" />
<View
android:id="@+id/box7"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box8"
android:background="@drawable/red_background" />
<View
android:id="@+id/box8"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#1D1D1D" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:id="@+id/box1"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:id="@+id/box2"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box1"
android:background="@drawable/red_background" />
<View
android:id="@+id/box3"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box4"
android:background="@drawable/red_background" />
<View
android:id="@+id/box4"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="3"
android:textColor="@android:color/black" />
<View
android:id="@+id/box5"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:id="@+id/box6"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box5"
android:background="@drawable/red_background" />
<View
android:id="@+id/box7"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box8"
android:background="@drawable/red_background" />
<View
android:id="@+id/box8"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#1D1D1D" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:id="@+id/box1"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:id="@+id/box2"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box1"
android:background="@drawable/red_background" />
<View
android:id="@+id/box3"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box4"
android:background="@drawable/red_background" />
<View
android:id="@+id/box4"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="4"
android:textColor="@android:color/black" />
<View
android:id="@+id/box5"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:id="@+id/box6"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box5"
android:background="@drawable/red_background" />
<View
android:id="@+id/box7"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box8"
android:background="@drawable/red_background" />
<View
android:id="@+id/box8"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#1D1D1D" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:id="@+id/box1"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:id="@+id/box2"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box1"
android:background="@drawable/red_background" />
<View
android:id="@+id/box3"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box4"
android:background="@drawable/red_background" />
<View
android:id="@+id/box4"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="5"
android:textColor="@android:color/black" />
<View
android:id="@+id/box5"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:id="@+id/box6"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box5"
android:background="@drawable/red_background" />
<View
android:id="@+id/box7"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box8"
android:background="@drawable/red_background" />
<View
android:id="@+id/box8"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#1D1D1D" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:id="@+id/box1"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="1dp"
android:background="@drawable/red_background" />
<View
android:id="@+id/box2"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box1"
android:background="@drawable/red_background" />
<View
android:id="@+id/box3"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box4"
android:background="@drawable/red_background" />
<View
android:id="@+id/box4"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="6"
android:textColor="@android:color/black" />
<View
android:id="@+id/box5"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:id="@+id/box6"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/box5"
android:background="@drawable/red_background" />
<View
android:id="@+id/box7"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="@+id/box8"
android:background="@drawable/red_background" />
<View
android:id="@+id/box8"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#1D1D1D" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" >
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerHorizontal="true"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentRight="true"
android:layout_marginRight="1dp"
android:background="@drawable/red_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="7"
android:textColor="@android:color/black" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/red_background" />
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="1dp"
android:background="@drawable/red_background" />
</RelativeLayout>
<View
android:layout_width="5dp"
android:layout_height="wrap_content"
android:background="#CC3333" />
</LinearLayout>
for red rectangle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="@android:color/transparent" />
<stroke
android:width="1dip"
android:color="#CC3333" />
</shape>
这篇关于画出片段多对象图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
