واکنون ایزی گرام 3 | ایزی گرام 3 با کلی امکانات جدید منتشر شد | کلیک کنید

آموزش ساخت view سفارشی در اندروید

دسته‌بندی: آموزش
مهر ۸, ۱۳۹۷

آموزش ساخت view سفارشی در اندروید

در این مقاله به آموزش ساخت view سفارشی در  اندروید می پردازیم منظور ما از view همان object هایی مانند TextView ImageView و… می باشد.

ساخت view سفارشی در  اندروید

 

برای شروع  ساخت view سفارشی در اندروید کلاسی جهت این View ایجاد می کنیم. مثلا یک کلاس به نام Programchi بسازید و از view گسترش (extends) بگیرید. به این شکل:

 

public class Programchi extends View {

 

در این جا باید از چند کلاس استفاده کرد بنابراین کد های زیر را بعد از package می گذاریم.

 

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 می سازیم.

 

<?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 بگذارید.

 

حواستان باشد به جای your.package.name باید نام پکیج شما باشد.

 

<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 ایجاد می شود.

 

در زیر کد  کلاس اصلی اینگونه می شود:

 

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 تعریف شده است:

 

public Programchi(Context context, AttributeSet attrs){
super(context, attrs);

 

همچنین  برای هر قسمت یک متد تعریف نمودیم مثلا گذاشتن متن در وسط و دایره شکل بودن آن و اینکه رنگ و متن در view قرار بگیرد.

 

invalidate تحقیق می کند که خطایی رخ ندهد و در صورت خطا  یک Exception به وجود می آورد و می توان از آن log گرفت. همچنین TypedArray برای به دست آوردن مقادیر سفارشی layout می باشد.

 

استفاده از آن در layout

 

<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" />

 

استفاده از کد زیر برای دسترسی به اکتیویتی:

 

private Programchi myView;
myView = (Programchi)findViewById(R.id.custView);
;

 

جهت استفاده از ویژکی های تعریف شده در اکتویتی کد زیر را به کار می بریم:

همچنین ببینید :   آشنایی با برنامه نویسی اندروید

 

myView.setCircleColor(Color.GREEN);
myView.setLabelColor(Color.MAGENTA);
myView.setLabelText("Help");
;

 

در ادامه به شما آموزش داده می شود چه طور با ساخت view سفارشی کد نویسی را در برنامه خود ساده تر نماییم.

 

فرض کنید یک layout به وجود آورده ایم که سه view دارد برای اینکه با هر یک کار کنیم باید آن ها را پیدا کنیم (findviewby..) روی آن ها کلیک نماییم و … در چنین شرایطی بهتر است که از یک view سفارشی استفاده نماییم که خودش یک view باشد ولی ۳ مقدار ورودی را قبول نماید.

 

چنین کاری باعث کاهش حجم dex در برنامه شده و فقط ما با یک view کار داریم.

 

ممکن است کد نویسی ساخت view سفارشی مقداری مشکل باشد  اما در قسمت کد نویسی اکتیویتی ما خیلی راحتیم زیرا تنها یک view داریم.

 

برای این کار اول  یک فایل در layout به اسم custom_view.xml ساخته و کدهای زیر را در آن وارد می کنیم.

 

<LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
xmlns:tools ="http://schemas.android.com/tools"
android:orientation ="vertical">

<TextView
android:id ="@+id/artist_Text"
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
tools:text ="Artist"
android:textAppearance ="?android:textAppearanceLarge"
android:textColor ="#4689C8"
android:textStyle ="bold" />

<TextView
android:id ="@+id/track_Text"
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
tools:text ="Track"
android:textAppearance ="?android:textAppearanceLarge"
android:textColor ="#4689C8"
android:textStyle ="bold" />

<Button
android:id ="@+id/buy_Button"
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
tools:text ="Buy" />

</LinearLayout>

 

view های بالا همان view نهایی هستند. کد بالا در نهایت موجب ساخت view سفارشی در  اندروید می شود.

 

در مسیر res/values یک فایل به نام attrs.xml ایجاد کرده و کدهای زیر را می گذاریم.

 

<resources>
<declare-styleable name ="CustomView">
<attr name ="artistText" format ="string" />
<attr name ="trackText" format ="string" />
<attr name ="buyButton" format ="string" />
</declare-styleable>
</resources>

 

این کدها  ویژگی های view را برای set کردن از طریق layout ایجاد می کند.

 

فایل جاوایی به اسم CustomView.java به وجود آورید و کدهای زیر را در آن بگذارید.

 

public class CustomView extends LinearLayout {

@StyleableRes
int index0 = 0;
@StyleableRes
int index1 = 1;
@StyleableRes
int index2 = 2;

TextView artistText;
TextView trackText;
Button buyButton;

public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}

private void init(Context context, AttributeSet attrs) {
inflate(context, R.layout.custom_view, this);

int[] sets = {R.attr.artistText, R.attr.trackText, R.attr.buyButton};
TypedArray typedArray = context.obtainStyledAttributes(attrs, sets);
CharSequence artist = typedArray.getText(index0);
CharSequence track = typedArray.getText(index1);
CharSequence buyButton = typedArray.getText(index2);
typedArray.recycle();

initComponents();

setArtistText(artist);
setTrackText(track);
setButton(buyButton);
}

private void initComponents() {
artistText = (TextView) findViewById(R.id.artist_Text);

trackText = (TextView) findViewById(R.id.track_Text);

buyButton = (Button) findViewById(R.id.buy_Button);
}

public CharSequence getArtistText() {
return artistText.getText();
}

public void setArtistText(CharSequence value) {
artistText.setText(value);
}

public CharSequence getTrackText() {
return trackText.getText();
}

public void setTrackText(CharSequence value) {
trackText.setText(value);
}

public CharSequence getButton() {
return buyButton.getText();
}

public void setButton(CharSequence value) {
buyButton.setText(value);
}
}

 

این کدها متودهای قابل استفاده در اکتیویتی هستند به عنوان مثال setArtistText مقدار متن مربوط به Artist را ست می کند و…

 

برای به کار بردن آن  در layout باید مثل زیر عمل نماییم.

 

<LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"
xmlns:tools ="http://schemas.android.com/tools"
xmlns:app ="http://schemas.android.com/apk/res-auto"
android:layout_width ="match_parent"
android:layout_height ="match_parent"
android:orientation ="vertical"
tools:context =".MainActivity">

<ir.programchi.CustomView
android:id ="@+id/test"
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
app:artistText ="ColdPlay"
app:trackText ="Paradise"
app:buyButton ="Buy"/>

</LinearLayout>

 

در بالا به جای ir.programchi باید نام package مربوط به خود را انجام دهید.

 

و app:artistText , app:trackText و app:buyButton که در attrs تعریف شدند.

 

قادر خواهید بود مقدار Text ها را با این مقادیر ست نمایید.

 

به منظور اینکه با کد به آنها دسترسی داشته باشید اینگونه عمل نمایید:

 

CustomView cv = (CustomView)findViewById(R.id.test);
cv.setArtistText("Programchi.ir");
cv.setTrackText("Programchi.ir :D")
cv.setButton("WOW");

 

امیدوارم از آموزش ساخت view سفارشی در اندروید لذت برده باشید.

پیام بگذارید


تومان