自定义View(二)——入门继承View的实例

1.实例建造过程

1)BaseView(抽象类)

package com.myview.v3;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by 刘鹏达 on 2017/10/15.
 */

/*
图形的变化一定是使用了线程不断的变化显示的内容,那么为了实现这个效果,通常会把改变属性设置为成员变量,
然后在内部线程类中去改变,并且把改变的属性调用其他方法从而显示。接下来,我们进行抽离和封装

抽离:
核心就是将显示方法和线程变动的参数抽离出来。

封装就是:将这些方法抽离出来封装到一个类中,从而实现

 */
public abstract class  BaseView extends View{

    private MyThread thread;

    public BaseView(Context context, AttributeSet attributeSet){
        super(context,attributeSet);
    }

    public BaseView(Context context){
        super(context);
    }

    protected void onDraw(Canvas canvas){
        if(thread==null){
            thread=new MyThread();
            thread.start();
        }else {
            drawSub(canvas);
        }
    }

    class MyThread extends Thread{
        public void run(){
            while(true){
                logic();
                postInvalidate();//刷新的方法,刷新之后调用OnDraw()方法
                try{
                    Thread.sleep(30);
                }catch (InterruptedException e){
                    e.printStackTrace();
                }

            }
        }
    }
    protected abstract void drawSub(Canvas canvas);
    protected abstract void logic();

}

 

2)书写自定义view的属性(在res文件夹的values文件夹里面建一个attrs.xml文件,其一般会在自定义view中的布局构造方法也就是两个参数的构造方法中被解析引用)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="NumText">
        <attr name="LineNum" format="integer"></attr>
        <attr name="b" format="boolean"/>
    </declare-styleable>
</resources>

 

3)NumText(自定义view类)

package com.myview.v4;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;

import com.example.myview.R;
import com.myview.v3.BaseView;

/**
 * Created by 刘鹏达 on 2017/10/15.
 */
public class NumText extends BaseView {
   Paint paint=new Paint();
    int lineNum=0;
    float x=0;
    boolean b=false;
    public NumText(Context context, AttributeSet attributeSet){
        super(context,attributeSet);
        TypedArray ta=context.obtainStyledAttributes(attributeSet, R.styleable.NumText);
        lineNum=ta.getInt(R.styleable.NumText_LineNum,1);
        b=ta.getBoolean(R.styleable.NumText_b,false);
        ta.recycle();
    }

    public NumText(Context context){
        super(context);
    }
    @Override
    protected void drawSub(Canvas canvas) {
      for(int i=0;i<lineNum;i++){
          int textSize=30+i;
          paint.setTextSize(textSize);
          canvas.drawText("极客学院",x,textSize+textSize*i,paint);
      }
    }

    @Override
    protected void logic() {
        x+=3;
        if(x>getWidth()){
            x=-paint.measureText("极客学院");
        }
    }
}
 

 

4)引用自定义view

布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:nt="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
   <com.myview.v4.NumText
       nt:LineNum="3"
       nt:b="true"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />


</LinearLayout>

 

activity:

package com.example.myview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.myview.v3.LoginView;
import com.myview.v3.MyText;
import com.myview.v4.NumText;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //setContentView(new MyView(this);这个方法也可以实现显示自定义组件,其是利用了自定义组件的组件构造函数
    }
}

 

总结:
1.自定义组件常见步骤:
1)写好该组件继承view或者其他组件
2)写好两个构造函数,一个用于布局(一般这边会用来解析属性文件),一个用于组件(当然还有三个参数的构造方法,这边先跳过)
3)写好onDraw()方法进行绘字,绘线,绘图
4)在布局文件中引入该布局,记住包名要写上,或者直接在Java中引用我们的组件


2.使用线程的组件
核心:用于该组件的是动态图。
具体步骤为:
1)写好BaseView,里面有两个方法抽象,分别是显示方法和改变参数方法
而在线程中直接调用这两个方法再重新调用ondraw()方法,而在ondraw()方法
中如果线程为空,那么实例化线程,并且启动,如果不为空,直接调用显示方法
2)写一个组件继承BaseView并且实现这两个抽象方法
3)在布局文件中引入该组件,并且显示



3.自定义属性并且使用
1)先建立一个attr.xml的自定义属性文件
2)设置命名空间(空间名为项目名,也就是manifest中的包名),然后
根据这个空间引用属性并且赋值。
3)解析得到这个属性,并且利用,一般解析是在构造方法中

 

转载于:https://www.cnblogs.com/lpd1/p/8011529.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用uniapp + vue开发自定义相机插件,您需要以下步骤: 1. 创建一个uniapp项目。 2. 在项目的manifest.json文件中,添加拍照权限。 3. 在页面中引入uni-ui组件库,以便使用相机组件。 4. 创建一个拍照页面,将相机组件添加到页面中。 5. 创建一个拍照函数,用于触发拍照事件。 6. 在拍照函数中,使用uni-app提供的API调用相机。 7. 将拍摄的照片保存到本地,并显示在页面上。 以下是一些示例代码,可以帮助您开始编写自定义相机插件: 1. 在manifest.json文件中添加拍照权限: ``` { "name": "my-app", "permissions": { "camera": { "desc": "用于拍照" } } } ``` 2. 在页面中引入uni-ui组件库: ``` <template> <view> <camera :device-position="cameraPosition"></camera> <button @click="takePhoto">拍照</button> <image v-if="photo" :src="photo"></image> </view> </template> <script> import { Camera } from 'uni-ui'; export default { components: { Camera }, data() { return { cameraPosition: 'back', photo: '' } }, methods: { takePhoto() { uni.showLoading({ title: '正在拍照...' }); uni.createCameraContext().takePhoto({ quality: 'high', success: (res) => { this.photo = res.tempImagePath; }, complete: () => { uni.hideLoading(); } }); } } } </script> ``` 3. 在拍照函数中调用相机API: ``` takePhoto() { uni.showLoading({ title: '正在拍照...' }); uni.createCameraContext().takePhoto({ quality: 'high', success: (res) => { uni.saveImageToPhotosAlbum({ filePath: res.tempImagePath, success: () => { uni.showToast({ title: '保存成功!' }); } }); }, fail: (error) => { uni.showToast({ title: '拍照失败!' }); }, complete: () => { uni.hideLoading(); } }); } ``` 4. 将拍摄的照片保存到本地,并显示在页面上: ``` takePhoto() { uni.showLoading({ title: '正在拍照...' }); uni.createCameraContext().takePhoto({ quality: 'high', success: (res) => { this.photo = res.tempImagePath; }, complete: () => { uni.hideLoading(); } }); } ``` 这些示例代码可以帮助您开始编写自定义相机插件。请注意,这只是一个示例,您需要根据自己的需求进行修改和调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值