ورود با اکانت گوگل
یا
آقای متریال

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

معرفی و آموزش TextInputLayout | Floating Labels

rouhollah.mz


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

به نام خدا Floating Labels

سلام ، در خدمتتون هستیم با آموزش Floating Labels

زمانی که کاربر قصد نوشتن متنی در ادیت تکست ها رو داره متن hint درون ادیت تکست به سمت بالا حرکت میکنه .

__

برای اضافه کردن در اولین مرحله باید کتابخانه ی AppCompat و Design رو در build.gradle وارد کنیم :

dependencies {  
    compile 'com.android.support:appcompat-v7:23.2.1' 
    compile 'com.android.support:design:23.2.1' 
}

پس از اون باید مطمئن بشیم که اکتیویتی مورد نظر ما extend شده باشه از AppCompatActivity  :

public class MainActivity extends AppCompatActivity { 
...
}

در مرحله ی بعد EditText رو درون TextInputLayout قرار میدیدم :

<android.support.design.widget.TextInputLayout  
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/Title" />

</android.support.design.widget.TextInputLayout>

هر دو EditText و TextInputLayout دارای android:hint هستند و شما میتونید هر تمی رو برای اون استفاده کنید.

_

برای اینکه Style مورد نظر خودمون رو (رنگ هنگام تپ شدن) به EditText بدیم باید به این شیوه عمل کنیم :

باید Custom Style خودمون رو در style.xml وارد کنیم :

<!--Floating label text style-->  
<style name="MyHintText" parent="TextAppearance.AppCompat.Small">  
    <item name="android:textColor">@color/pink</item>
</style>

<!--Input field style-->  
<style name="MyEditText" parent="Theme.AppCompat.Light">  
    <item name="colorControlNormal">@color/indigo</item>
    <item name="colorControlActivated">@color/pink</item>
</style>

و برای وارد کردن رنگ مورد نظر ، کافیه که کد رنگ رو بجای این قسمت وارد کنیم :

@color/indigo | @color/pink

این استایل رو برای TextInputLayout با app:hintTextAppearance و برای EditText با android:theme وارد میکنیم .

و تنها کار باقی مونده وارد کردن این Style برای EditText و TextInputLayout مورد نظر ماست :

<android.support.design.widget.TextInputLayout  
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/MyHintText">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/Title"
        android:theme="@style/MyEditText" />

</android.support.design.widget.TextInputLayout>

نتیجه ی نهایی :

Floating Labels

Floating Labels

__

امیداوریم که آموزش برای شما مفید بوده باشه ، موفق باشید .

دیدگاه هایی که برای این مطلب ارسال شده

  1. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: soroush habibi شهریور ۱۱, ۱۳۹۵

    این برنامه تو همه ی api ها جواب میده؟

    • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: Rouhollah.Mz شهریور ۱۱, ۱۳۹۵

      سلام
      بله . البته الان استفاده کردن از api زیر ۱۵ کار عجیبیه ! حداقل api رو برای برنامه هاتون رو api15 بزارید .

  2. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: MosTaFa movahhed شهریور ۲۷, ۱۳۹۵

    سلام اقای Rouhollah.Mz ..ممنون بابت تمام اموزش هاتون..واقعن مفید و جذابن..
    یه سوال داشتم..توی این ادیت تکست متریال م الان معرفی کردین اگر بخواییم hint داخلش رو فارسی بنویسیم بد نشون میده و درهم مینویستش..
    ممنون میشم راهنماییم کنید…
    برای طراحی فرم login هست..
    تشکر

    • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: Rouhollah.Mz شهریور ۲۷, ۱۳۹۵

      سلام
      نظر لطف شماست ، چطور درهم نوشته میشه ؟ نباید مشکلی داشته باشه ، توی دیوایس واقعی به این شکل نشون داده میشه ؟
      اگه هم منظورتون از بد نشون دادن راست یا چپ چین بودن اون هست که میتونید از layoutDirection استفاده کنید .

شما هم دیدگاهی برای این مطلب ارسال کنید

مطالب مرتبط

مطالب تصادفی

لوگوی دوستان

هایپر تمپ | HyperTemp