如何使这样的看法？其实我试着用drawble意见，但不能让它 [英] How to make a view like this ? Actually I tried with drawble views but can't get it
本文介绍了如何使这样的看法？其实我试着用drawble意见，但不能让它的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
![在这里输入的形象描述](\"http://i.stack.imgur.com/JpnKa.png\")
我想使设计类似图像，并显示手机和7英寸的标签一样。
我使用的线性布局除以视图使用Framlayout画一条线，但不可能达到这样的图像画面的第5部分。
怎么样用帆布或任何其他更好的选择，其他的选项。
第一个图像displing预期的结果。
而另外两个是得到的结果。
＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT;形状
的xmlns：机器人=http://schemas.android.com/apk/res/android
机器人：造型=椭圆形＆GT;
＆LT;梯度
机器人：角=360.0
机器人：ENDCOLOR =＃A29AA4
机器人：startColor =＃A29AA4/＆GT;
＆LT; /形状＆GT;
以下布局
＆LT;的FrameLayout
机器人：layout_width =match_parent
机器人：layout_height =WRAP_CONTENT
机器人：layout_margin =20dp＆GT; ＆LT;的LinearLayout
机器人：layout_width =match_parent
机器人：layout_height =WRAP_CONTENT 机器人：weightSum =5＆GT; ＆LT;的LinearLayout
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_weight =1
机器人：比重=中心＆GT; ＆LT;查看
机器人：ID =@ + ID / mView_circle1
机器人：layout_width =20dp
机器人：layout_height =20dp
机器人：背景=@绘制/ circleshape/＆GT;
＆LT; / LinearLayout中＆GT; ＆LT;的LinearLayout
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_weight =1
机器人：比重=中心＆GT; ＆LT;查看
机器人：ID =@ + ID / mView_circle2
机器人：layout_width =20dp
机器人：layout_height =20dp 机器人：背景=@绘制/ circleshape/＆GT;
＆LT; / LinearLayout中＆GT; ＆LT;的LinearLayout
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_weight =1
机器人：比重=中心＆GT; ＆LT;查看
机器人：ID =@ + ID / mView_circle3
机器人：layout_width =20dp
机器人：layout_height =20dp 机器人：背景=@绘制/ circleshape/＆GT;
＆LT; / LinearLayout中＆GT; ＆LT;的LinearLayout
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_weight =1
机器人：比重=中心＆GT; ＆LT;查看
机器人：ID =@ + ID / mView_circle4
机器人：layout_width =20dp
机器人：layout_height =20dp
机器人：背景=@绘制/ circleshape/＆GT;
＆LT; / LinearLayout中＆GT; ＆LT;的LinearLayout
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_weight =1
机器人：比重=中心＆GT; ＆LT;查看
机器人：ID =@ + ID / mView_circle5
机器人：layout_width =20dp
机器人：layout_height =20dp
机器人：背景=@绘制/ circleshape/＆GT;
＆LT; / LinearLayout中＆GT;
＆LT; / LinearLayout中＆GT; ＆LT; RelativeLayout的
机器人：layout_width =match_parent
机器人：layout_height =1DP
机器人：layout_gravity =center_vertical
机器人：背景=＃A29AA4＆GT; ＆LT; / RelativeLayout的＆GT; ＆LT; /＆的FrameLayout GT;
解决方案
这是在画布上更方便，更清洁。这里是你会怎么做第一个。你可以稍作修改复制本作的另外两个。
创建画布视图：
公共类CanvasView扩展视图{涂料bPaint;
RectF coordbounds;公共CanvasView（上下文的背景下）{
超级（上下文）;
}私人无效的init（）
{
bPaint =新的油漆（Paint.ANTI_ALIAS_FLAG）;
bPaint.setStyle（Paint.Style.FILL_AND_STROKE）;
bPaint.setColor（Color.BLACK）;
}@覆盖
公共无效的onDraw（android.graphics.Canvas帆布）{
super.onDraw（画布）; canvas.drawLine（coordbounds.left，coordbounds.centerY（），
coordbounds.right，coordbounds.centerY（），bPaint）; INT circledia = 20; //划分行成四个部分，并减去2 *一半的半径
浮actualspan =（coordbounds.right - coordbounds.left） - （2 * circledia / 2）;
//段行成3部分
浮interlinesegments = actualspan /（4-1）;
的for（int i = 0;我4;;我++）
{
canvas.drawCircle（coordbounds.left + circledia / 2 +
（我* interlinesegments）
coordbounds.centerY（），10，bPaint）;
}
}}
创建一个布局，以持有的观点，并在你的活动把这种观点：
的LinearLayout布局=（的LinearLayout）findViewById（R.id.root）; CanvasView视图=新CanvasView（本）;
layout.addView（视图）;
哎呀，我忘了。 :-)请CanvasView类添加这种方法来声明边框，并设置布局：
@覆盖
保护无效onSizeChanged（INT W，INT小时，INT oldw，诠释oldh）{ 漂浮的XPad =（浮点）（getPaddingLeft（）+ getPaddingRight（））;
浮动YPAD =（浮点）（getPaddingTop（）+ getPaddingBottom（））;
浮coww = 0.0，cohh = 0.0，科尔= 0.0;
在里面（）;
coww =（浮点）W - 的XPad;
cohh =（浮点）H - YPAD; //创建一个边框 coordbounds =新RectF（0.0，0.0，
coww，cohh）;
}
编辑：修改上面的方法为位图
私人无效的init（）
{
bPaint =新的油漆（Paint.ANTI_ALIAS_FLAG）;
bPaint.setStyle（Paint.Style.FILL_AND_STROKE）;
bPaint.setColor（Color.BLACK）; 位= BitmapFactory.de codeResource（getResources（）
R.drawable.button）;
}
更改的onDraw如下：
@覆盖
公共无效的onDraw（android.graphics.Canvas帆布）{
super.onDraw（画布）; canvas.drawLine（coordbounds.left，coordbounds.centerY（），
coordbounds.right，coordbounds.centerY（），bPaint）; INT rectwidth = bitmap.getWidth（）;
INT rectheight = bitmap.getHeight（）;
//划分行成四个部分，并减去2 *一半的半径
浮actualspan =（coordbounds.right - coordbounds.left） - （2 * rectwidth / 2）; //段行成3部分
浮interlinesegments = actualspan /（4-1）;
的for（int i = 0;我4;;我++）
{
浮动左= coordbounds.left +（我* interlinesegments）;
浮顶= coordbounds.centerY（） - rectheight / 2;
浮动权= coordbounds.left +（我* interlinesegments）+ rectwidth;
浮底= coordbounds.centerY（）+ rectheight / 2; canvas.drawBitmap（位图，空，新RectF（左，上，右，下），NULL）;
}
}
I want to make the design like image and also display same in phone and 7 inch tab. I am using Linear layout by dividing the view in 5 part of the screen with using Framlayout draw a line but not possible to achieve like this image.
What's the other option like using canvas or any other better option.
First Image is displing expected result. and other two are getting result.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="360.0"
android:endColor="#A29AA4"
android:startColor="#A29AA4" />
</shape>
Below layout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="5">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<View
android:id="@+id/mView_circle1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="@drawable/circleshape" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<View
android:id="@+id/mView_circle2"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="@drawable/circleshape" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<View
android:id="@+id/mView_circle3"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="@drawable/circleshape" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<View
android:id="@+id/mView_circle4"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="@drawable/circleshape" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<View
android:id="@+id/mView_circle5"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="@drawable/circleshape" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_gravity="center_vertical"
android:background="#A29AA4">
</RelativeLayout>
</FrameLayout>
解决方案
This is easier and cleaner in canvas. Here is how you would do the first one.. You can replicate this with slight modifications for the other two.
Create a Canvas View:
public class CanvasView extends View {
Paint bPaint;
RectF coordbounds;
public CanvasView(Context context) {
super(context);
}
private void init()
{
bPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
bPaint.setStyle(Paint.Style.FILL_AND_STROKE);
bPaint.setColor(Color.BLACK);
}
@Override
public void onDraw(android.graphics.Canvas canvas)
{
super.onDraw(canvas);
canvas.drawLine(coordbounds.left,coordbounds.centerY(),
coordbounds.right,coordbounds.centerY(),bPaint);
int circledia=20;
//Divide the line into four segments and subtract 2 * half the radii
float actualspan = (coordbounds.right - coordbounds.left) - (2 * circledia/2);
//Segment the line into 3 parts
float interlinesegments = actualspan/(4-1);
for(int i=0; i<4;i++)
{
canvas.drawCircle(coordbounds.left + circledia/2 +
(i*interlinesegments),
coordbounds.centerY(),10,bPaint);
}
}
}
Create a layout to hold the view and call this view in your activity:
LinearLayout layout = (LinearLayout) findViewById(R.id.root);
CanvasView view = new CanvasView(this);
layout.addView(view);
oops, I forgot . :-) Please add this method in CanvasView class to declare the bounding box and set the layout:
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
float xpad = (float) (getPaddingLeft() + getPaddingRight());
float ypad = (float) (getPaddingTop() + getPaddingBottom());
float coww = 0.0f, cohh = 0.0f, coll = 0.0f;
init();
coww = (float) w - xpad;
cohh = (float) h - ypad;
// Create a bounding box
coordbounds = new RectF(0.0f,0.0f,
coww,cohh);
}
EDIT : Change the above methods for bitmap
private void init()
{
bPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
bPaint.setStyle(Paint.Style.FILL_AND_STROKE);
bPaint.setColor(Color.BLACK);
bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.button);
}
Change onDraw as follows:
@Override
public void onDraw(android.graphics.Canvas canvas)
{
super.onDraw(canvas);
canvas.drawLine(coordbounds.left,coordbounds.centerY(),
coordbounds.right,coordbounds.centerY(),bPaint);
int rectwidth=bitmap.getWidth();
int rectheight=bitmap.getHeight();
//Divide the line into four segments and subtract 2 * half the radii
float actualspan = (coordbounds.right - coordbounds.left) - (2 * rectwidth/2);
//Segment the line into 3 parts
float interlinesegments = actualspan/(4-1);
for(int i=0; i<4;i++)
{
float left= coordbounds.left + (i * interlinesegments);
float top= coordbounds.centerY()-rectheight/2;
float right = coordbounds.left+(i * interlinesegments)+rectwidth;
float bottom= coordbounds.centerY()+ rectheight/2;
canvas.drawBitmap(bitmap,null,new RectF(left,top,right,bottom),null);
}
}
这篇关于如何使这样的看法？其实我试着用drawble意见，但不能让它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
