تاپیک جامع ابزار های متریال ( اندروید استودیو )

[Elyas Erfani 3,582]

سلام به دوستان عزیز

 

تصمیم گرفتم ی تاپیک ایجاد کنم و توی این تاپک آموزش کار با تمامی ابزار ها و ویو های متریال دیزاین رو در اندروید استودیو قرار بدم

 

نکته مهم : منظور ما از متریال فقط ی تولبار متریال یا یه اسلاید منوی متریال نیست بلکه ده ها ابزار دیگه وجود داره که کمتر بهشون اهمیت داده میشه

 

=============================================================

ابزار اول : Material Floating Label واسه ادیت تکست

 

ی لیبل شناور و زیبا هست واسه استفاده ادیت تکست

 

ما واسه استفاده از این ابزار نیاز به support library داریم

 

خوب پس کامپایلش میکنیم از فایل گردل پروژمون

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
}

با اضافه کردن این کتابخونه ی لایوت جدید میتونیم ایجاد کنیم به اسم Text input layout

 

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

 

کد xml لایوتمون :

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
 
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.AppBarLayout>
 
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="60dp">
 
        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
 
            <EditText
                android:id="@+id/input_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:hint="@string/hint_name" />
        </android.support.design.widget.TextInputLayout>
 
        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
 
            <EditText
                android:id="@+id/input_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"
                android:hint="@string/hint_email" />
        </android.support.design.widget.TextInputLayout>
 
        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
 
            <EditText
                android:id="@+id/input_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword"
                android:hint="@string/hint_password" />
        </android.support.design.widget.TextInputLayout>
 
        <Button android:id="@+id/btn_signup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/btn_sign_up"
            android:background="@color/colorPrimary"
            android:layout_marginTop="40dp"
            android:textColor="@android:color/white"/>
 
    </LinearLayout>
 
</android.support.design.widget.CoordinatorLayout>

فایل strings.xml برناممون :

<resources>
    <string name="app_name">Floating Labels</string>
    <string name="action_settings">Settings</string>
    <string name="hint_name">Full Name</string>
    <string name="hint_email">Email</string>
    <string name="hint_password">Password</string>
    <string name="btn_sign_up">Sign Up</string>
    <string name="err_msg_name">Enter your full name</string>
    <string name="err_msg_email">Enter valid email address</string>
    <string name="err_msg_password">Enter the password</string>
</resources>

خوب حالا میریم سراغ کدنویسی کلاس جاوامون :

 

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

 

به طور مثال تابع set.error ک میاد اشتباه بودن محتویات ادیت تکستو مشخص میکنه

 
import android.os.Bundle;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
 
public class MainActivity extends AppCompatActivity {
 
    private Toolbar toolbar;
    private EditText inputName, inputEmail, inputPassword;
    private TextInputLayout inputLayoutName, inputLayoutEmail, inputLayoutPassword;
    private Button btnSignUp;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
 
        inputLayoutName = (TextInputLayout) findViewById(R.id.input_layout_name);
        inputLayoutEmail = (TextInputLayout) findViewById(R.id.input_layout_email);
        inputLayoutPassword = (TextInputLayout) findViewById(R.id.input_layout_password);
        inputName = (EditText) findViewById(R.id.input_name);
        inputEmail = (EditText) findViewById(R.id.input_email);
        inputPassword = (EditText) findViewById(R.id.input_password);
        btnSignUp = (Button) findViewById(R.id.btn_signup);
 
        inputName.addTextChangedListener(new MyTextWatcher(inputName));
        inputEmail.addTextChangedListener(new MyTextWatcher(inputEmail));
        inputPassword.addTextChangedListener(new MyTextWatcher(inputPassword));
 
        btnSignUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                submitForm();
            }
        });
    }
 
    /**
     * Validating form
     */
    private void submitForm() {
        if (!validateName()) {
            return;
        }
 
        if (!validateEmail()) {
            return;
        }
 
        if (!validatePassword()) {
            return;
        }
 
        Toast.makeText(getApplicationContext(), "Thank You!", Toast.LENGTH_SHORT).show();
    }
 
    private boolean validateName() {
        if (inputName.getText().toString().trim().isEmpty()) {
            inputLayoutName.setError(getString(R.string.err_msg_name));
            requestFocus(inputName);
            return false;
        } else {
            inputLayoutName.setErrorEnabled(false);
        }
 
        return true;
    }
 
    private boolean validateEmail() {
        String email = inputEmail.getText().toString().trim();
 
        if (email.isEmpty() || !isValidEmail(email)) {
            inputLayoutEmail.setError(getString(R.string.err_msg_email));
            requestFocus(inputEmail);
            return false;
        } else {
            inputLayoutEmail.setErrorEnabled(false);
        }
 
        return true;
    }
 
    private boolean validatePassword() {
        if (inputPassword.getText().toString().trim().isEmpty()) {
            inputLayoutPassword.setError(getString(R.string.err_msg_password));
            requestFocus(inputPassword);
            return false;
        } else {
            inputLayoutPassword.setErrorEnabled(false);
        }
 
        return true;
    }
 
    private static boolean isValidEmail(String email) {
        return !TextUtils.isEmpty(email) && android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches();
    }
 
    private void requestFocus(View view) {
        if (view.requestFocus()) {
            getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);
        }
    }
 
    private class MyTextWatcher implements TextWatcher {
 
        private View view;
 
        private MyTextWatcher(View view) {
            this.view = view;
        }
 
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
        }
 
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
        }
 
        public void afterTextChanged(Editable editable) {
            switch (view.getId()) {
                case R.id.input_name:
                    validateName();
                    break;
                case R.id.input_email:
                    validateEmail();
                    break;
                case R.id.input_password:
                    validatePassword();
                    break;
            }
        }
    }
}

خوب نتیجه این کارمون میشه این :

 

 

اینم کار با تابع set.error

 

 

 

منتظر کار با سایر ابزار های متریال باشید

با اجازه تاپیک مهم شد !!!!!!!!!

 

موفق باشید

 

[Elyas Erfani 3,582]

ابزار دوم

SnackBar

 

 

خوب اسنک بار ابزار جدیدی هست در طراحی متریال که به نظرم خیلی زیبا و عالیه و میتونه جای Toast رو پر کنه واسه شما

 

برای ساخت ی اسنک بار معمولی :

Snackbar snackbar = Snackbar

        .make(coordinatorLayout, "AnswerCenter.Ir", Snackbar.LENGTH_LONG);

snackbar.show();

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

Snackbar snackbar = Snackbar

        .make(coordinatorLayout, "AnswerCenter.Ir", Snackbar.LENGTH_LONG)

        .setAction("ButtonName", new View.OnClickListener() {

            @Override

            Public void onClick(View view) {

                Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Button Clicked !", Snackbar.LENGTH_SHORT);

                snackbar1.show();

            }

        });


snackbar.show();