创建"L"带有动态数据的曲线形状 [英] Create "L" shape curved line with dynamic data
问题描述
我想绘制一个像下面图像一样的纯动态视图
I want to draw a pure dynamic view like below image
我有两个arraylist
I have two arraylist
List<String> type and List<Float> level;
类型具有名称(最大值，类型1，类型2等)，级别具有类型的标记值
type have name(max,type1,type2, etc) and level have marker value of type
级别将始终位于0到1之间，并且 type 将是一个字符串，其值分别为 level 和 type 将来自服务器.我们有两个固定标签- min 和 max .
level will always lie between 0 to 1 and type will be a string, value of both level and type will come from server. We have two fixed label - min and max.
假设我从服务器获得的最小值为.4，最大值为.5，则所有 type (type1，type2，type3等)都位于.4和.5之间.然后，所有类型的其余部分都应像弯曲的行一样排列，但是如果我们得到的最小值为.001，最大值为.9，则我们有足够的空间显示其余标签，在这种情况下，我们不会不需要用弯曲的线条或标记显示.但我不知道如何实现或从哪里开始.任何帮助将不胜感激.在此先感谢所有人.
Suppose I got .4 for min and .5 for max from server then all type(type1, type2, type3, etc) will lie between .4 and .5 . Then all rest of types should be arrange like crooked line, but if we get value for min is .001 and for max .9 then we have enough space to show rest of labels, in that case we don’t need to show by crooked line or marker. But I don’t have any idea how to achieve it or from where I can start. Any help will be really appreciated. Thanks in advance to all.
如果上面的设计有点复杂，那么请给我一些参考或链接以实现下面的设计.
If above design is bit complex then please give me some reference or link to achieve below design.
如果我能够做一个更简单的照片(上图)，那将是一个极大的帮助.
It would be great favor if i am able to do this simpler one(above image).
我在onCreate()块中尝试了以下代码.
I have tried below code in onCreate() block.
ViewTreeObserver viewTreeObserver = viewbar.getViewTreeObserver();
if (viewTreeObserver.isAlive()) {
viewTreeObserver.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@SuppressLint({ "NewApi", "ResourceAsColor" })
@Override
public void onGlobalLayout() {
viewbar.getViewTreeObserver().removeOnGlobalLayoutListener(this);
viewWidth = viewbar.getWidth();
viewHeight = viewbar.getHeight();
DefineType definetype = new DefineType();
float maxvalue = Collections.max(definetype.frameCalLevels);
float minvalue = Collections.min(definetype.frameCalLevels);
min.setText(definetype.frameCalType.get(0).toString());
max.setText(definetype.frameCalType.get(4).toString());
float density = getApplicationContext().getResources().getDisplayMetrics().density;
int[] posXY = new int[2];
viewbar.getLocationOnScreen(posXY);
int x = posXY[0];
int y = posXY[1];
DrawView drawView;
drawView = new DrawView(MainActivity.this, x, y,density);
//drawView.setBackgroundColor(Color.WHITE);
drawView.setX((float)((x*density/160))+viewWidth+180);
drawView.setX((float) ((float)((y*density/160))));
drawView.invalidate();
ll.addView(drawView);
}
});
}
下面是我的内部视图绘制类
and my inner class to draw view is below
class DrawView extends View {
Paint paint = new Paint();
float mx, my, mdensity;
Paint mBGPaint, mTXTPaint,mLINEPaint,mBRDPaint;
public DrawView(Context context, float x, float y, float density) {
super(context);
paint.setColor(Color.RED);
paint.setStrokeWidth(8);
paint.setStyle(Paint.Style.STROKE);
mx = x;
my = y;
mdensity = density;
}
@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
init();
mLINEPaint.setStrokeWidth(8);
//draw rect
canvas.drawRect(100,100,200,200,mBGPaint);
//draw rect border
canvas.drawRect(100,100,200,200,mBRDPaint);
//draw text
canvas.drawText("min", 250, 460, mTXTPaint);
//draw line
canvas.drawLine(50, 150, 100, 150, mLINEPaint);
}
@SuppressLint("ResourceAsColor")
public void init() {
//rectangle background
mBGPaint = new Paint();
mBGPaint.setColor(0xFF0000FF);
//your text
mTXTPaint = new Paint();
mTXTPaint.setColor(android.R.color.holo_blue_light);
//your line
mLINEPaint = new Paint();
mLINEPaint.setColor(0xFFFF00FF);
//rectangle border
mBRDPaint = new Paint();
mBRDPaint.setStyle(Paint.Style.STROKE);
mBRDPaint.setStrokeWidth(10);
mBRDPaint.setColor(0xFFFFFF00);
}
}
我的XML设计在下面
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="@+id/ll">
<View
android:id="@+id/view"
android:layout_width="70dp"
android:layout_height="300dp"
android:layout_marginTop="40dp"
android:layout_marginLeft="10dp"
android:orientation="vertical"
android:background="@drawable/rect" >
</View>
</LinearLayout>
通过上面的代码，我进入屏幕下方，因此不合适.我在这里想念的是什么?请建议我如何向上移动抽屉?
By above code i am getting below screen, so its not appropriate. What i am missing here.? Please suggest me how to move our drawer up?
推荐答案
在这种情况下，我将使用具有自定义onDraw的自定义视图:
In this case I would use custom View with custom onDraw:
也就是说，
public class myView extended View {
public myView(Context ctx) {
super(ctx);
init();
}
public void init(){
paint = new Paint();
}
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
//loop here
canvas.drawLine(0, 0, 20, 20, paint);//your some positions.
canvas.drawRect(....)
canvas.drawText(...)
}
}
编辑 对于第二个示例:
init() {
//rectangle background
mBGPaint = new Paint();
mBGPaint.setColor(0xFF0000FF);
//your text
mTXTPaint = new Paint();
mTXTPaint.setColor(0xFFFFFFFF);
//your line
mLINEPaint = new Paint();
mLINEPaint.setColor(0xFFFF00FF);
//rectangle border
mBRDPaint = new Paint();
mBRDPaint.setStyle(Style.STROKE);
mBRDPaint.setStrokeWidth(10);
mBRDPaint.setColor(0xFFFFFF00);
}
onDraw(...) {
//draw rect
canvas.drawRect(100,100,200,200,mBGPaint);
//draw rect border
canvas.drawRect(100,100,200,200,mBRDPaint);
//draw text
canvas.drawRect(100,100,mTXTPaint);
//draw line
canvas.drawLine(50, 150, 100, 150, mLINEPaint);
}
这篇关于创建"L"带有动态数据的曲线形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
