1. 程式人生 > >淺談安卓自定義view(一):製作一個最最最簡單的自定義view

淺談安卓自定義view(一):製作一個最最最簡單的自定義view

對於安卓程式設計師來說,自定義view簡直不要太重要,畢竟有很多功能,譬如圓形頭像這些,用單純的原生非常難以實現,而用自定義view,簡直分分鐘。

在這裡,我嘗試用最簡單方式跟初學者說一下如何自定義一個自己的view~

首先,最簡單最簡單的自定義view,有多簡單?簡單到沒有邏輯,沒有任何自帶屬性,只是簡單展示,

譬如,我製作一個圓形圖片。。。

一共只需要兩步,

第一步,建立你的自定義類,讓它繼承View類,並重寫構造方法。

第二步,重寫ondraw()方法。

比如,我建立了這個自定義類名字叫做circleImageView,如下圖所示:

這裡寫圖片描述

注意,這裡有兩個預設的構造器方法,circleImageView(Context context)和circleImageView(Context context,AttributeSet arrts)

其中circleImageView(Context context)這個方法是你動態new的時候呼叫的,而circleImageView(Context context,AttributeSet arrts)這個方法是你在xml檔案中呼叫才會呼叫這個方法。如下圖,直接將標籤定義為類名便可以了:

這裡寫圖片描述

然後第二步,重寫ondraw()方法!

在這裡簡單說一下,ondraw(),顧名思義就是畫畫方法,在自定義元件時候,其實內部可以簡單分為三個步驟,也就是三大方法,onMeasure,onLayout,ondraw,這些方法在自定義元件中依次執行,先onMeasure獲得元件大小,再onLayout知道元件佈局位置,最後ondraw將元件渲染畫出來,但是其實在自定義元件中onMeasure和onLayout不是必須重寫的,所以在這裡我先不說,後面再講,就說這個ondraw方法,這個是必須實現的方法。

在上面的構造器方法中,我已經在元件初始化的時候便將要顯示的圖片初始化偉bitmap了

這裡寫圖片描述

嗯,就是上面那個方法

接下來我們要做的就是將這個bitmap截成一個圓形,在這裡我寫了一個圓形方法,如下圖:

這裡寫圖片描述

好啦,畫圓方法寫好啦,最後就是在ondraw裡面呼叫畫畫方法就好了,如下圖

這裡寫圖片描述

這樣一個自定義元件就寫好啦,完整程式碼如下圖

package com.example.administrator.testmyidea.myTextView;

import android.content.Context;
import android.graphics.*;
import android.util.AttributeSet;
import
android.view.View; import com.example.administrator.testmyidea.R; public class circleImageView extends View{ private Paint mPaint; private Bitmap imageBitmap; private float circleRadio; public circleImageView(Context context) { super(context); mPaint=new Paint(); } public circleImageView(Context context, AttributeSet attrs) { super(context, attrs); mPaint=new Paint(); imageBitmap=BitmapFactory.decodeResource(getResources(),R.drawable.touxiang); } @Override protected void onDraw(Canvas canvas) { canvas.drawBitmap(getCircle(imageBitmap),0,0,mPaint); } //將bitmap轉換成圓形bitmap public Bitmap getCircle(Bitmap bitmap){ //circleRadio圓形圖片的半徑 float circleRadio=bitmap.getWidth()/2; //建立一張新的bitmap,跟傳入圖片一樣寬的正方形bitmap, Bitmap b=Bitmap.createBitmap(bitmap.getWidth(),bitmap.getWidth(), Bitmap.Config.ARGB_8888); //初始化畫布,並將剛才建立的bitmap給這畫布,讓畫布畫在這bitmap上面 Canvas canvas=new Canvas(b); //初始化畫筆 Paint p=new Paint(); //在畫布中畫一個等寬的圓 canvas.drawCircle(circleRadio,circleRadio,circleRadio,p); //設定畫筆屬性,讓畫筆只在哪圓圈中畫畫,關於畫筆屬性,可以百度一下,很多,但是非常有用 p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(bitmap,0,0,p); return b; } }

在xml裡面程式碼是這樣的

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:luo="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.administrator.testmyidea.MainActivity">
    <com.example.administrator.testmyidea.myTextView.circleImageView
            android:layout_centerInParent="true"
            android:layout_width="150dp"
            android:layout_height="150dp"/>

</RelativeLayout>

最後效果:

這裡寫圖片描述

諾~自定義的圓形imageview出來啦

不過這裡的是寫死圖片的,下一節我們說下怎麼弄為可在程式碼動態設定圖片,也可以在xml裡面加入圖片地址的