نام‌نویسی
پس از تکمیل اطلاعات زیر، گذرواژه برای شما ارسال می‌شود.

از سری آموزش های برنامه نویسی اندروید با استفاده از محیط های گوگل استودیو و اکلیپس با شما هستیم. دقت شود برنامه های ارائه شده در این آموزش ها در محیط های اکلیپس و گوگل استودیو تست شده اند. اگر در سایر محیط ها مثل بیسک اندروید کار می کنید کد های جاوا تغییری نمی یابند و فقط جزئیات اجرا تفاوت دارد. در این پست به معرفی ویو ها خواهیم پرداخت.

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

Android view

قبل از شروع برنامه نویسی و تحلیل منطقی آن باید دید درستی از ویو ها داشته باشیم. برای مثال شما مشاهده و شاید تجربه کرده اید که در هنگام خرید یا فروش خانه های مسکونی یا ویلا از اصطلاح ویو استفاده می کنند. مثلا ببینید چه ویوی زیبایی دارد و از این جور حرف ها. بله دقیقا منظور ما هم در برنامه نویسی مفهومی مشابه است. در تشریح ویو باید گفت هر شیء در دنیای پیرامون ما داری یک ویو است یعنی هر چیزی که می توانیم ببینیم بی نهایت ویو دارد. شاید نام دیگر ویو طرز نگاه هم باشد. شاید یک خانه دارای یک ویو باشد و قیمت بالایی را داشته باشد و خانه ای مشابه بدون آن ویو ازرش ریالی بالایی را نداشته باشد.

view

این یک ویو از شهر لندن است و تصویر زیر یک ویو دیگر… .یک توریست اگر تصویر بالا را ببینید حتما مشتاق سفر با لندن است اما اگر تصویر پایین را دید چگونه است؟

view

با مفهوم کلی ویو ها آشنا شدیم. در برنامه نویسی هم به طرز مشابه باید به برنامه خود جهت دید و ویو بدهیم. اگر یک برنامه دارای برنامه نویسی منطقی خیلی خوب باشد ولی دارای ویو های ضعیف باشد در واقع رشد نخواهد کرد و کارآیی های آن را نشان نمی توان داد. بنابراین باید به ویو هایی که برای برنامه و اپلیکیشن خود طراحی می کنیم دقت کنیم. نکاتی ساده در طراحی ویو وجود دارد که مهم هستند و تاثیرگذار:

• متناسب بودن با فرهنگ مصرف کننده

• تحریک کننده و ترغیب کننده

• ساده بودن و انعطاف پذیری

و چند نکته ی دیگر

در برنامه نویسی اندروید استفاده از ویو ها خیلی مهم است چرا که حیات و پیروزی برنامه شما به آن وابسته است اگر خوب و دلربا باشد می تواند زمینه ساز کسب درآمد حتی برای شما باشد. همان طور که در پست های قبلی هم گفته ایم از گفتن جزئیات مانند ایجاد پروژه و لی آوت ها چشم پوشی می کنیم تا به موارد اصلی و مهم برسیم. در واقع اگر شما مطالب پست های قبلی را چک کنید مشاهده می کنیم که گرافیک در برنامه نویسی اندروید منحصر به فایل های XML است و با این تفاسیر کار با ویو ها را بیشتر باید در فایل های XML دنبال کنیم. می دانیم در فایل های XML است که مفاهیم گرافیکی معنا پیدا می کنند و هر چیزی که در برنامه ما قابل مشاهده است در فایل گرافیکی تعیین شده است.

view

در فایل XML که به صورت تگ نوشته می شود برای همه ی عنصر های برنامه نویسی یک تگ خاص با نام خاص داریم.برای مثال برای متن ها یا کلید ها یا منو ها و هرچیز دیگر. اگر شما کمی با مفهوم برنامه نویسی وب آشنا باشید و CSS را بشناسید می توانید با مفهوم ویو راحت تر کنار بیایید. ما یک فایل HTML داریم که با استفاده از CSS به آن شکل و فرم یا همان ویو می دهیم در اندروید هم ما با استفاده از متن بندی خاص و معلوم می توانیم برای کلید ها یا متن ها یا منو ها و همه چیز ویو تعریف کنیم:

view

یک ویژگی خارق العاده

در ورژن های جدید اندروید یعنی اندروید 5 با بالا شما می توانید با استفاده از همان فایل های CSS به برنامه اندرویدی خود مدل و ویو دهید.یعنی اگر از رنگ بندی و پیکر بندی یک سایت خوشتان بیاید و خواستید که برنامه ای بنویسید که از لحاظ گرافیکی کاملا شبیه به آن باشد می توانید فایل CSS آن را تهیه کرده و فقط در پروژه ی خود استفاده کنید. دیگر لازم به بازطراحی آن نیس و این یعنی بروز یک اتفاق شگرف در برنامه نویسی. اندروید CSS را هم پشتیبانی می کند.

view

می دانیم در برنامه نویسی به زبان #C یا اندروید یا هر زبان دیگری که یک سری ابزار اولیه را برای ما دارند همواره برای هرکدام از ابزار ها ویژگی هایی تعیین شده است.در واقع کار ما در ویو جمع بندی و مقدار دهی به این ویژگی هاست که برنامه را زیباتر و کارآ تر نشان دهیم. مثلا متن از کناره ها یا بالا چقدر فاصله بگیرد و رنگ آن چه مقداری را قبول کند یا فونت آن از جه خانواده ای باشد و امثال آن…

ایجاد تغییرات در گرافیک با استفاده از کلاس های جاوا خیلی معمول نیست اما در مواردی که لازم باشد آن را انجام می دهیم اما فعلا در سطح این آموزش به آن نمی پردازیم بعد از آموزش قسمت دهم وارد قسمت سطح متوسط می شویم که در آن جا بازهم به بررسی ویو ها می پردازیم.

آموزش برنامه نویسی اندروید قسمت پنجم

برای شروع کار در داخل فایل های موجود در برنامه خود به قسمت فایل های RES یا منابع می رویم و در داخل پوشه ی دلخواه یک فایل خالی از نوع فایل XML می سازیم: بهتر است در پوشه ی res این کار را انجام دهیم چرا که این فایل در واقع فایل کمکی برای تشکیل ویو است و در واقع CSS برای ماست و حتما از سایر فایل ها جدا تعریف می کنیم تا دچار سردرگمی بعدا نشویم:

آموزش برنامه نویسی اندروید قسمت پنجم

بعد از ایجاد فایل مذکور به شکل بالا داخل فایل را پاک می کنیم چرا که می خواهیم تصمیمات پیش فرض ما برای برنامه اعمال گردد نه تنظیماتی دیگر…

بعد از انجام این کار حالا می توانیم کد های XML زیر را در آن فایل قرار دهیم. این تنظیمات اختیاری اند و شما می توانید همه ی آن ها را جایگزین کتید و حتی پیشنهاد می شود که جایگزین کنید تا دستتان به برنامه نویسی عادت کند. برنامه نویسی اندروید را آسان خواهید یافت اگر آن را تمرین کنید:

<?xml version=”1.0″ encoding=”utf-8″?> ورژن فایل و اندکدینگ را برای آن تعیین می کند
<resources> تگ شروع فایل به عنوان یک فایل منبع. فایل منبع یعنی این فایل ویویی را برای ما تداعیی خواهد کرد
<declare-styleable name=”Options”> نامی برای آن تعیین می کنیم
<attr name=”titleText” format=”string” localization=”suggested” />  ویژگی ها یا اتریبیوت های مختلف را برای آن تعیین می کنیم
<attr name=”valueColor” format=”color” /> و به آن ها مقدار می دهیم
</declare-styleable> تگ را می بندیم

</resources> تگ اولیه را نیز می بندیم

این توضیحات خط به خط در ابتدا برای شما ارائه می شود ولی بعد از مدتی دست شما راه خواهد افتاد و نیازی به آن ها نخواهیم داشت:

بعد از این قسمت مثل حالت قبل یک فایل XML دیگر بسازید یا همان فایلی که برای کلاس نسبت داده اید و به عنوان HTML ما عمل خواهد کرد تغییرات زیر را انجام دهید.وارد لی آوت شده  این کد هارا وارد کنید:

<com.vogella.android.view.compoundview.ColorOptionsView
android:id=”@+id/view1″ یک نام برای آن تعیین می کنیم که به عنوان نشانه عمل کند
android:layout_width=”match_parent”   تعیین عرض
android:layout_height=”?android:attr/listPreferredItemHeight”  تعیین طول
android:background=”?android:selectableItemBackground”   مقدار دهی به مقدار پس زمینه
android:onClick=”onClicked”  تعیین رخداد کلیک برای آن این تنظیم باعث عملکرد کلیدمانند خواهد بود
custom:titleText=”Background color” متن تصویر
custom:valueColor=”@android:color/holo_green_light” رنگ آن
/>

این قسمت برای تنظیم و پیکر بندی قسمت پس زمینه بود

قسمت بعدی از فایل XML را برای رنگ جلوزمینه قرار می دهیم

<com.vogella.android.view.compoundview.ColorOptionsView
android:id=”@+id/view1″     یک نام برای آن تعیین می کنیم که به عنوان نشانه عمل کند
android:layout_width=”match_parent”    تعیین عرض
android:layout_height=”?android:attr/listPreferredItemHeight”   تعیین طول
android:background=”?android:selectableItemBackground”  مقدار دهی به مقدار پس زمینه
android:onClick=”onClicked”  تعیین رخداد کلیک برای آن این تنظیم باعث عملکرد کلیدمانند خواهد بود
custom:titleText=”Background color” متن تصویر
custom:valueColor=”@android:color/holo_green_light” رنگ آن
/>

نوبت به استفاده از فایل هایی است که در Res ساخته ایم. مثل حالت های قبلی فایل سومی را در پوشه ها می سازیم و اطلاعات اولیه آن را کاملا پاک می کنیم و به شرحی داریم آن را پر خواهیم کرد. نکته قابل گوشزد بازهم این است که این تغییرات مورد انتخاب ما بوده و شما هر گونه تغییری را می توانید اضافه یا کم کنید ما از تکست ویو و امیج وی استفاده کرده ایم شما می توانید از کلید ها سیک باز استفاده کنید یا هر چیز دیگری:

<?xml version=”1.0″ encoding=”utf-8″?>
<merge xmlns:android=”http://schemas.android.com/apk/res/android” >

<TextView فایل متنی را بررسی می کنیم
android:layout_width=”0dp” عرض آن را تعیین می کنیم
android:layout_height=”wrap_content” ارتفاع آن را مقدار می دهیم
android:layout_weight=”1″ وزن
android:layout_centerVertical=”true” موقعیت قرار گرفتن در صحنه
android:layout_marginLeft=”16dp” فاصله یا مارجین از چپ
android:textSize=”18sp” سایز و فونت متنی را قرار می دهیم
/>

<View  یک ویو را تعریف کرده ایم
android:layout_width=”26dp” عرض آن 26
android:layout_height=”26dp” طول آن هم 26
android:layout_centerVertical=”true” موقعیت قرار گرفتن در شکل
android:layout_marginLeft=”16dp” فاصله از چپ
android:layout_marginRight=”16dp”  فاصله از راست
/>

<ImageView بررسی یک کانتینر تصویر
android:layout_width=”wrap_content” عرض مقدار دهی با والد
android:layout_height=”wrap_content” طول هم مقدار دهی با والد
android:layout_marginRight=”16dp” فاصله از راست
android:layout_centerVertical=”true” موقعیت قرار گرفتن در شکل
android:visibility=”gone” تعیین آشکاربودن اولیه
/>

</merge>

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

1- وزن: وزن در برنامه نویسی اولویت را نشان  می دهد و همان طور که می دانیم هر چه وزن بالا تر باشد اولویت نشان دادن آن شیء بالاتر است برای مثلا دو عکس اگر داشته باشیم و آن ها را روی هم قرار دهیم تصویری که دارای وزن بالا تری هست نشان داده خواهد شد. وزن همواره باید مقداری بین 0 تا 1 داشته باشد.

2- والد: در برنامه نویسی گرافیک فایل ها ارگ همواره یک شیء در درون یک شیء دیگر قرار گرفت شیء بیرونی حکم والد را دارد و درونی فرزند نام دارد. می توان برای ویژگی های فرزند از ویژگی های والد استفاده کینم. فرزند تمام ویژگی های والد را به طور پیش فرض به ارث می برد مگر اینکه تعیین تکلیف شده باشد و دستور داده باشیم که مثلا ویژگی فاصله از بالای والد را نگیر.

آموزش برنامه نویسی اندروید قسمت پنجم

بعد از این مراحل نوبت فایل کلاس جاوا است که به آن بگوییم در مراحل مختلف برنامه چه کنترل هایی را انجام دهد:

package com.vogella.android.customview.compoundview; بررسی و یوزینگ اسم پکیج خود پروژه اندرویدی مال هر برنامه متفاوت خواهد بود

import com.vogella.android.view.compoundview.R;   این جمله در بعضی از ورژن های بعضی ادیتور ها لازم می شود ولی اکثرا نیاز نمی باشد

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.Toast;

                              انواع یوزینگ ها و نیم ایپیس ها یا کتابخانه هار را باید فراخوانی کنیم

public class MainActivity extends Activity { در کلاس اصلی کد های زیر را باید وارد کنیم

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); نسبت دادن فیل گرافیکی اصلی به کلاس جاوا بسیار حیاتی است
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu); هر آیتم منو را هندل می کند فعلا این قسمت نیاز ما نیست چون پیش فرض وجود دارد
return true;
}

public void onClicked(View view) {
String text = view.getId() == R.id.view1 ? “Background” : “Foreground”; به محض کلیک شدن یا انتخاب شدن یک حالت بررسی می شود
Toast.makeText(this, text, Toast.LENGTH_SHORT).show(); و ترد با نخ مربوط به آن شروع به اجرا کردن آن فایل گرافیکی می شود
}

}

در واقع هر دو فایل گرافیکی را ساخته و آماده داریم هر کدام که فراخوانی بشود در هر بار فقط اجرا می شود. یوزینگ کردن یعنی از کتابخانه های آن اسم استفاده کردن در واقع اصطلاحی است که بین برنامه نویسان رایج است.

تصویر نهایی که می توانیم مشاهده کنیم:

آموزش برنامه نویسی اندروید قسمت پنجم

پیوست

Leave a Reply

Your email address will not be published.

Developed by Nasour Naghipour