Androidが開発したカスタムUIコンポーネントの詳細


AndroidはカスタムUIコンポーネントを開発し、赤いボールを指に従って移動させることを実現しました。
カスタムUIコンポーネントを実現するためには、BallViewクラスを作成し、Viewクラスを継承し、BallViewクラスで絵筆を作成し、OnDraw()方法とOnTouchEvent()方法を書き換えます。

/**
 * Created by nuist__NJUPT on 2021/5/9.
 *    UI  
 * View                ,      
 *  UI        ,      View                    ,   UI       
 *   UI       ,          UI  ,
 *      UI             View    
 *     View          
 *
 */

public class BallView extends View {

    public BallView(Context context) {   //      
        super(context);
    }

    public BallView(Context context, AttributeSet attrs) {   //      
        super(context, attrs);
    }

    //         
    public float currentX = 60 ;
    public float currentY = 60 ;
    //    
    Paint paint = new Paint() ;

    @Override
    protected void onDraw(Canvas canvas) {//  OnDraw()  :               
        super.onDraw(canvas);
        //          
        paint.setColor(Color.RED);
        //        (60,60),   20   
        canvas.drawCircle(currentX,currentY,20,paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) { //  OnTouchEvent()  :            
        //             
        currentX = event.getX() ;
        currentY = event.getY() ;
        //        
        invalidate() ;
        return true ; //             
    }
}

カスタムコンポーネントが完成したら、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);//       
        BallView ballView = new BallView(this) ; //      UI  
        rootView.addView(ballView) ;//            

    }
}
レイアウトファイルはレイアウトの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>

実現効果は以下の通りです。

締め括りをつける
ここでは、Androidが開発したユーザー定義のUIコンポーネントに関する記事を紹介します。これに関連して、AndroidカスタムUIコンポーネントの内容は以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。