1068 نیروی متخصص آماده کـار برای شمـا هستند
حالا پروژه خود را ایجاد کنید
تعداد طراحان اندروید 1010
تعداد نرم افزار های اندروید 0
تعداد طراحان آی او اس 1002
تعداد نرم افزارهای آی او اس 0
آخرین اخبار سایت
نحوه ی کارکردن با Shape

نحوه ی کارکردن با Shape

در ساخت یک برنامه ی کاربردی برای زیباتر کردن رابط کاربری نیاز به استفاده از تصاویر یا گرافیک نیست. چرا که با اینکار سرعت برنامه ممکن است پایین بیاید و حجم برنامه ی خروجی هم بالا میرود. پس تنها راه حل برای پایین نیامدن سرعت برنامه و بالانرفتن حجم آن استفاده از shape ها است. در این مطلب شما را با shape ها آشنا میکنیم و با استفاده از آن شکل یک Button را عوض می کنیم. هم با xml و هم با کدهای جاوا می توان این کار را انجام داد.

 در ایکلیپس یک پروژه جدید به نام shape ایجاد کنید. در فایل main.xml یا همان لیوت برنامه یک Button بگذارید تا با استفاده از shape آن را زیبا کنید. در زیر مجموعه ی res یک پوشه با نام drawable ساخته و در آن یک فایل XML جدید ایجاد کنید. سپس فایل XML آن را اجرا کرده و کدهای زیر را به آن منتقل کنید:

<?"xml version="1.0" encoding="utf-8?>

<"shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle>

corners>

"android:radius="11dp

</

solid>

"android:color="#DE983C

</

padding>

"android:left="0dp

"android:top="0dp

"android:right="0dp

"android:bottom="0dp

</

size>

"android:width="270dp

"android:height="60dp

</

stroke>

"android:width="4dp

"android:color="#32D93D

</

<shape/>

 

قسمت اول rectangle می باشد که مربعی شدن شکل Button می شود.گزینه های دیگری هم وجود دارد که می توانید ازآنها استفاده کنید:

تگ Stroke مرزی را دورتا دور دکمه ایجاد کرده و هرچه مقدار آن بیشتر باشد خطی که دور دکمه است پهن تر خواهد شد.

corner گوشه های دکمه را از تمام جهت ها قوس داده و تیز بودن آن را میگیرد. 

تگ solid برای داخل دکمه رنگ در نظر می گیرد.

در نهایت باید فایل xml حاوی کدهای shape را به Button اختصاص دهید. برای این منظور در فایل main.xml خاصیت backgrand را به دکمه اضافه کرده و مقدار آن را آدرس فایل shape قرار دهید:

"RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin
    "android:paddingLeft="@dimen/activity_horizontal_margin
    "android:paddingRight="@dimen/activity_horizontal_margin
    "android:paddingTop="@dimen/activity_vertical_margin
   < "tools:context="com.example.shape.MainActivity 

    Button>
        "android:id="@+id/button1
        "android:layout_width="wrap_content
        "android:layout_height="wrap_content
        "android:layout_centerHorizontal="true
        "android:layout_centerVertical="true
        "android:text="Button
        </"android:background="@drawable/shape

<RelativeLayout/>

 

در زیر حاصل این مطالب را قرار داده ایم:

تغییر ظاهر دادن Button هنگام کلیک روی آن

اگر هنگام کلیک کردن روی Button ظاهر آن تغییر کند ، باتن نمای زیباتری پیدا خواهد کرد. این کار باعث تفاوت ظاهر باتن در زمان کلیک کردن و کلیک نکردن روی آن، می شود. برای این کار یک پروژه ی جدید با نام ClickShape ایجاد کنید و در maim.xml یک Button قرار دهید:

 

در فایل main.xml کدهای گفته شده را وارد کنید:

"RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin
    "android:paddingLeft="@dimen/activity_horizontal_margin
    "android:paddingRight="@dimen/activity_horizontal_margin
    "android:paddingTop="@dimen/activity_vertical_margin
   < "tools:context="com.example.clickshape.MainActivity

    Button>
        "android:id="@+id/button1
        "android:layout_width="wrap_content
        "android:layout_height="wrap_content
        "android:layout_centerHorizontal="true
        "android:layout_centerVertical="true
        "android:text="Button
       </

<RelativeLayout/>

مانند قبل در پوشه ی drawable یک فایل xml ایجاد کرده و نام آن را Click  و نوع آن را selector بگذارید.

کدهای زیر را در فایل click بنویسید:

<?"xml version="1.0" encoding="utf-8?>
<"selector xmlns:android="http://schemas.android.com/apk/res/android >
    <"item android:state_pressed="true" android:drawable="@drawable/pressd>
<item/>
    
    <"item android:state_enabled="true" android:drawable="@drawable/enable>
<item/>

<selector/>

در state_pressd باید آدرس فایل xml  که  می خواهید زمان فشردن دکمه تغییر ظاهر دهد ، را وارد کنید.  state_pressd مقدار trou دارد یعنی حالت فشرده شدن آن pressd  درست است و درادامه آدرس فایل داده می شود. در قسمت stte_enable هم که مقدار آن trou می باشد آدرس فایل xml که می خواهید زمانی که هنوز روی دکمه کلیک نشده نمایش داده شود ، را وارد کنید.

در مرحله بعد باید مجدداً دو فایل xml با نام های pressd و enable در همان پوشه ی drawable ایجاد شوند و کدهای هر دو فایل xml ایجاد شده را ویرایش کرده و ظاهر دلخواه خود را برای هر دو حالت در آن کدنویسی کنید.

فایل enable را به صورت زیر درآورید:

<?"xml version="1.0" encoding="utf-8?>

<"shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle>

<corners

"android:radius="14dp

</

solid>

"android:color="#787878

</

padding>

"android:left="0dp

"android:top="0dp

"android:right="0dp

"android:bottom="0dp

</

size>

"android:width="270dp

"android:height="60dp

</

stroke>

"android:width="3dp

"android:color="#878787

</

<shape/>

 

و فایل pressd را هم به صورت زیر تغییر دهید:

<?"xml version="1.0" encoding="utf-8?>

< "shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle>

corners>

"android:radius="14dp

</

solid>

"android:color="#919191

</

padding>

"android:left="0dp

"android:top="0dp

"android:right="0dp

"android:bottom="0dp

</

size>

"android:width="270dp

"android:height="60dp

</

stroke>

"android:width="3dp

"android:color="#878787

</

<shape/>

 

 آدرس هر دو فایل را در قسمت مربوط به خود در فایل xml که نام آن click است وارد کرده و در آخر خاصیت backgrand را به Button که در فایل main.xml قرار دارد اضافه کنید مقدارش را برابر با فایل click قرار دهید.

"RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin
    "android:paddingLeft="@dimen/activity_horizontal_margin
    "android:paddingRight="@dimen/activity_horizontal_margin
    "android:paddingTop="@dimen/activity_vertical_margin
   <"tools:context="com.example.clickshape.MainActivity 

    Button>
        "android:id="@+id/button1
        "android:layout_width="wrap_content
        "android:layout_height="wrap_content
        "android:layout_centerHorizontal="true
        "android:layout_centerVertical="true
        "android:text="Button
        </ "android:background="@drawable/click

<RelativeLayout/>

در تصویر اول دکمه را در حالتی مشاهده میکنید که هنوز فشرده نشده و تصویر دوم دکمه را در حالتی که فشرده شده است نشان میدهد. تصویر دوم کم رنگ تر از تصویر اول است.

ایجاد یک Button گرد

در ایکلیپس یک پروژه جدید با نام Circle ایجاد کنید. در فایل main.xml یا همان لیوت برنامه یک Button قرار دهید. یک پوشه در زیر مجموعه ی res با نام drawable ایجاد کرده و در آن یک فایل XML جدید با نام circle_btn ایجاد کنید. بعد ازایجاد فایل XML آن را اجرا کرده و کدهای زیر را به آن انتقال دهید:

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

stroke>
"android:width="2dp
</ "android:color="#636363
corners>
"android:radius="20dp
</
solid>
"android:color="#39C4EC
</

padding>
"android:left="5dp"
"android:top="5dp"
"android:right="5dp"
"android:bottom="5dp"
</

<shape/>

 

در فایل main.xml مقادیر زیر را وارد کنید:

"RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin
    "android:paddingLeft="@dimen/activity_horizontal_margin
    "android:paddingRight="@dimen/activity_horizontal_margin
    "android:paddingTop="@dimen/activity_vertical_margin
  < "tools:context="com.example.circle.MainActivity

    Button>
        "android:id="@+id/button1
        "android:layout_width="wrap_content
        "android:layout_height="wrap_content
        "android:layout_centerHorizontal="true
        "android:layout_centerVertical="true
        "android:text="Button
       </ "android:background="@drawable/circle_btn

<RelativeLayout/>

مشاهده کردید که مقدار rectangle به Oval تغییر کرده است و مابقی مراحل مانند قبل می باشد.

آموزش کار با gradient

قصد داریم به پس زمینه لیوت یک رنگ شیب دار اختصاص دهیم. برای این کار در اکلیپس یک پروژه جدید با نام  shapeBackgrand ایجاد کنید. در پوشه ی res یک زیر پوشه با نام drawable و در آن یک فایل xml با نام layout_shape ایجاد کنید. فایل xml ایجاد شده باید به صورت زیر ویرایش شود:

<?"xml version="1.0" encoding="utf-8?>

< "shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle>

corners>

"android:radius="14dp

</

gradient>

"android:angle="90

"android:centerX="35%

"android:centerColor="#7995A8

"android:startColor="#E8E8E8

"android:endColor="#000000

"android:type="linear

</

padding>

"android:left="0dp

"android:top="0dp

"android:right="0dp

"android:bottom="0dp

</

size>

"android:width="270dp

"android:height="60dp

</

stroke>

"android:width="3dp

"android:color="#878787

</

<shape/>

 

قصد بررسی خاصیت gradient را داریم. همانطور که می بینید در gradient خاصیت startColor برای شروع رنگ و خاصیت EndColor برای پایان دادن به رنگ ایجاد شده وجود دارد. همچنین از خاصیت angle برای زاویه ای که به رنگ شیب داده می شود استفاده شده که می توانید با تغییر دادنش زاویه ی دلخواه را به رنگ لیوت بدهید. خاصیت type را برابر با linear قرار دادیم که معنی آن این است که شروع شیب از کناره ها باشد.

در مرحله ی بعد وارد فایل main.xml یا همان لیوت برنامه شوید و در قسمت LinearLayout خاصیت backgrand را اضافه کرده و مقدارش را برابر آدرس فایل layout_shape قرار دهید.

"RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin
    "android:paddingLeft="@dimen/activity_horizontal_margin
    "android:paddingRight="@dimen/activity_horizontal_margin
    "android:paddingTop="@dimen/activity_vertical_margin
    "tools:context="com.example.lay.MainActivity
    <"android:background="@drawable/layout_shape

    TextView>
        "android:layout_width="wrap_content
        "android:layout_height="wrap_content
        </"android:text="@string/hello_world 

<RelativeLayout/>

 

در نهایت برنامه ی خود را اجرا کنید.

 


  • دسته بندی :
  • تاریخ انتشار : 25 اردیبهشت 1396
  • بازدید : 82

برچسب ها :