使用动态数据创建 "L" 形状曲线
Create "L" shape curved line with dynamic data
我想画一个像下图这样的纯动态视图
我有两个arraylist
List<String> type and List<Float> level;
type 有 name(max,type1,type2, etc) 和 level 标记值 类型
level 将始终介于 0 到 1 之间，并且 type 将是一个字符串，level[ 的值=54=] 和 type 将来自服务器。我们有两个固定标签 - min 和 max。
假设我从服务器得到 .4 最小值和 .5 最大值然后所有 type(type1, type2, type3, etc) 将位于 .4 和 .5 之间。然后所有其余的 types 应该像弯曲的线一样排列，但是如果我们得到最小值是 .001 和 max .9 那么我们有足够的 space 来显示其余的标签，在这种情况下我们不需要通过弯曲的线或标记来显示。但我不知道如何实现它或从哪里开始。任何帮助将不胜感激。在此先感谢大家。
如果上面的设计有点复杂，请给我一些参考或link实现下面的设计。
如果我能做这个更简单的（上图），那就太好了。
我在 onCreate() 块中尝试了以下代码。
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);
}
});
}
下面是我内心class绘制视图
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>
通过上面的代码，我进入了屏幕下方，所以它不合适。我在这里缺少什么。？请建议我如何将抽屉向上移动？
这真是个大问题。而且我认为没有人可以给你一个明确的答案。
我的建议是循序渐进：
1-在屏幕上放一个按钮并尝试创建3条线以获得弯曲的线效果。使用起点（开始时您可以从屏幕中间开始）和终点（按钮最终目的地）计算弯曲线所有 3 个部分的长度
2- 如果您知道按钮的开始和结束位置，您可以轻松计算出 line2 的长度。对于 line1 和 line3，您还需要为您的计算函数传递另一个参数（顺便说一下，您应该拥有它）从哪里开始欺骗。
完成此任务后还有更多任务。
3- 然后，您应该使用您之前定义的函数在屏幕上放置 5 个按钮和 assemble 它们的熟线。
4-根据你的起点和终点，你的熟线应该上下移动。
5- 现在您可以创建熟线了。是时候为真正的任务计算了。
6- 你应该计算所需的 space 可用并以某种方式弄清楚按钮是否适合。如果不适合你应该将按钮放在第二道，然后使用你神奇的 L 绘制方法连接它们到计算出的起始位置（你应该已经计算出每个按钮的起始点的 y 位置。）
继续。只需尝试将您的作业分成小块，然后尝试轻松完成每个小块即可。
在这种情况下，我将使用带有自定义 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);
}
我想画一个像下图这样的纯动态视图
我有两个arraylist
List<String> type and List<Float> level;
type 有 name(max,type1,type2, etc) 和 level 标记值 类型
level 将始终介于 0 到 1 之间，并且 type 将是一个字符串，level[ 的值=54=] 和 type 将来自服务器。我们有两个固定标签 - min 和 max。
假设我从服务器得到 .4 最小值和 .5 最大值然后所有 type(type1, type2, type3, etc) 将位于 .4 和 .5 之间。然后所有其余的 types 应该像弯曲的线一样排列，但是如果我们得到最小值是 .001 和 max .9 那么我们有足够的 space 来显示其余的标签，在这种情况下我们不需要通过弯曲的线或标记来显示。但我不知道如何实现它或从哪里开始。任何帮助将不胜感激。在此先感谢大家。
如果上面的设计有点复杂，请给我一些参考或link实现下面的设计。
如果我能做这个更简单的（上图），那就太好了。
我在 onCreate() 块中尝试了以下代码。
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);
}
});
}
下面是我内心class绘制视图
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>
通过上面的代码，我进入了屏幕下方，所以它不合适。我在这里缺少什么。？请建议我如何将抽屉向上移动？
这真是个大问题。而且我认为没有人可以给你一个明确的答案。
我的建议是循序渐进：
1-在屏幕上放一个按钮并尝试创建3条线以获得弯曲的线效果。使用起点（开始时您可以从屏幕中间开始）和终点（按钮最终目的地）计算弯曲线所有 3 个部分的长度
2- 如果您知道按钮的开始和结束位置，您可以轻松计算出 line2 的长度。对于 line1 和 line3，您还需要为您的计算函数传递另一个参数（顺便说一下，您应该拥有它）从哪里开始欺骗。
完成此任务后还有更多任务。 3- 然后，您应该使用您之前定义的函数在屏幕上放置 5 个按钮和 assemble 它们的熟线。 4-根据你的起点和终点，你的熟线应该上下移动。 5- 现在您可以创建熟线了。是时候为真正的任务计算了。
6- 你应该计算所需的 space 可用并以某种方式弄清楚按钮是否适合。如果不适合你应该将按钮放在第二道，然后使用你神奇的 L 绘制方法连接它们到计算出的起始位置（你应该已经计算出每个按钮的起始点的 y 位置。）
继续。只需尝试将您的作业分成小块，然后尝试轻松完成每个小块即可。
在这种情况下，我将使用带有自定义 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);
}