Question

我正在尝试根据用户数据创建树形图。没有图书馆或任何可以帮助的东西，我只是一个初学者。我刚创建了8个图像按钮，在应用程序计算数据后，需要在这些节点之间绘制线条以连接它们。我不知道如何使用画布或画线，所以任何帮助将非常感激。 enter image description here

         <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_margin="20dp"
                android:id="@+id/nodesImages">

                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                    <Button
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:text="1"
                        android:layout_margin="20dp"
                        android:id="@+id/node1"
                        android:background="@drawable/node"/>
                    <Button
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:text="2"
                        android:id="@+id/node2"
                        android:layout_margin="20dp"
                        android:background="@drawable/node"/>
                    <Button
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:text="5"
                        android:id="@+id/node5"
                        android:layout_margin="20dp"
                        android:background="@drawable/node"/>
                    <Button
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:text="6"
                        android:id="@+id/node6"
                        android:layout_margin="20dp"
                        android:background="@drawable/node"/>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                    <Button
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:text="3"
                        android:layout_margin="20dp"
                        android:id="@+id/node3"
                        android:background="@drawable/node"/>
                    <Button
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:text="4"
                        android:id="@+id/node4"
                        android:layout_margin="20dp"
                        android:background="@drawable/node"/>
                    <Button
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:text="7"
                        android:id="@+id/node7"
                        android:layout_margin="20dp"
                        android:background="@drawable/node"/>
                    <Button
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:text="8"
                        android:id="@+id/node8"
                        android:layout_margin="20dp"
                        android:background="@drawable/node"/>
            ![enter image description here][1]</LinearLayout>

编辑 - DrawView类

如何使用此DrawView类添加行？

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

public class DrawView extends View
{
    Paint paint = new Paint();
    static int startX, startY, endX, endY;

    public DrawView(Context context,int startX, int startY, int endX, int endY)
    {
        super(context);
        this.startX = startX;
        this.startY = startY;
        this.endX = endX;
        this.endY = endY;
        paint.setColor(Color.BLACK);
    }
    public DrawView(Context context)
    {
        super(context);
        paint.setColor(Color.BLACK);
    }

    @Override
    public void onDraw(Canvas canvas)
    {
        canvas.drawLine(startX, startY, endX, endY,paint); 
    }
}

编辑2： 由于某种原因，这不起作用：

LinearLayout myLayout = (LinearLayout) findViewById(R.id.nodesImages);

DrawView drawView = new DrawView(getApplicationContext(),(int)node1.getX(),(int)node1.getY(),(int)node2.getX(),(int)node2.getY());

myLayout.addView(drawView);

编辑3

有很多库用于创建复杂的图形（线条，条形图，散点图等）。为什么不能为树图创建一个库？对那些人来说似乎很容易!!!

Answer 1

Psst ...只需用XML实现

   <View 
        android:layout_height="1dp"
        android:layout_width="match_parent"
        android:background="@android:color/black"/>

Answer 2

根据您在width中提供的height和button布局。我用翻译来做到这一点。请参阅以下代码和丑陋的图片以解释@@！

LinearLayout nodesImages = (LinearLayout) findViewById(R.id.nodesImages);

View v = new View(this); //this, because I write this code in the Activity class
//yah, try to understand values 20, 30,... 
v.setLayoutParams(new ViewGroup.LayoutParams(dpToPx(20+20),dpToPx(2)));
v.setBackgroundColor(Color.BLACK);
nodesImages.addView(v);
v.setTranslationY(-dpToPx(30+20+20)-dpToPx(20+30/2));
v.setTranslationX(dpToPx(20+30));

使用：

private int dpToPx(int dp) {
    return (int) (dp * getResources().getDisplayMetrics().density + 0.5f);
}

丑陋的图像解释： enter image description here

更新获取视图的位置：

    final LinearLayout nodesImages = (LinearLayout) findViewById(R.id.nodesImages);

    //using addOnGlobalLayoutListener to make sure layout is happened.
    nodesImages.getViewTreeObserver().addOnGlobalLayoutListener(
        new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                //Remove the listener before proceeding
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    nodesImages.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                } else {
                    nodesImages.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                }

                Button node1 = (Button)findViewById(R.id.node1);
                int[] loc1 = new int[2];
                node1.getLocationInWindow(loc1);//loc1[0] is x and loc1[1] is y
                //for more information about this method, in Android Studio, just right-click -> Go To -> Declaration
                Button node2 = (Button)findViewById(R.id.node2);
                int[] loc2 = new int[2];
                node2.getLocationInWindow(loc2);

                View v = new View(getApplication());
                v.setLayoutParams(new ViewGroup.LayoutParams(loc2[0]-loc1[0]-node1.getWidth(),dpToPx(2)));//dpToPx(20 + 20), dpToPx(2)));
                v.setBackgroundColor(Color.BLACK);
                nodesImages.addView(v);
                v.setTranslationY(-dpToPx(30+20+20)-dpToPx(20+30/2));
                v.setTranslationX(dpToPx(20+30));
            }
        }
    );

以编程方式在android上的按钮之间绘制线条

2 个答案: