سون لرن • آموزش

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون بهترین و محبوب ترین طراحی های در زمینه Material Design رو قرار داده و شما با دیدن اونا میتونین ایده های زیادی برای طراحی بگیرید و از اونا استفاده کنید. برای هر طرح یک gif قرار داده شده که نحوه عملکرد اون رو نمایش میده و با کلیک بر روی هر کدام به صفحه مختص به اون هدایت میشید و میتونین اطلاعات بیشتری در مورد اون کسب کنید. برای شروع وارد سایت Mate,بسیار,محبوب,طراحی,متریال ...ادامه مطلب

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک نرم افزار ساده و سبک رو قرار داده که با استفاده از اون میتونین به راحتی با رنگهای طراحی متریال یا Material Design کار کنید و از اونا استفاده کنید. این نرم افزار برای سیستم عاملهای Windows و Linux و maxOS قرار داده شده و میتونین اون رو دانلود ک, ...ادامه مطلب

در این قسمت میخوام یک کد ( Experiment with FAB ) جالب رو در اختیارتون بزارم.همونطور که دیدید یک ایده زیبا برای FAB یا Floating Action Button یا دکمه شناور قرار داده شده و زمانی که بر روی اون کلیک میکنید با افکت موجی پخش میشه و کل المنت رو میگیره و با زدن بر روی X به حالت اول بر میگیرده. میتونین از این نمونه در سایتتون استفاده کنید و زیبایی خاصی رو بهش بدین.بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.موفق باشید.یا علیSourceنوع کد رايگانLet's block ads! بخوانید, ...ادامه مطلب

0 187 ۲ مهر ۹۵ به نام خدا دوستان سلام، در خدمت شما هستیم با قسمت چهارم از سری آموزش های متریال دیزاین در اندروید. در این جلسه استفاده از CollapsingToolbarLayout را آموزش خواهیم داد. صفحه ی اطلاعات کاربری را کامل خواهیم کرد. همچنین ایجاد view های سفارشی رو به دلیل درخواست دانشجویان عزیز آموزش داده ام. لیست کامل مطالب ارائه شده در لیست پایین آورده شده اند. مطالب مطرح شده در این جلسه عبارتند از : Collapsing Toolbar Layout معرفی CollapsingToolbarLayout آشنایی با صفت contentScrim آشنایی با مقدار exitUntilCollapsed حذف عنوان از CollapsingToolbarLayout معرفی صفت CollapseMode و مقادیر Parallax و Pin آشنایی با NestedScrollView آشنایی با کلا,دوره مجازی اندروید,دوره مجازی برنامه نویسی اندروید ...ادامه مطلب

0 27 ۱ مهر ۹۵ به نام خدا، دوستان سلام، در این جلسه آموزش خواهیم داد که چطور داخل RecyclerView از چندین ItemViewType استفاده کنید، همچنین با SpanSizeLookUp آشنا خواهید شد. در مورد VecotorDrawableCompat صحبت خواهیم کرد و به شما آموزش خواهیم داد که چطور از فایل های vector استفاده کنیم به طوری که تا اندروید api 8 مشکلی نداشته باشیم. با snackbar آشنا خواهیم شد. از این view برای نمایش دادن پیغام با ظاهری زیباتر استفاده می شود. همچنین داخل snackbar بر خلاف Toast می توانیم از دکمه هایی که عملیاتی را انجام دهند استفاده کنیم. مطالب مطرح شده در این جلسه عبارتند از : RecyclerView معرفی ItemViewType معرفی تابع getItemViewType اضافه,دوره مجازی اندروید,دوره مجازی برنامه نویسی اندروید ...ادامه مطلب

2 122 ۲۲ شهریور ۹۵ به نام خدا، سلام دوستان، در این جلسه به معرفی متریال دیزاین خواهیم پرداخت، همچنین با کتابخانه مورد نیاز برای پیاده سازی متریال دیزاین آشنا خواهیم شد. مطالب مطرح شده در این جلسه عبارتند از : معرفی متریال دیزاین معرفی android design support library معرفی style.xml معرفی colors.xml معرفی Coordinator Layout معرفی Toolbar معرفی Drawer Layout معرفی NavigationView معرفی DrawerToggle راست به چپ کردن برنامه در گوشی های اندروید jelly bean به بالا معرفی سایت مناسب برای پیدا کردن کد رنگ های استاندارد اضافه کردن منو این مطلب یک جلسه از دوره آموزش پروژه محور برنامه نویسی اندروید - پایه تا پیشرفته است و ,دوره مجازی اندروید,دوره مجازی برنامه نویسی اندروید ...ادامه مطلب

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک ابزار قرار داده شده و میتونین اون رو دانلود کرده و از اون برای دسترسی سریع به رنگهای استاندارد طراحی متریال استفاده کنید. این نرم افزار فقط برای سیستم عامل مک یا Mac کاربرد داره و کاربران ویندوز نمیتونن از اون استفاده کنن. برای دانلود بر روی لینک Download the app کلیک کنید. برای شروع وارد سایت MaterialColorsApp بشین. امیدوارم بدردتون بخوره. موفق باشید. یا علی Let's block ads! بخوانید, ...ادامه مطلب

در این قسمت میخوام یک کد ( Material Elevation Illustration ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک طرح بصورت 3 بعدی قرار گرفته و کلیات و نحوه قرارگیری المنتهای مختلف در طراحی متریال رو براتون قرار داده. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید, ...ادامه مطلب

0 3 ۱۲ اردیبهشت ۹۵ در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم. Materialize تعدادی کلاس رو بوجود آورده که با استفاده از اونا میتونین منو و Navigation های زیبایی رو بوجود بیارید و از اونا در سایتتون استفاده کنید. کلاسهایی که در این زمینه وجود دارند عبارتند از: nav-wrapper : با نسبت دادن این کلاس به div پدر یا parent، مشخص میکنید که این المنت و اجزای اون میخان یک Navbar رو تشکیل بدن brand-logo : یک المنت لینکی رو بصورت المنت اصلی در منو در نظر میگیره nav-mobile : با نسبت دادن این کلاس به ul مورد نظر، اون رو بصورت یک Navigation Bar در میاریم مثالها با مثالهای زیر یکی یکی کلاسهای بالا و کاربردشون رو براتون توضیح میدم تا بیشتر باهاشون آشنا بشید. منوی راست چین: 1 2 3 4 5 6 7 8 9 10 <nav>    <div class="nav-wrapper">       <a href="#" class="brand-logo">TutorialsPoint</a>       <ul id="nav-mobile" class="right hide-on-med-and-down">          <li><a href="#">HTML5</a></li>          <li><a href="#">CSS</a></li>          <li><a href="#">JavaScript</a></li>       </ul>    </div> </nav> میبینید که برای div مورد نظر کلاس nav-wrapper رو در نظر گرفتیم. برای لینک مورد نظر هم کلاس brand-logo رو قرار دادیم تا لینک اصلی بشه. با دادن کلاس hide-on-med-and-down باعث میشیم که در دستگاههای با سایز متوسط و کوچک این ul مخفی بشه. خروجی: منوی چپ چین: 1 2 3 4 5 6 7 8 9 10 <nav>    <div class="nav-wrapper">       <a href="#" class="brand-logo right">TutorialsPoint</a>       <ul id="nav-mobile" class="left hide-on-med-and-down">          <li><a href="#">HTML5</a></li>          <li><a href="#">CSS</a></li>          <li><a href="#">JavaScript</a></li>       </ul>    </div> </nav> میبینید که برای div مورد نظر کلاس nav-wrapper رو در نظر گرفتیم. با استفاده از کلاسهای right و left هم ترازبندی و محل , ...ادامه مطلب

0 2 ۱۱ اردیبهشت ۹۵ در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم. Materialize از فونت آیکونهای معروف زیر پشتیبانی میکنه: فونت آیکون Font Awesome فونت آیکون Google Material فونت آیکون Bootstrap برای استفاده از فونت آیکون Materialize باید علاوه بر فایل CSS اون، فایل زیر رو هم قرار بدین: <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> میبینید که فونت آیکون Material Icon رو از گوگل فونت قرار دادیم. برای استفاده از فونتهای Bootstrap باید فایل زیر رو قرار بدین: <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> میتونید بصورت جداگونه هم فقط قسمت glyphicon اون رو گرفته و قرار بدین. برای استفاده از فونت آیکون Font Awesome هم از لینک زیر استفاده میکنیم: <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> برای استفاده از این فونت آیکون ها کافیه که ابزار مورد نظر رو وارد کنید و یک تگ i قرار بدین و نام آیکونی که میخاید استفاده کنید رو بعنوان کلاس اون قرار بدین. برای کنترل کردن سایز آیکون هم میتونین از کلاسهای زیر استفاده کنید: tiny : نمایش آیکون در سایز خیلی کوچک. سایز اون 1rem هست small : نمایش آیکون در سایز کوچک. سایز اون 2rem هست medium : نمایش آیکون در سایز متوسط. سایز اون 4rem هست large : نمایش آیکون در سایز بزرگ. سایز اون 6rem هست مثالها استفاده از فونت آیکون Materialize: <i class="material-icons tiny">cloud</i> <i class="material-icons small">cloud</i> <i class="material-icons">cloud</i> <i class="material-icons medium">cloud</i> <i class="material-icons large">cloud</i> همونطور که میبینید به تگهای i مورد نظر کلاس materialize-icons رو دادیم و به همراه اونا سایزش رو هم مشخص کردیم. خروجی: استفاده از فونت آیکون Font Awesome: <i class="fa fa-cloud tiny"></i> <i class="fa fa-cloud"></i>    <i class="fa fa-cloud small"></i> , ...ادامه مطلب

0 3 ۱۰ اردیبهشت ۹۵ در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم. در این مطلب با ادامه استایلهای مرتبط با فرمها در خدمتتون هستم. استایل Switch برای Checkbox: <div class="switch">     <label>Off         <input type="checkbox" checked><span class="lever"></span>On</label> </div> همونطور که دیدید برای div مورد نظر کلاس switch قرار داده شده و درون اون یک checkbox قرار داره. خروجی: استایل Switch غیر فعال: <div class="switch">     <label>Off         <input disabled type="checkbox"><span class="lever"></span>On</label> </div> همونطور که دیدید برای checkbox، ویژگی disabled رو قرار دادیم. خروجی: استایل برای ورودی file: 1 2 3 4 5 6 7 8 9 10 11 <div class="row">     <div class="file-field input-field">         <div class="btn">             <span>Browse</span>             <input type="file">         </div>         <div class="file-path-wrapper">             <input class="file-path validate" type="text" placeholder="Upload file">         </div>     </div> </div> همونطور که دیدید به div مورد نظر کلاس file-field رو نسبت دادیم. خروجی بصورت زیر خواهد بود: استایل برای ورودی file با قابلیت انتخاب چند مورد: 1 2 3 4 5 6 7 8 9 10 11 12 <div class="row">     <label>Materialize Multi File Input</label>     <div class="file-field input-field">         <div class="btn">             <span>Browse</span>             <input type="file" multiple>         </div>         <div class="file-path-wrapper">             <input class="file-path validate" type="text" placeholder="Upload multiple files">         </div>     </div> </div> همونطور که دیدید برای ورودی file، ویژگی multiple قرار داده شده. خروجی: استایل برای ورودی از نوع range: 1 2 3 4 5 6 <div class="row, ...ادامه مطلب

0 16 ۸ اردیبهشت ۹۵ در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم. Materialize تعدادی کلاس داره که میتونین با استفاده از اونها المنتهای درون فرمها رو بصورت خیلی زیبا در بیارید و اونا رو واکنشگرا کنید. کلاسهایی که در این زمینه وجود دارند عبارتند از: input-field : با نسبت دادن این کلاس به div، اون المنت رو به عنوان field container در میاریم. این کلاس اجباری هست validate : با نسبت دادن این کلاس به المنت فرم مورد نظر باعث میشید که استایلهای اعتبارسنجی مناسب به اون اعمال بشه active : اون المنت رو با استایل فعال نمایش میده materialize-textarea : از این کلاس برای استایل دادن به Textarea استفاده میشه. textarea بصورت اتوماتیک متناسب با متنی که درونش هست تغییر اندازه میده filled-in : با دادن این کلاس به checkbox باعث میشه که بصورت دیگری تیک خورده بشه مثالها ورودی متنی: 1 2 3 4 5 6 7 <div class="row">     <div class="input-field col s6">         <i class="material-icons prefix">account_circle</i>         <input placeholder="Useame" value="Mahesh" id="name" type="text" class="active validate" required>         <label for="name">Useame</label>     </div> </div> میبینید که یک input از نوع متنی قرار دادیم و کلاسهای Active و validate رو به اون نسبت دادیم.  این ورودی در ابتدا مقداری رو در خودش داره. خروجی: ورودی Password: 1 2 3 4 5 6 <div class="row">     <div class="input-field col s6">         <label for="password">Password</label>         <input id="password" type="password" placeholder="Password" class="validate" required>     </div> </div> خروجی: ورودی Email: 1 2 3 4 5 6 <div class="row">     <div class="input-field col s12">         <input placeholder="Email" id="email" type="email" class="validate">         <label for="email">Email</label>     </div> </div> خروجی: اگر ایمیلی که وارد میکنید درست باشه خط زیری سبز میشه و اگر اشتباه باشه قرمز میشه. این مورد رو با, ...ادامه مطلب

در این قسمت میخوام یک کد ( Responsive Modal Design ) جالب رو در اختیارتون بزارم. همونطور که دیدید سه نمونه لایت باکس و Modal ساخته شده و قرار گرفت. این لایت باکسها بصورت طراحی متریال و واکنشگرا هستند. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید, ...ادامه مطلب

0 15 ۵ اردیبهشت ۹۵ در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم. در این بخش مثالهای مربوط به کارتها رو براتون قرار میدم. فایل index.html رو باز کنید و مرحله به مرحله کدهای زیر رو قرار بدین و خروجی اونا رو در مرورگر ببینید. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div class="row">     <div class="col s12 m6">         <div class="card blue-grey lighten-4">             <div class="card-content">                 <span class="card-title"><h3>Lea HTML5</h3></span>                 <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>             </div>             <div class="card-action">                 <button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>                 <a class="right blue-grey-text" href="http://www.tutorialspoint.com">www.tutorialspoint.com</a>             </div>         </div>     </div> </div> میبینید که در ابتدا یک ردیف یا Row قرار دادیم و در اون هم یک div قرار دادیم و گفتیم که در دستگاه های متوسط 6 ستون از 12 ستون رو بگیر و در دستگاه های با نمایشگر کوچک 12 ستون رو اشغال کن. درون این المنت، کارت خودمون رو قرار دادیم و رنگ blue-grey با درجه روشنایی 4 رو برای اون در نظر گرفتیم. درون Card مورد نظر card-content و card-action رو قرار دادیم. خروجی بصورت زیر خواهد بود: حالا اگه بخایم بجای متن بالایی یک عکس قرار بدیم بصورت زیر عمل میکنیم: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class="row">     <div class="col s12 m6">         <div class="card blue-grey lighten-4">             <div class="card-image">                 <img src="html5-mini-logo.jpg">             </div>             <div class="card-content">                 <p>HTML5 is the , ...ادامه مطلب

0 3 ۲۹ فروردین ۹۵ در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم. Materialize تعدادی کلاس داره که با استفاده از اون میتونین تصاویر و ویدیوهایی که در سایتتون قرار میدین رو برای طراحی واکنشگرا آماده کنید و بر روی هر دستگاهی به خوبی نمایش داده بشه. کلاسهای که در این زمینه وجود داره عبارتند از: responsive-img : این کلاس باعث میشه که یک تصویر متناسب با سایز نمایشگر خودش رو مطابقت بده و تغییر اندازه بده. video-container : برای اون المنتهایی که واکنشگرا هستن و محتوای یک ویدیو هستن میتونین از این کلاس استفاده کنید و اون رو واکنشگرا کنید responsive-video : برای واکنشگرا کردن ویدیوهای HTML5 از این کلاس استفاده میشه. مثالها مربوط به تصاویر واکنشگرا: 1 2 3 4 5 6 <div class="card-panel"> <img src="html5-mini-logo.jpg" alt="" class="responsive-img"> </div>       <div class="card-panel"> <img src="html5-mini-logo.jpg" alt="" class="circle responsive-img"> </div> میبینید که به تصاویر موجود در کد بالا کلاس responsive-img اضافه شده و باعث میشه که اونا واکنشگرا بشن. به تصویر دومی هم کلاس circle اضافه شده و باعث میشه که border-radius به اون اعمال بشه و دایره ای بشه. خروجی کد بالا بصورت زیر خواهد بود: اگر سایز مرورگر رو تغییر بدین میبینید که زمانی که سایز تصویر از مرورگر بیشتر میشه، سایز اون بصورت اتوماتیک تغییر میکنه و خودشو مطابقت میده. مربوط به ویدیو: اگر بخواید به المنتی که درونش یک ویدیو قرار داده شده کلاس video-container اضافه کنید، بصورت زیر عمل میکنید: <div class="video-container"> <iframe width="540" height="200" src="http://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe> </div> میبینید که در div بالا یک iframe قرار داده شده و ویدیوی مورد نظر قرار داده شده. حالا میتونیم با دادن کلاس video-container به این Div، این ویدیو رو واکنشگرا کنیم و اونو بهینه سازی کنیم. حالا فرض کنید که با استفاده از تگ HTML5 Video میخاید یک ویدیو رو در سایت خودتون قرار بدین. برای این کار باید بصورت زیر عمل کنید: 1 2 3 4 5 6 7 <div>, ...ادامه مطلب