آموزش برنامه نویسی اندروید | آموزش ایجاد view سفارشی در برنامه نویسی اندروید
سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش ایجاد view سفارشی در برنامه نویسی اندروید می پردازیم منظور از view همان object هایی مثل TextView ImageView و… است با ما همراه باشید. این مبحث برای افرادی که تازه کار هستند باید خیلی جالب باشد ولی کمی سخت است.
ابتدای کار ما باید یک کلاس برای این View خودمان ایجاد کنیم به طور مثال چه ویژگی هایی باید داشته باشد پس یک کلاس به نام Programchi ایجاد می کنیم و از view گسترش (extends) می گیریم مثل زیر
1 | public class Programchi extends View { |
ما از چند کلاس استفاده می کنیم پس کد های زیر را بعد از package قرار دهید .
1 2 3 4 5 6 7 | import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Paint.Style; import android.util.AttributeSet; import android.view.View; |
حالا این کلاس را در همین حالا رها می کنیم در ادامه آن را تکمیل خواهیم کرد
وارد مسیر res/vlaues شده و یک فایل به نام attrs.xml ایجاد کنید.
1 2 3 4 5 6 7 8 | <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="Programchi"> <attr name="circleColor" format="color" /> <attr name="circleLabel" format="string"></attr> <attr name="labelColor" format="color"></attr> </declare-styleable> </resources> |
در بالا ما داریم ویژگی های view خودمان را ایجاد می کنیم یعنی می تونیم از این ویژگی ها در layout خودمان استفاده کنیم در بالا دو تا ویژگی از نو رنگ داریم یعنی ورودی رنگ را می پذیرند و یک string یا رشته برای دریافت متن.
شما باید در layout خودتان مقدار زیر را جلوی RelativeLayout یا LinerLayout قرار دهید.
1 | xmlns:custom="http://schemas.android.com/apk/res/your.package.name" |
دقت کنید به جای your.package.name باید نام پکیج خودتان قرار دهید.
1 2 3 4 5 6 7 8 | <your.package.name.Programchi android:id="@+id/custView" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_margin="5dp" custom:circleColor="#ff0099" custom:circleLabel="Hello" custom:labelColor="#ffff66" /> |
در بالا view ما ایجاد شده است.
حالا کلاس اصلی ما کد آن به کشل زیر می شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | package ir.net; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; /** * Created by jefferson on 7/28/2017. */ public class Programchi extends View { private int circleCol, labelCol; private String circleText; private Paint circlePaint; public Programchi(Context context, AttributeSet attrs){ super(context, attrs); circlePaint = new Paint(); TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.Programchi, 0, 0); try { circleText = a.getString(R.styleable.Programchi_circleLabel); circleCol = a.getInteger(R.styleable.Programchi_circleColor, 0); labelCol = a.getInteger(R.styleable.Programchi_labelColor, 0); } finally { a.recycle(); } circlePaint.setStyle(Paint.Style.FILL); circlePaint.setAntiAlias(true); circlePaint.setColor(circleCol); circlePaint.setColor(labelCol); circlePaint.setTextAlign(Paint.Align.CENTER); circlePaint.setTextSize(50); } @Override protected void onDraw(Canvas canvas) { int viewWidthHalf = this.getMeasuredWidth()/2; int viewHeightHalf = this.getMeasuredHeight()/2; int radius = 0; if(viewWidthHalf>viewHeightHalf) radius=viewHeightHalf-10; else radius=viewWidthHalf-10; canvas.drawCircle(viewWidthHalf, viewHeightHalf, radius, circlePaint); canvas.drawText(circleText, viewWidthHalf, viewHeightHalf, circlePaint); } public int getCircleColor(){ return circleCol; } public int getLabelColor(){ return labelCol; } public String getLabelText(){ return circleText; } public void setCircleColor(int newColor){ circleCol=newColor; invalidate(); requestLayout(); } public void setLabelColor(int newColor){ labelCol=newColor; invalidate(); requestLayout(); } public void setLabelText(String newLabel){ circleText=newLabel; invalidate(); requestLayout(); } } |
کد بالا ادامه کلاس ما است در بالا ما آمیدم آن ویژگی ها که در attrs تعریف کردیم یعنی بتونیم هم از طریق xml یعنی layout خودمان و هم از طریق کد بتونیم به آن دسترسی داشته باشیم در بالا ما یک constructor تعریف کردیم بخش زیر
1 2 | public Programchi(Context context, AttributeSet attrs){ super(context, attrs); |
و سپس در ادامه اومدیم برای هر بخش یک متد تعریف کریدم به طور مثال قرار دادن متن در وسط و گرد بودن آن به شکل دایره و برای اینکه رنگ و متن ما در view ما قرار گیرد invalidate بررسی می کند که خطایی رخ ندهد در صورت خطا دادن برنامه یک Exception ایجاد می کند و می توان از آن log گرفت. از TypedArray برای به دست آوردن مقادیر سفارشی layout است (یعنی مقدار های سفارشی ما رو دریافت می کند و در layout ست می کند منظور مقادیری است که در فایل xml یا همان view ما تنظیم می شود.) و برای اینکه ما یک شکل به صورت دایره مانند ایجاد کنیم از canvas استفاده کرده ایم. (بخشی از آن برای محسابه و بدست آوردن گردی نیم دایره استفاده شده است).
وحالا نحوه استفاده از آن به شکل زیر می شود.
استفاده از آن در layout
1 2 3 4 5 6 7 8 | <your.package.name.Programchi android:id="@+id/custView" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_margin="5dp" custom:circleColor="#ff0099" custom:circleLabel="Hello" custom:labelColor="#ffff66" /> |
حالا برای اینکه به آن در اکتیویتی دسترسی داشته باشیم از کد زیر استفاده می کنیم
1 2 | private Programchi myView; myView = (Programchi)findViewById(R.id.custView); |
برای اینکه از ویژگی هایی که تعریف کردیم در اکتویتی از آن استفاده کنیم از کد زیر استفاده می کنیم.
1 2 3 | myView.setCircleColor(Color.GREEN); myView.setLabelColor(Color.MAGENTA); myView.setLabelText("Help"); |
این آموزش به پایان رسید .
موفق و موید باشید.
خواهشا عکسای خروجی و نتیجه کارو همیشه بذارین،تا درک مطلب راحتتر باشه و بفهمیم قراره به چی برسیم.
باشه قرار خواهیم داد.
سلام
من هم در راستای صحبت اون دوستمون که فرمودن خروجی برنامه هارو بذارید میخواستم بگم لطفا عکس خروجی برنامه بذارید و اگه زحمتی نیست ریپازیتوری گیت هاب بگذارید تا بتونیم برنامه هارو ایمپورت کنیم.
متشکرم