Android CustomeViewの作り方 サンプルコード

Android

Android CustomeViewの作り方 サンプルコード

Androidではいろんなビューの作り方がありますが、複雑な図形や動的な図形を出したいときは、CustomeViewというので作ると便利です。
実戦では使わなかったのですが、勉強したことをまとめておこうと思います。
私の場合はとある画像を配置したいというだけだったのですが、グラフや規則性のある図形などはCustomeViewがもっと活躍するでしょう。

実のところ、何が難しかったかというと、レイアウトファイル(xml)のほうですね。

 res/layout/main_activity.xmlファイル内
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:custom="http://schemas.android.com/apk/res/my.application" //ここで、アプリケーションの名前を指定します 
 
     android:id="@+id/overlay_dialog"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_centerInParent="true"
     android:orientation="vertical" >
 
 	<my.application.view.BaloonUpward //CustomViewを呼び出すのは、この宣言だけで呼び出せます
    		android:id="@+id/baloon_1"
    		android:layout_width="300dp"
 	        android:layout_height="300dp"
                android:drawableLeft="@drawable/baloon_upward"
                custom:showText="true" //このcustomのパラメーターは、最初のxmlnsで宣言します
 		            />
                     
 </LinearLayout> 

次に、アトリビュートを指定します。attrs.xmlというファイルを/res/values/の中に作り、次のように宣言します。

 /res/values/attrs.xml
 <resources>
    <declare-styleable name="BaloonUpward">
       <!--  <attr name="android:baloonUpward" /> -->
        <attr name="android:drawableLeft" />
        <attr name="showText" format="boolean" />        
    </declare-styleable>
 </resources>

CustomView自体を作ります。

 public class BaloonUpward extends View {
 
    private Drawable mLeftDrawable;
 
   public BaloonUpward(Context context) {
        
        super(context);
    }
 
    public BaloonUpward(Context context, AttributeSet attrs) {
        super(context, attrs);
        
        try{
            
            TypedArray a = context.getTheme().obtainStyledAttributes(
                    attrs,
                    R.styleable.BaloonUpward,
                    0, 0
            );
 
            Drawable d = a.getDrawable(R.styleable.BaloonUpward_android_drawableLeft);
            if (d != null) {
                setLeftDrawable(d);
            }
 
            a.recycle();
        
        }catch(Exception e){
        
            Log.e("ばるーん", "エラー"+e);
        
        }
        
        
    }
 
    public void setLeftDrawable(Drawable left) {
        mLeftDrawable = left;
        updateContentBounds();
        invalidate();
    }
 
    private void updateContentBounds() {
 
        //ここで画像の表示ポジションなどを動的に変更できます。        
        int left_float = 0;
        int top_float = 0;
 
 
        if (mLeftDrawable != null) {
 
            mLeftDrawable.setBounds(left_float, top_float,
                    500, 500);
 
 
        }
 
    }    
 
    public void setLeftDrawableResource(int resId) {
        Drawable d = getResources().getDrawable(resId);
        setLeftDrawable(d);
    } 
 
    @Override
    protected void onDraw(Canvas canvas) {
           
            if (mLeftDrawable != null) {
                mLeftDrawable.draw(canvas);
            }else{
                Log.d("ばるーん","mLeftDrawableはnull");
            }
    }    
    
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // TODO Auto-generated method stub
 
    }
    
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
     //画面のサイズを測ってくれるので、画面サイズにあわせた何かをしたい場合
        //ここでやります
 
        int minw = getPaddingLeft() + getPaddingRight() + getSuggestedMinimumWidth();
 
        int w = Math.max(minw, MeasureSpec.getSize(widthMeasureSpec));
 
        // Whatever the width ends up being, ask for a height that would let the pie
        // get as big as it can
        int minh = (w - (int) 120) + getPaddingBottom() + getPaddingTop();
        int h = Math.min(MeasureSpec.getSize(heightMeasureSpec), minh);
 
        setMeasuredDimension(w, h);
    }
 
 }

Googleが下記にてサンプルコードを配布しています。
こちらも大変参考になります。
http://developer.android.com/training/custom-views/create-view.html

TechBoosterさん
http://techbooster.jpn.org/andriod/application/3013/

一番参考になったサイト
https://thenewcircle.com/s/post/1663/tutorial_enhancing_android_ui_with_custom_views_dave_smith_video

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です