快捷導(dǎo)航

Android開發(fā)之自定義UI組件詳解

更新時(shí)間：2021年05月12日 11:57:42 作者：nuist__NJUPT

這篇文章主要給大家介紹了關(guān)于Android開發(fā)之自定義UI組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

Android開發(fā)自定義UI組件實(shí)現(xiàn)紅色小球跟隨手指移動(dòng)

要寫實(shí)現(xiàn)自定義UI組件，要?jiǎng)?chuàng)建一個(gè)BallView類，繼承View類，在BallView類中創(chuàng)建畫筆，然后重寫OnDraw()方法和OnTouchEvent()方法。

/**
 * Created by nuist__NJUPT on 2021/5/9.
 * 自定義UI組件
 * View組件在布局中是一個(gè)矩形的空白區(qū)域，沒有任何內(nèi)容
 * 而UI組件之所以有內(nèi)容，是因?yàn)槔^承了View組件之后在其提供的空白區(qū)域上重新繪制外觀，這就是UI組件的實(shí)現(xiàn)原理
 * 利用UI組件的實(shí)現(xiàn)原理，可以開發(fā)出一些特殊的UI組件，
 * 這些自定義UI組件創(chuàng)建時(shí)需要定義一個(gè)繼承View類的子類
 * 然后重寫View類的一個(gè)或者多個(gè)方法
 *
 */

public class BallView extends View {

    public BallView(Context context) {   //重寫構(gòu)造方法
        super(context);
    }

    public BallView(Context context, AttributeSet attrs) {   //重寫構(gòu)造方法
        super(context, attrs);
    }

    //定義圓形的圓形坐標(biāo)
    public float currentX = 60 ;
    public float currentY = 60 ;
    //創(chuàng)建畫筆
    Paint paint = new Paint() ;

    @Override
    protected void onDraw(Canvas canvas) {//重寫OnDraw()方法：當(dāng)組件要繪制內(nèi)容時(shí)候回調(diào)該方法
        super.onDraw(canvas);
        //設(shè)置畫筆的顏色為紅色
        paint.setColor(Color.RED);
        //畫一個(gè)圓心坐標(biāo)為(60,60),半徑為20的圓形
        canvas.drawCircle(currentX,currentY,20,paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) { //重寫OnTouchEvent()方法：當(dāng)觸摸屏幕時(shí)候回調(diào)該方法
        //得到觸摸后圓心坐標(biāo)所在位置
        currentX = event.getX() ;
        currentY = event.getY() ;
        //通知當(dāng)前組件繪制
        invalidate() ;
        return true ; //表明處理方法已經(jīng)處理該事件
    }
}

在自定義組件完成后，需要在java代碼中把該組件添加到容器中，才能看到想要的效果。

代碼如下：

ublic class CodeUiActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_code_ui);

        LinearLayout rootView = (LinearLayout) findViewById(R.id.root_view);//實(shí)例化布局對(duì)象
        BallView ballView = new BallView(this) ; //實(shí)例自定義的UI組件
        rootView.addView(ballView) ;//將自定義組件添加到容器中

    }
}

布局文件需要設(shè)置布局的id,需要在Java代碼中綁定。

XML文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:id="@+id/root_view"
    tools:context="com.example.nuist__njupt.uidesign.CodeUiActivity">
</LinearLayout>

實(shí)現(xiàn)效果如下：