یک فنجان مشاوره
مهـمـان مــا باشیـد

شـمـــاره تــمــاس
031-36644146

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

انتشار 16 بهمن 1397
دیدگاه ها 0
زمان تقریبی مطالعه
گردآوری پدیده تجارت

Custom_Widget به چه معناست؟

گاهی وقتا می خواهید TextView، Button، Toast و …را به سلیقه ی خودتون طراحی کنید، به این کار Custom کردن میگن.

در این مقاله آموزش ساخت ساخت Button سفارشی و یک Textview سفارشی را خواهیم داشت .

ساخت Button سفارشی                     

میخواهیم یک Button طراحی کنیم که دارای یک فونت خاص و یک بک گراند خاص باشد. پس نیاز به یک فونت و یک drawable داریم. برای اینکه فونت را وارد پروژه کنیم ابتدا باید یک فولدر بنام assets داخل فولدر main ایجاد کنیم:

میتونید داخل فولدر assets یک فولدر بنام fonts ایجاد کنید و فونت های خود را داخل آن قرار دهید:

حالا میخواهیم یک drawable  بنام bg_custom_button ایجاد کنیم و آن را بعنوان بک گراند برای Button ست کنیم:

بعد از ساخت drawable کد زیر را در آن وارد کنید:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorGreen"/>
    <corners android:radius="30dp"/>
    <stroke android:color="@color/white"
        android:width="2dp"/>
    
</shape>

توضیح کد بالا:

با استفاده از تگ shape مشخص می کنیم که شکل هندسی drawable به چه صورت است که ما در اینجا rectangle یعنی مستطیل را انتخاب کردیم.

با تگ solid رنگ drawable را مشخص می کنیم.

با تگ corners سایز حاشیه ها را مشخص می کنیم(حاشیه ها را به میزانی که مشخص کردیم گرد میکند) و با تگ stroke یک کادر با رنگ و ضخامت دلخواه انتخاب می کنیم.

Drawable که طراحی کردیم به شکل زیر می شود:

حالا باید Button سفارشی خود را طراحی کنیم. برای نظم بهتر پروژه، ابتدا داخل main یک فولدر بنام customwidget ایجاد کنید تا از این به بعد widget های سفارشی خود را داخل آن قرار دهید.

داخل فولدر customwidget یک کلاس بنام Button ایجاد کنید:

داخل کلاس کد زیر را وارد کنید:

package customwidget;

import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;


public class Button extends android.support.v7.widget.AppCompatButton {
    public Button(Context context) {
        super(context);
        this.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/shabnam.ttf"));
        this.setBackgroundResource(R.drawable.bg_custom_button);

    }


    public Button(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/shabnam.ttf"));
        this.setBackgroundResource(R.drawable.bg_custom_button);

    }

    public Button(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/shabnam.ttf"));
        this.setBackgroundResource(R.drawable.bg_custom_button);

    }


}

 

توضیح کد بالا:

برای هر widget که می خواهیم کلاس تعریف کنیم ، باید آن کلاس را به خود widget ، extends کنیم. مثلا برای این کلاس لازم است کلاس را به Button، extends کنیم.

با extends کردن یک ارور ظاهر می شود و از ما میخواهد متدهای آن را ایمپورت کنیم. سه متد ایمپورت می شود. باید هر کدی که برای سفارش سازی می نویسیم داخل هر سه متد وارد کنیم.

می خواهیم برای Button یک فونت و یک بک گراند ست کنیم. با استفاده از setTypeface،  فونت را ست می کنیم:

this.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/shabnam.ttf"));

 

خط (context.getAssets(), “fonts/shabnam.ttf”) مشخص میکند که فونت داخل فولدر assets، داخل فولدر fonts و با نام  shabnam و پسوند ttf قرار دارد.

با استفاده از setBackgroundResource بک گراند را تنظیم کرده و آدرس drawable که طراحی کردیم به آن می دهیم:

this.setBackgroundResource(R.drawable.bg_custom_button);

Textview سفارشی

داخل فولدر customwidget یک کلاس بنام Textview ایجاد کرده  و کد زیر را در آن وارد کنید:

package customwidget;


import android.content.Context;
import android.graphics.Typeface;
import android.support.annotation.Nullable;
import android.util.AttributeSet;

public class Textview extends android.support.v7.widget.AppCompatTextView {

    public Textview(Context context) {
        super(context);
        this.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/shabnam_bold.ttf"));
    }

    public Textview(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/shabnam_bold.ttf"));

    }

    public Textview(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/shabnam_bold.ttf"));

    }
}

همانطور که میبینید برای Textview فقط فونت تعریف کردیم.

کد xml

حالا یک اکتیویتی ایجاد کنید و در آن دو Button و دو Textview تعریف کنید. داخل  xml کد زیر را وارد کنید:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Textview1"
        android:textColor="@android:color/black"
        android:textSize="25sp" />

    <customwidget.Textview
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Textview2"
        android:layout_marginTop="10dp"
        android:textColor="@android:color/black"
        android:textSize="25sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:layout_marginTop="20dp" />

    <customwidget.Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2 "
        />
    

</LinearLayout>

 

توضیح کد بالا:

ابتدا یک LinearLayout  از نوع vertical تعریف کرده و داخل آن دو Textview  و دو  Buttonقرار دادیم. Textview اولی Textview  پیشفرض خود اندروید و Textview دومی Textview که خودمان طراحی کردیم . برای Button هم به همین صورت.

از این به بعد هروقت به Button یا Textview با این فرمت نیاز داشتیم کافی است در xml به جای Button یا Textview نام کلاسی که ایجاد کردیم بنویسیم مثل  customwidget.Button یا  customwidget.Textview.

خروجی پروژه

نویسنده: الهه ابراهیمی

مقالات مرتبط

شاید علاقمند به دیدن این مقالات نیز باشید
(آرشیو کامل)

معرفی متا تگ های مهم برای سئو معرفی متا تگ های مهم برای سئو مقالات طراحی وب سایت

پدیده تجارت

24 اسفند 1400

آموزش طراحی اپلیکیشن های ios در اصفهان آموزش طراحی اپلیکیشن های ios در اصفهان مقالات تجارت الکترونیک

پدیده تجارت

09 مرداد 1397

چرا تبلیغات اینترنتی؟؟ چرا تبلیغات اینترنتی؟؟ مقالات تجارت الکترونیک

پدیده تجارت

18 آذر 1392

مزیت داشتن اپلیکیشن اندروید برای کسب و کار شما مزیت داشتن اپلیکیشن اندروید برای کسب و کار شما مقالات تجارت الکترونیک

پدیده تجارت

10 بهمن 1398

اینفلوئنسر مارکتینگ چیست؟ اینفلوئنسر مارکتینگ چیست؟ مقالات برندینگ

پدیده تجارت

22 دی 1398

متریال دیزاین (Material Design) چیست ؟ متریال دیزاین (Material Design) چیست ؟ مقالات طراحی وب سایت

پدیده تجارت

31 تیر 1399

نقشه سایت چیست و چه اهمیتی دارد؟ نقشه سایت چیست و چه اهمیتی دارد؟ مقالات سئو

پدیده تجارت

22 آبان 1396

آموزش طراحی سایت با لاراول در اصفهان آموزش طراحی سایت با لاراول در اصفهان مقالات طراحی وب سایت

پدیده تجارت

22 خرداد 1399

برنامه نویسی شی گراء چیست؟ برنامه نویسی شی گراء چیست؟ مقالات طراحی وب سایت

پدیده تجارت

22 اسفند 1400

طراحی بازی اندروید با بازی ساز Unity طراحی بازی اندروید با بازی ساز Unity مقالات تجارت الکترونیک

پدیده تجارت

01 اردیبهشت 1397

دیدگاه کاربران

0

0 0 رای ها
امتیازدهی به مقاله
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها