如何在表面视图上绘图?

时间:2015-03-31 20:05:04

标签: android android-layout drawing paint surfaceview

我正在尝试制作一个如下所示的绘图应用程序: user inter face

因此,当用户将手放在表面视图中时,用户将能够在表面视图内绘制线条。 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>

有没有人知道如何使用surfaceview或已经在xml文件中定义的视图而不是动态的方式,所以我可以将那些额外的元素,例如按钮,滚动,用户名和图像放在同一个活动中。 我真的很感激任何帮助。 感谢

1 个答案:

答案 0 :(得分:2)

要管理它,您可以按照以下步骤操作。

  1. 创建一个java类并使用SurfaceView扩展它。

  2. 使用以下代码

  3. 并将其用作&#34; yourlayout.xml&#34;

    中的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;
        }
      }
    }
    
  4. 现在我将在布局中使用它

    <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。