همیار اندروید
همیار اندروید
همیار اندروید
نه
بله
منوی وبسایت
حساب کاربری

همیار اندروید

مرجــع تخصـصــی توسـعــه انــدرویــد

منوی وبسایت
حساب کاربری

آموزش ساخت Button سفارشی در برنامه نویسی اندروید

آموزش ساخت Button سفارشی در برنامه نویسی اندروید
نوع هزینه
شرکت کنندگان
دریافت دسترسی
مشخصات این آموزش
موضوعات مرتبط
زبان برنامه‌نویسی
نامشخص   ,   XML
نوع قسمت‌ها
محتوای ارائه شده
مهارت های مورد نیاز
وضعیت انتشار
سطح آموزش
آخرین آپدیت
مباحثی که در این آموزش یاد خواهید گرفت
سفارشی کردن Button
یاد گرفتن ساخت لایه جدید در drawable
یاد گرفتن gradient
کار با باتن در اندروید استودیو
کار کردن با Button در اندروید
نحوه کار با باتن ( button ) یا دکمه در اندروید
دکمه ها (Button) در اندروید
یادگیری این آموزش

به نام خدا 

با سلام خدمت دوستان  همیشه همراه همیار اندروید

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

برای خودتون طراحی کنید 

بعضی وقت ها میخاین باتنی گرد داشته باشین یا باتنی شامل چند رنگ متفاوت خب من اومدم و در یک آموزش 

ساخت این باتن ها رو واستون آموزش دادم امیدوارم که مورد استفادتون قرار بگیره

خب میریم سراغ آموزش

ابتدا در لایوت مورد نظر سه تا ViewButton ایجاد میکنیم چون من میخام

سه نوع باتن سفارشی ایجاد کنم به همین دلیل سه باتن اضافه میکنم 

res/layout/activity_main.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:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HamyarAndroid.com"
        android:textSize="30dp"
        android:layout_marginBottom="20sp"
        android:textColor="@color/colorPrimaryDark"/>


    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="باتن سفارشی1" />


    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24sp"
        android:text="باتن سفارشی2" />


    <Button
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="24sp"
        android:layout_marginBottom="24sp"
        android:text="باتن سفارشی3" />
</LinearLayout>


خب همان طور که در کد بالا میبینید ما سه عدد Button ایجاد کردیم که تصویر کد بالا رو میتونید در پایین ببینید

 

حالا ما میخایم باتن شماره یک رو سفارشی کنیم 

کاری که ما باید انجام بدیم اینه که یک کد درون یک فایل از drawable بنویسیم و اونو back ground باتن قرار بدیم

از طریق مسیر پایین یک فایل XML ایجاد میکنیم و نامش را button1 می گذاریم

روی drawable کلیک راست میکنیم و new را کلیک میکنیم و بعد Drawable resource file را کلیک میکنیم و نام لایه را Button1 میگذاریم

و سپس ok را کلیک میکنیم و لایه ما ساخته میشود و کد های زیر را درونش مینویسیم

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient android:startColor="#2AF598" android:centerColor="#ff1493"
        android:endColor="@color/colorPrimary"/>
    <corners android:radius="50dp"/>
</shape>

خط 3

ما برای shape مییایم و rectangle رو انتخاب میکنیم یعنی مستطیل 

 خط 5

کد بالا ما یک gradient اضافه کردیم یعنی رنگ ما بین دوتا رنگ تغییر رنگ میدهد

خط 6

رنگ پایانی را مشخص کردیم

 خط 7

قوس گوشه های  مستطیل را مشخص کردیم که چند درجه قوس داشته باشند که در اینجا ما 50 را در نظر گرفتیم

 

خب حالا میریم سراغ طراحی back ground برای Button2

طبق مراحل بالا یک فایل جدید درون drawable میسازیم و اسمش رو button2 میزاریم

و کد زیر رو براش مینوسیم

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke android:color="#66F9B9" android:width="4dp"/>
    <corners android:radius="16sp"/>
</shape>

 خط 3

همونطور که میبینید  برای shape  من اومدم و rectangle رو انتخاب کردم

 خط 5

خاصیت stroke یعنی کادر دور رو نوشتم که دوتا مقدار میگیره یکی رنگ color

و دیگری ضخامت کادر که من 4 رو براش در نظر گرفتم

خط 6

در این خط کد قوس گوشه ها رو مشخص کردم که من 16 درجه رو نوشتم

 

خب حالا میریم سراغ نوشتن back ground برای button3 و کدهاشو درون یک لایه جدید از drawable و نام این لایه جدید رو هم button3 میگذاریم

ایجاد یک لایه جدید رو برای دوتا باتن قبلی توضیح دادم و دیگه نیازی نیست توضیح بدم

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">

        <shape android:shape="oval">
            <size
                android:width="100dp"
                android:height="100dp"/>
            <solid android:color="#5E0630"/>
        </shape>

    </item>
    
</selector>

ما سه تا لایه برای طراحی و شکل دادن به باتن ها درون drawable ایجاد کردیم

حالا این لایه ها را روی back ground باتن ها ست میکنیم طبق کد زیر

<?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:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HamyarAndroid.com"
        android:textSize="30dp"
        android:layout_marginBottom="20sp"/>


    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="باتن سفارشی1" 
        android:background="@drawable/button1"/>


    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24sp"
        android:text="باتن سفارشی2" 
        android:background="@drawable/button2"/>


    <Button
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="24sp"
        android:layout_marginBottom="24sp"
        android:text="باتن سفارشی3" 
        android:background="@drawable/button3"/>

</LinearLayout>


 

حالا با اضافه کردن back ground به باتن ها ،اون ها سفارشی شدن، و خروجی کارمون رو میتونید در تصویر پایین ببینید

 

امیدوارم از این آموزش استفاده مفید رو برده باشید

با آرزوی موفقیت

HRoid.ir/t163
لینک کوتاه این آموزش برای انتشار در شبکه های اجتماعی
نظرات این آموزش
ابتدا باید وارد حساب کاربری خود شوید ، تا بتوانید برای این آموزش نظری ارسال کنید
هنوز نظری برای این آموزش ثبت نشده است
کپی برداری از محتوا و دیگر منابع اختصاصی به هر نحو غیر مجاز است. حتی با ذکر منبع. در صورت تخلف پیگرد قانونی به همراه خواهد داشت.
Copyright © 2020 , www.HamyarRoid.com , www.HamyarAndroid.com , Terms , Sitemap
همیار اندروید توسط سون هاست میزبانی می شود و دارای ترافیک نیم بها می باشد
خلـــق هـمیـار انـدرویــد با
logo-samandehi