如何在表面視圖上繪制？

Question

我正在嘗試制作一個看起來像這樣的繪畫應用程序：

因此，當用戶將手放在表面視圖中時，用戶將能夠在表面視圖內繪制線條。 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="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Paint"
    android:layout_marginTop="10sp"
    android:layout_marginLeft="5sp"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:layout_weight="3" />
<TextView
        android:id="@+id/textV"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_marginTop="20dip"
        android:layout_toRightOf="@+id/ivImage"
        android:text="User Name"

         />
        <ImageView
        android:id="@+id/ivImage"
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:src="@drawable/person"
         />


       </LinearLayout>

       <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_marginTop="20sp">

       <ScrollView
       android:id="@+id/scrollView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" >

       <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:orientation="vertical" >

       <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Assets Models" 
        android:gravity="center"/>

       <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:drawableLeft="@drawable/ic_launcher"
        android:layout_height="wrap_content"
        android:text="Button" />

        </LinearLayout>
        </ScrollView>

        <SurfaceView
         android:id="@+id/surfaceView1"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:layout_weight="2" />

        <ScrollView
         android:id="@+id/scrollView2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content" >

        <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:orientation="vertical"
         android:layout_gravity="right" >

       <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Assets Models" />

       <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_launcher"
        android:text="Button" />

       </LinearLayout>
       </ScrollView>
       </LinearLayout>



       </LinearLayout>

有誰知道如何用一個動態的方式而不是動態的方式使用xml文件中定義的surfaceview或view做到這一點，所以我可以將那些額外的元素（例如按鈕，滾動，用戶名和圖像）放在同一活動中。 我將不勝感激任何幫助。 謝謝

Answer 1

要解決此問題，您可以按照以下步驟操作。

1. 創建一個Java類，並使用SurfaceView對其進行擴展。

2. 使用下面的代碼

3. 並將其用作“ yourlayout.xml”中的UI組件

    public class mySurfaceView extends SurfaceView { public static Paint mPaint; public static Path path; public static Bitmap mBitmap; public static Canvas mCanvas; private ArrayList<PathWithPaint> _graphics1 = new ArrayList<PathWithPaint>(); public mySurfaceView(Context context, AttributeSet attrs) { super(context, attrs); path = new Path(); mBitmap = Bitmap.createBitmap(820, 480, Bitmap.Config.ARGB_8888); mCanvas = new Canvas(mBitmap); this.setBackgroundColor(Color.BLACK); mPaint = new Paint(); mPaint.setDither(true); mPaint.setColor(0xFFFFFF00); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeJoin(Paint.Join.ROUND); mPaint.setStrokeCap(Paint.Cap.ROUND); mPaint.setStrokeWidth(3); } @Override public boolean onTouchEvent(MotionEvent event) { PathWithPaint pp = new PathWithPaint(); mCanvas.drawPath(path, mPaint); if (event.getAction() == MotionEvent.ACTION_DOWN) { path.moveTo(event.getX(), event.getY()); path.lineTo(event.getX(), event.getY()); } else if (event.getAction() == MotionEvent.ACTION_MOVE) { path.lineTo(event.getX(), event.getY()); pp.setPath(path); pp.setmPaint(mPaint); _graphics1.add(pp); } invalidate(); return true; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (_graphics1.size() > 0) { canvas.drawPath(_graphics1.get(_graphics1.size() - 1).getPath(), _graphics1.get(_graphics1.size() - 1).getmPaint()); } } public class PathWithPaint { private Path path; public Path getPath() { return path; } public void setPath(Path path) { this.path = path; } private Paint mPaint; public Paint getmPaint() { return mPaint; } public void setmPaint(Paint mPaint) { this.mPaint = mPaint; } } } 

現在我將在布局中使用它

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"       android:layout_width="match_parent"
    android:layout_height="match_parent"    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"     tools:context=".MainActivity">

<ayttunc.example.com.drawingstackoverflow.mySurfaceView
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</RelativeLayout>

然后，您只運行它，但是我希望您注意到我們沒有在MainActivity中編寫任何代碼，而且在您運行它之后，您將看到類似這樣的內容！

http://i.stack.imgur.com/YjGk6.png

如果您需要更多信息，可以通過aytuncmatrac@anadolu.edu.tr給我發送郵件。