رابط_کاربری - اندروید استودیو

ویژگی‌ها و استایل‌های مختلف نوتیفیکیشن در اندروید

سیدمهدی مطهری — Thu, 04 Jul 2019 11:07:49 +0000

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

آنچه در این آموزش می‌خوانید:

آشنایی با ساختار نوتیفیکیشن (Notification) در سیستم عامل اندروید
معرفی متد PendingIntent جهت تعامل کاربر با نوتیفیکیشن‌ها و هدایت وی به مقصد موردنظر
کار با دکمه‌های Action در نوتیفیکیشن
تفاوت نحوه نمایش اکشن‌ها در نسخه‌های قدیم و جدید اندروید
نمایش متن طولانی در اعلان به وسیله استایل BigTextStyle و گنجاندن خلاصه متن در نوتیفیکیشن
معرفی نوتیفیکیشن‌هایی که باز و بسته می‌شوند (Expandable Notification)
نمایش تصویر بزرگ در Notification با استفاده از استایل BigPictureStyle
نحوه تبدیل تصاویر با فرمت JPG و PNG به Bitmap در اندروید
نمایش لیست پیغام‌های دریافتی توسط InboxStyle
حذف و یا لغو نوتیفیکیشن پس از انجام یک عمل خاص و یا بصورت خودکار و پس از گذشت زمان مشخص
مدیریت Notification Badge از قبیل نحوه نمایش اعلان‌ها و همچنین تعداد پیغام‌های دریافتی
نحوه غیر فعال کردن Notification Badge یا Notification Dots
حذف یک Notification Channel از روی سیستم عامل اندروید توسط deleteNotificationChannel

این مبحث در قالب PDF و در ۲۷ صفحه تهیه شده که در ادامه چند صفحه‌ی ابتدایی را مشاهده می‌کنید:

در قسمت قبل با نحوه ساخت نوتیفیکیشن در اندروید آشنا شدیم. در این مبحث قصد دارم انواع نوتیفیکیشن، حالت‌ها و امکانات مختلف قابل پیاده سازی برای اعلان‌های اندرویدی را معرفی کنم.
برای این قسمت پروژه جدیدی نمی‌سازم و از همان پروژه قسمت قبل استفاده می‌کنم.

ساختار نوتیفیکیشن اندروید

به نام خدا. قبل از ادامه مبحث ابتدا بهتر است ساختار نوتیفیکیشنی که در مبحث قبل ساختیم را مرور کنیم. هرکدام از اجزاء اعلان را به ترتیب شماره توضیح می‌دهم:

۱: آیکون کوچک (Small icon): این آیکون توسط setSmallIcon ساخته شده که تعریف آن برای نوتیفیکیشن الزامی است.
۲: در اینجا نام اپلیکیشنی که نوتیفیکیشن را اجرا کرده نمایش داده می‌شود.
۳: زمان ساخت نوتیفیکیشن را نشان می‌دهد. البته می‌توان این قسمت را به دلخواه تغییر داد و یا حذف کرد.
۴: آیکون بزرگ (Large icon): این آیکون توسط setLargeIcon ساخته شده و کاربرد آن نمایش یک آیکون یا تصویر بزرگ در کنار پیغام است.
۵: عنوان نوتیفیکیشن
۶: متن نوتیفیکیشن

انواع نوتیفیکیشن در اندروید

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

نکته: کد کامل اکتیویتی علاوه بر سورس پروژه، در انتهای همین آموزش نیز قید شده. بنابراین در هر مرحله اگر با ابهامی مواجه شدید به کد کامل مراجعه کنید. به جهت خلاصه شدن متن، از توضیحات تکراری (شامل ساخت دکمه، تعریف آن در کلاس اکتیویتی، ساخت متد setOnClickListener و…) تا حد امکان اجتناب کردم.

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

استفاده از PendingIntent و ساخت Action برای نوتیفیکیشن

نوتیفیکیشنی که قبلا ساختیم صرفا یک پیغام را به کاربر نمایش می‌دهد و غیر از بستن آن، کاربر هیچگونه تعاملی نمی‌تواند با این پیغام داشته باشد. در صورتی که ما به این تعامل نیاز داریم. اگر اعلان مربوط به یک تخفیف است، می‌بایست کاربر را به صفحه مرتبط با آن هدایت کند. در اینجا از pendingIntent استفاده می‌کنیم. قبلا با نحوه کار با intent در اندروید آشنا شدیم. حالا در نوتیفیکیشن هم با استفاده از اینتنت تعیین می‌کنیم بعد از لمس اعلان توسط کاربر، چه عملی صورت پذیرد.
پروژه Notification را باز می‌کنم. ابتدا یک دکمه با عنوان PendingIntent Notification به Layout اکتیویتی اضافه می‌کنم:

سپس طبق کد زیر یک نوتیفیکیشن دیگر داخل اکتیویتی می‌سازم:

package ir.android_studio.notification;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.NotificationCompat;
import android.app.NotificationChannel;
import android.app.NotificationManager;
import android.app.PendingIntent;
import android.content.Context;
import android.content.Intent;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.media.RingtoneManager;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    Button simpleButton, pendingButton;
    NotificationManager notifManager;
    String offerChannelId = "Offers";
    PendingIntent mpIntent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        simpleButton = findViewById(R.id.simple_notif);
        pendingButton = findViewById(R.id.pending_notif);

        notifManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);

        Intent pIntent = new Intent(this, CartActivity.class);
        mpIntent = PendingIntent.getActivity(this, 0, pIntent, PendingIntent.FLAG_UPDATE_CURRENT);

        simpleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                createNotifChannel();
                simpleNotification();

            }
        });

        pendingButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                createNotifChannel();
                pendingNotification();

            }
        });

    }

    private void createNotifChannel() {

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {

            String offerChannelName = "Shop offers";
            String offerChannelDescription= "Best offers for customers";
            int offerChannelImportance = NotificationManager.IMPORTANCE_DEFAULT;

            NotificationChannel notifChannel = new NotificationChannel(offerChannelId, offerChannelName, offerChannelImportance);
            notifChannel.setDescription(offerChannelDescription);
            //notifChannel.enableVibration(true);
            notifChannel.enableLights(true);
            notifChannel.setLightColor(Color.GREEN);

            notifManager.createNotificationChannel(notifChannel);

        }

    }

    public void simpleNotification() {

        NotificationCompat.Builder sNotifBuilder = new NotificationCompat.Builder(this, offerChannelId)
                .setSmallIcon(R.drawable.notif_icon)
                .setContentTitle("بروزرسانی")
                .setContentText("یک نسخه جدید از برنامه آماده دریافت است")
                .setVibrate(new long[]{100,500,500,500,500,500})
                .setLargeIcon(BitmapFactory.decodeResource(getResources(), R.drawable.android))
                .setSound(RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION))
                .setVisibility(NotificationCompat.VISIBILITY_PUBLIC);

        notifManager.notify(1, sNotifBuilder.build());

    }

    public void pendingNotification() {

        NotificationCompat.Builder pNotifBuilder = new NotificationCompat.Builder(this, offerChannelId)
                .setSmallIcon(R.drawable.notif_icon)
                .setContentTitle("تخفیف پنجاه درصدی!")
                .setContentText("پنجاه درصد تخفیف به مناسبت طلوع خورشید")
                .setLargeIcon(BitmapFactory.decodeResource(getResources(), R.drawable.android))
                .setContentIntent(mpIntent);

        notifManager.notify(2, pNotifBuilder.build());

    }

}

در کد فوق ابتدا pendingButton را به دکمه مربوطه در لِی اوت متصل کردم. سپس یک شیء از Intent با نام mIntent ساختم:

Intent pIntent = new Intent(this, CartActivity.class);

به جهت ملموس بودن نتیجه کار، یک اکتیویتی با نام CartActivity به پروژه اضافه کرده و به اینتنت معرفی کردم.

mpIntent = PendingIntent.getActivity(this, 0, pIntent, PendingIntent.FLAG_UPDATE_CURRENT);

سپس با استفاده از متد PendingIntent و getActivity تعیین می‌کنم با لمس نوتیفیکیشن، pIntent اجرا شود. این متد ۴ پارامتر می‌گیرد که در جدول زیر معرفی شده:

اولی Context است که this وارد کردم. پارامتر دوم یک مقدار از جنس int است که به عنوان یک کد درخواست خصوصی تلقی می‌شود. من برای این نوتیفیکیشن مقدار ۰ قرار دادم. پارامتر سوم اینتنتی است که قبلا تعریف کردم یعنی pIntent. آخرین پارامتر یعنی flags جهت تعیین وضعیت اینتنت است که من در اینجا از نوع FLAG_UPDATE_CURRENT انتخاب کردم.
در قدم بعد یک تابع با نام pendingNotification به کلاس اضافه کردم. ۴ متد نخست این تابع مشابه simpleNotification است که در مبحث قبل توضیحات لازم ارائه شده.

public void pendingNotification() {

    NotificationCompat.Builder pNotifBuilder = new NotificationCompat.Builder(this, offerChannelId)
            .setSmallIcon(R.drawable.notif_icon)
            .setContentTitle("تخفیف پنجاه درصدی!")
            .setContentText("پنجاه درصد تخفیف به مناسبت طلوع خورشید")
            .setLargeIcon(BitmapFactory.decodeResource(getResources(), R.drawable.android))
            .setContentIntent(mpIntent); 

    notifManager.notify(2, pNotifBuilder.build());

}

توسط setContentIntent اینتنتی که قبلا ساختم را به نوتیفیکیشن معرفی می‌کنم.
در نهایت متد setOnClickListener مربوط به دکمه pendingButton را ساخته و توابع مرتبط با کانال و نوتیفیکیشن را فراخوانی می‌کنم. (برای سایر نوتیفیکیشن‌ها نیز همین مراحل تکرار می‌شود؛ یعنی اضافه کردن دکمه در Layout، ساخت متد setOnClickListener و فراخوانی توابع کانال و نوتیفیکیشن مربوط به آن درون این متد).
پروژه را اجرا کرده و روی دکمه PendingIntent Notification کلیک می‌کنم:

با کلیک روی نوتیفیکیشن، به اکتیویتی CartActivity هدایت شدم. اما یک ایراد وجود دارد. به نوار وضعیت تصویر دوم دقت کنید. هنوز آیکون نوتیفیکیشن مشاهده می‌شود. یعنی با وجود اینکه کاربر روی نوتیفیکیشن کلیک کرده و به مقصد مدنظر منتقل شده، اعلان همچنان باقی مانده که لازم است این مشکل را رفع کنیم. اینکار توسط متد setAutoCancel انجام می‌پذیرد:

NotificationCompat.Builder pNotifBuilder = new NotificationCompat.Builder(this, offerChannelId)
        .setSmallIcon(R.drawable.notif_icon)
        .setContentTitle("تخفیف پنجاه درصدی!")
        .setContentText("پنجاه درصد تخفیف به مناسبت طلوع خورشید")
        .setLargeIcon(BitmapFactory.decodeResource(getResources(), R.drawable.android))
        .setContentIntent(mpIntent)
        .setAutoCancel(true);

با اجرای مجدد پروژه، بعد از کلیک روی Notification، علاوه بر انتقال کاربر به صفحه CartActivity نوتیفیکیشن نیز حذف می‌شود.
علاوه بر کلیک روی نوتیفیکیشن، می‌توان دکمه‌هایی به اعلان افزود که برای هرکدام نیز یک intent مجزا تعریف شده باشد. این دکمه‌ها یک Action می‌نامیم.
برای مثال، نوتیفیکیشن برنامه مدیریت پیامک عموما دو گزینه دارد. اولی Reply جهت پاسخ دادن به پیامک دریافتی و دومی Mark as read که با لمس این دکمه، پیامک از حالت “خوانده نشده” به “خوانده شده” تغییر وضعیت پیدا می‌کند.
من متد setContentIntent را غیرفعال کرده و بجای آن دو Action به نوتیفیکیشن اضافه می‌کنم:

NotificationCompat.Builder pNotifBuilder = new NotificationCompat.Builder(this, offerChannelId)
        .setSmallIcon(R.drawable.notif_icon)
        .setContentTitle("تخفیف پنجاه درصدی!")
        .setContentText("پنجاه درصد تخفیف به مناسبت طلوع خورشید")
        .setLargeIcon(BitmapFactory.decodeResource(getResources(), R.drawable.android))
        //.setContentIntent(mpIntent)
        .addAction(R.drawable.notif_icon, "Buy", mpIntent)
        .addAction(R.drawable.notif_icon, "Product details", mpIntent)
        .setAutoCancel(true);

addAction سه ورودی می‌گیرد:
ورودی اول: برای هر گزینه می‌توان یک آیکون تعریف کرد. البته توجه داشته باشید از اندروید Nougat به بعد برای سادگی بیشتر محیط نوتیفیکیشن، این آیکون‌ها نمایش داده نمی‌شوند.
ورودی دوم: عنوان اکشن است که برای اکشن اول “Buy” و اکشن دوم “Product details” وارد کردم.
ورودی سوم: PendingIntent ای که قبلا تعریف شده.

مجدد پروژه را اجرا می‌کنم:

دو اکشن به انتهای نوتیفیکیشن اضافه شده که البته در این مثال هردو یک عملکرد دارند؛ یعنی هدایت به CartActivity.
همانطور که قبلا اشاره کردم، از اندروید N و به بالاتر، آیکون گزینه‌ها نمایش داده نمی‌شود. اما روی دیوایس‌های پایین‌تر از این نسخه، آیکون‌ها در کنار عنوان دکمه وجود دارد. پروژه را روی یک دیوایس با API 23 اجرا کردم:

نکته: با کلیک روی اکشن‌ها کاربر به مقصد هدایت شده اما بازهم نوتیفیکیشن حذف نمی‌شود. یعنی setAutoCancel اینجا کاربردی ندارد. برای حل این مشکل از متد cancel استفاده می‌شود که در صفحه ۱۸ به آن پرداخته شده است.

نمایش متن بزرگ در نوتیفیکیشن توسط BigTextStyle

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

public void bigTextNotification() {

    NotificationCompat.BigTextStyle bStyle = new NotificationCompat.BigTextStyle()
            .bigText("لورم ایپسوم متنی است که ساختگی برای طراحی و چاپ آن مورد است. صنعت چاپ زمانی لازم بود شرایطی شما باید فکر ثبت نام و طراحی، لازمه خروج می باشد ")
            .setBigContentTitle("نوتیفیکیشن طولانی")
            .setSummaryText("خلاصه متن طولانی");

    NotificationCompat.Builder bNotifBuilder = new NotificationCompat.Builder(this, offerChannelId)
            .setSmallIcon(R.drawable.notif_icon)
            .setContentTitle("تخفیف پنجاه درصدی! ")
            .setContentText("پنجاه درصد تخفیف به مناسبت طلوع خورشید")
            .setStyle(bStyle);

    notifManager.notify(3, bNotifBuilder.build());

}

مانند قبل یک تابع جدید به کلاس اضافه کردم. نام این تابع را bigTextNotification گذاشتم.
در NotificationCompat امکان تعریف Style ها را داریم. در اینجا من از BigTextStyle یک شیء با نام bStyle ایجاد کرده‌ام که ۳ ویژگی برای آن تعریف شده.

جهت مطالعه ادامه آموزش، فایل PDF را دانلود نمائید

توجه : سورس پروژه درون پوشه Exercises قرار دارد

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

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

نوشته ویژگی‌ها و استایل‌های مختلف نوتیفیکیشن در اندروید اولین بار در اندروید استودیو پدیدار شد.

راست چین کردن Toolbar متریال اندروید

سیدمهدی مطهری — Thu, 09 May 2019 02:27:00 +0000

به نام خدا. در مبحث آموزش ساخت Toolbar با نحوه پیاده سازی تولبار در پروژه اندرویدی آشنا شدیم. در این قسمت از آموزش برنامه نویسی اندروید نحوه‌ی راست چین کردن Toolbar در اندروید را بررسی می‌کنیم.

ضرورت راست چین کردن اجزای رابط کاربری اندروید

مخاطبان برنامه‌های اندرویدی که شما به عنوان یک توسعه دهنده منتشر می‌کنید عمدتا فارسی زبان هستند بنابراین لازم است چینش محتوا و قسمت‌های مختلف اپلیکیشن برای یک کاربر فارسی زبان بهینه سازی شده باشد.
مفاهیمی مانند راست چین (Right to left یا به اختصار RTL) و چپ چین (Left to right یا LTR) محدود به اپلیکیشن‌های موبایلی نبوده و حتما در سایر محیط‌های نرم افزاری با این اصطلاحات آشنا شده‌اید. به عنوان مثال در یک ویراستار متن مانند Office Word یا صفحات وب نیز این مفاهیم به کار گرفته شده‌اند. اگر با طراحی صفحات وب آشنایی داشته باشید احتمالا می‌دانید در CSS با تعریف direction:rtl تمامی محتوای موجود در صفحه راست چین می‌شود.

راست چین کردن تولبار در اندروید

در این آموزش به بررسی روش‌های راست چین کردن Toolbar در اندروید می‌پردازیم. برای این مبحث پروژه‌ی جدیدی نمی‌سازم و همان پروژه آموزش ساخت Toolbar را ویرایش می‌کنم تا نتیجه کار نیز برای شما بهتر قابل درک باشد.
اندروید در API 17 یا همان Android 4.2 (Jelly Bean) و همچنین API 19 یا Android 4.4 (KITKAT) قابلیت پشتیبانی از Layout های راست به چپ (RTL Layout) را به سیستم عامل خود اضافه کرد. با معرفی این قابلیت، راه برای توسعه دهندگان اندروید تا حدود زیادی هموار شد. تا پیش از این برای راست چین کردن تولبار لازم بود تولبار کاملا به صورت دستی پیاده سازی شود. اما از API 17 به سادگی می‌توان راست چین کردن تولبار و View های اندروید را انجام داد.
راست چین کردن Toolbar در اندروید را به دو صورت آموزش می‌دهم. روش نخست با استفاده از خاصیت layoutDirection در XML و روش دوم استفاده از متد setLayoutDirection در Java.

۱: راست چین کردن Toolbar توسط خاصیت layoutDirection در XML

این روش برای دیوایس‌های با API 17 و به بالا سازگاری دارد. قبل از هرچیز باید مطمئن شویم پروژه اندروید ما از قابلیت RTL پشتیبانی می‌کند. فعال شدن پشتیبانی از زبان‌های راست به چپ در اندروید توسط خاصیت android:supportsRtl در فایل مانیفست صورت می‌گیرد. فایل AndroidManifest.xml پروژه را باز می‌کنم:

مشاهده می‌کنید این خاصیت در تگ application با مقدار true قرار دارد بنابراین درون مانیفست لازم نیست کار دیگری انجام دهم. اگر این تگ در مانیفست شما وجود ندارد آنرا اضافه کرده یا در صورتی که مقدار آن false است به true تغییر دهید.
پروژه را اجرا می‌کنم:

هنوز تغییری در تولبار صورت نگرفته و چینش در حالت LTR است.

نکته: در صورتی که زبان دیوایس اندرویدی کاربر یکی از زبان‌های راست به چپ مانند فارسی باشد، صرف وجود android:supportsRtl=”true” در مانیفست باعث تغییر چینش اجزاء به صورت راست چین می‌شود. با اینحال عده زیادی از کاربران فارسی زبان (از جمله خودم) بنا به دلایلی با زبان انگلیسی در محیط سیستم عامل راحتتر هستیم. بنابراین در صورتی که به خاصیت فوق اکتفا کنیم بازهم بخش عمده ای از مخاطبان فارسی زبان، اپلیکیشن ما را به صورت غیر استاندارد مشاهده خواهند کرد و لازم است مراحل بعد را هم دنبال کنیم.

فایل activity_main.xml را باز کرده و خاصیت layoutDirection را با مقدار rtl به Toolbar اضافه می‌کنم:

با اجرای مجدد پروژه تولبار راست چین می‌شود:

آیتم‌هایی که در سمت چپ تولبار قرار داشت به سمت راست منتقل شدند و بلعکس. حتی آیتم‌های منوی تولبار نیز راست چین شده است:

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

نکته: layoutDirection محدود به یک View، Widget یا Layout خاص نیست و در همه‌جا می‌توان استفاده کرد. در همین اکتیویتی می‌توانستم بجای اضافه کردن این خاصیت به Toolbar آنرا به لایه‌ی اصلی اکتیویتی که از نوع LinearLayout هست اضافه کنم. به این ترتیب تمامی عناصر موجود درون این لایه راست چین می‌شوند. از جمله TextView ای که عبارت Hello World را نمایش می‌دهد:

۲: راست چین کردن تولبار توسط متد setLayoutDirection

این روش برای دیوایس‌های با API 19 و به بالا سازگاری دارد. در این روش نیز مانند قبل ابتدا باید خاصیت android:supportsRtl با مقدار true در مانیفست پروژه اندروید تعریف شده باشد.
خاصیت android:layoutDirection که در مرحله قبل به تولبار یا لایه‌ی اصلی اکتیویتی اضافه شده را حذف می‌کنم.
سپس خط کد زیر را داخل متد onCreate اکتیویتی اضافه می‌کنم:

getWindow().getDecorView().setLayoutDirection(View.LAYOUT_DIRECTION_RTL);

پارامتر ورودی متد setLayoutDirection از نوع View.LAYOUT_DIRECTION_RTL است که از نام آن پیداست که Direction (جهت) چینش اجزای Layout از نوع RTL اعمال می‌شود.
پروژه تولبار فقط یک اکتیویتی دارد بنابراین این خط درون MainActivity قرار می‌گیرد.
پروژه را اجرا می‌کنم:

مانند حالتی که در مرحله قبل android:layoutDirection=”rtl” را به Layout اصلی اکتیویتی اضافه کردم، با استفاده از متد setLayoutDirection نیز تمامی عناصر موجود در اکتیویتی به حالت راست چین تغییر وضعیت پیدا می‌کنند.
نحوه‌ی راست چین کردن Toolbar در اندروید را بررسی کردیم. پیاده سازی هردو روش به سادگی امکان‌پذیر است و نیازی به اعمال تغییرات در View ها نیست. البته کار همیشه به همین سادگی نخواهد بود. در مواردی ممکن است نیاز به اعمال تغییرات در عناصر موجود در صفحه باشد که در وب مقالات متعددی در این خصوص وجود دارد. یا اگر تمایل دارید اپلیکیشن راست چین شما از دیوایس‌های با API پایینتر از ۱۷ نیز به خوبی پشتیبانی کند، کار مقداری پیچیده‌تر خواهد شد. به امید خدا من هم در ادامه آموزش‌ها به نحوه‌ی راست چین کردن سایر قسمت‌های یک پروژه اندرویدی خواهم پرداخت.

مطالعه‌ی بیشتر:

https://developer.android.com/reference/android/util/LayoutDirection

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

نوشته راست چین کردن Toolbar متریال اندروید اولین بار در اندروید استودیو پدیدار شد.

نمایش اعداد فارسی در View های اندروید

سیدمهدی مطهری — Mon, 22 Apr 2019 11:22:08 +0000

به نام خدا. در این مبحث ابتدا روش‌های متفاوت نمایش اعداد فارسی در برنامه‌ی اندرویدی را بررسی کرده سپس یک متد جاوا برای تبدیل اعداد انگلیسی به فارسی می‌نویسیم و در View های پروژه اندروید برای نمایش اعداد به صورت فارسی از آن استفاده می‌کنیم.

آنچه در این آموزش می‌خوانید:

چرا باید از اعداد فارسی در برنامه اندروید استفاده کنیم؟
روش‌های نمایش اعداد فارسی در اپلیکیشن اندروید
تبدیل اعداد انگلیسی به فارسی در View های اندروید

چرا باید از اعداد فارسی در برنامه اندروید استفاده کنیم؟

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

این یک امتیاز منفی برای اپلیکیشن به حساب می‌آید. درست همانطور که نمایش عددهای فارسی در یک متن انگلیسی می‌تواند مضحک بنظر برسد!
بنابراین لازم است در صفحاتِ با محتوای فارسی حتما از اعداد فارسی استفاده کنیم (مگر در موارد خاص). در اینصورت خوانایی محتوا نیز برای کاربر بهینه می‌شود.

روش‌های نمایش اعداد فارسی در اپلیکیشن اندروید

برای نمایش عددهای فارسی در برنامه نویسی اندروید، راهکارهای متفاوتی وجود دارد که در اینجا به چند مورد اشاره می‌کنم:
۱- بکاربردن مستقیم اعداد فارسی در متن و قسمت‌های مدنظر: در این حالت کافیست اعداد به صورت فارسی به View ها ارسال شوند. چه محتوایی که در دیتابیس ذخیره شده چه آنهایی که به واسطه وب سرویس از سرور دریافت می‌شوند و چه آنهایی که در خود اکتیویتی‌ و Layout قرار گرفته اند.
۲- استفاده از فونت‌های فارسی: اگر مبحث تغییر فونت در برنامه اندرویدی را مطالعه کرده باشید، روش‌های متفاوت تغییر فونت پیش فرض اندروید را بررسی کردیم. برخی فونت‌های فارسی، اعداد انگلیسی را هم به صورت فارسی نمایش می‌دهند بنابراین خیلی ساده و بدون نیاز به هیچ عمل دیگری می‌توانید مسئله را حل کنید. به عنوان مثال فونت IRANSans برای اپلیکیشن‌های موبایلی دو فونت متفاوت ارائه داده که در یکی از آنها فارغ از اینکه اعداد فارسی یا انگلیسی هستند، آنها را به صورت فارسی نمایش می‌دهد. البته استفاده از این نوع فونت یک ایراد دارد که در واقع همان ویژگی آن محسوب می‌شود! یعنی شما امکان نمایش اعداد انگلیسی را نخواهید داشت. فرض کنید نام و مدل یک محصول در فروشگاه شما LG G7 است. طبیعتا چون نام و مدل، کاراکترهای انگلیسی هستند، عدد بکار رفته در سری یا مدل این محصول نیز باید انگلیسی باشد نه فارسی. مگر آنکه هر دو فونت استاندارد و به اصطلاح FaNum را در پروژه بکار ببریم و در هر View بنا به نیاز از یکی از آنها استفاده کنیم.
۳- تبدیل اعداد انگلیسی به فارسی: در این روش باید متدی را پیاده سازی کنیم که قبل از ارسال محتوا به View مدنظر، چک کند اگر عدد یا اعداد انگلیسی وجود دارد آنها را با اعداد فارسی جایگزین نماید. در این مبحث قصد دارم این روش را آموزش دهم.

تبدیل اعداد انگلیسی به فارسی در View های اندروید

در این روش یک متد می‌سازیم که محتوای ارسالی به View را بررسی می‌کند و درصورت وجود اعداد انگلیسی، آنها را به اعداد فارسی تبدیل می‌کند.
ابتدا یک پروژه با نام FarsiNumbers در اندروید استودیو می‌سازم که اکتیویتی آن از نوع Empty Activity است.

پروژه با موفقیت بیلد شد. حالا یک کلاس جاوا به پروژه اضافه می‌کنم. من نام این کلاس را FaNum انتخاب کردم:

کلاس FaNum.java را بصورت زیر تکمیل می‌کنم:

package ir.android_studio.farsinumbers;

public class FaNum {

    public static String convert(String faNumbers) {
        String[][] mChars = new String[][]{
                {"0", "۰"},
                {"1", "۱"},
                {"2", "۲"},
                {"3", "۳"},
                {"4", "۴"},
                {"5", "۵"},
                {"6", "۶"},
                {"7", "۷"},
                {"8", "۸"},
                {"9", "۹"}
        };

        for (String[] num : mChars) {

            faNumbers = faNumbers.replace(num[0], num[1]);

        }

        return faNumbers;
    }

}

یک متد از نوع String و با نام دلخواه convert درون کلاس ایجاد کردم که پارامتر ورودی آن از نوع String و با نام دلخواه faNumbers انتخاب شده. در ادامه یک آرایه دو بُعدی با نام mChars ساخته‌ام که مقادیر آن شامل اعداد انگلیسی و فارسی‌ست. ستون اول (اندیس صفر) مربوط به اعداد انگلیسی و ستون دوم (اندیس یک) مربوط به اعداد فارسی می‌باشد. سپس یک for تعریف شده. درون بلاک for از متد replace استفاده شده به‌اینصورت که کاراکترهای دریافتی بررسی شده و در صورت وجود کاراکتر (اعداد) انگلیسی (ستون اول)، با عدد فارسی مقابل آن (ستون دوم) تعویض و جایگذاری می‌شود. به عبارتی اندیس ۱ جایگزین اندیس ۰ می‌شود.
در نهایت چون متد از نوع بازگشتی است، مقدار خروجی return می‌شود.
متد کامل شد. حالا برای تست متدی که ساختم، یک TextView به اکتیویتی اضافه می‌کنم:

activity_main.xml:

MainActivity.java:

package ir.android_studio.farsinumbers;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextView mText = findViewById(R.id.m_txt);

        mText.setText("1234567890");

    }
}

ابتدا توسط متد setText یک رشته شامل اعداد ۰ تا ۹ انگلیسی را به TextView ارسال می‌کنم. با اجرای پروژه روی شبیه ساز اندروید مسلما اعداد به صورت انگلیسی ظاهر خواهند شد:

حالا از متدی که نوشتم استفاده می‌کنم و انتظار دارم با افزودن متد convert کلاس FaNum به setText اعداد به صورت فارسی نمایش داده شوند:

mText.setText(FaNum.convert("1234567890"));

متد به درستی کار می‌کند.

این متد را به صورت‌های دیگری نیز می‌توان پیاده سازی کرد که با جستجو در وب به نمونه‌هایی برخورد می‌کنیم. یکی از آنها را در اینجا ذکر می‌کنم:

package ir.android_studio.farsinumbers;

public class FaNum2 {

    private static String[] faNumbers = new String[]{"۰","۱","۲","۳","۴","۵","۶","۷","۸","۹"};

    public static String convert(String text) {
        if (text.length() == 0) {
            return "";
        }
        String out = "";
        int length = text.length();
        for (int i = 0; i < length; i++) {
            char c = text.charAt(i);
            if ('0' <= c && c <= '9') {
                int number = Integer.parseInt(String.valueOf(c));
                out += faNumbers[number];
            } else if (c == '٫' || c == ',') {
                out += '،';
            } else {
                out += c;
            }
        }
        return out;
    }

}

یک کلاس جدید با نام FaNum2 به پروژه اضافه کرده و متد فوق را درون آن قرار دادم. حالا کافیست در setText متد convert این کلاس را فراخوانی کنم:

mText.setText(FaNum2.convert("1234567890"));

نتیجه مشابه خروجی متد قبل بوده و اعداد فارسی نمایش داده می‌شوند.
به تکه کد زیر دقت کنید:

if (c == '٫' || c == ',') {
    out += '،';
}

کاربرد این کد برای مواقعی است که قیمت محصولات دارای جداکننده باشد و بخواهیم کاراکتر جداکننده نیز به ویرگول فارسی تبدیل شود.
اعداد را توسط جداکننده (ویرگول انگلیسی) به صورت سه رقم از یکدیگر جدا کرده و مجدد پروژه را اجرا می‌کنم:

mText.setText(FaNum2.convert("123,4567,890"));

خروجی همان چیزی است که انتظارش را داشتیم.

توجه: سورس پروژه درون پوشه Exercises قرار دارد

دانلود نسخه PDF این آموزش به همراه سورس پروژه
تعداد صفحات : ۱۰
حجم : ۱ مگابایت
قیمت : رایگان
دانلود رایگان با حجم ۱ مگابایت لینک کمکی

نوشته نمایش اعداد فارسی در View های اندروید اولین بار در اندروید استودیو پدیدار شد.

نمایش صفحات وب در اکتیویتی توسط WebView

سیدمهدی مطهری — Mon, 08 Apr 2019 10:56:25 +0000

به نام خدا. در این مبحث ابتدا به معرفی WebView در اندروید پرداخته سپس با نحوه فراخوانی و نمایش صفحات وب (HTML) آنلاین و آفلاین آشنا می‌شویم.

WebView چیست؟

WebView یکی دیگر از View (Widget)های کاربردی پلتفرم اندروید است. توسط این View می‌توانیم یک صفحه‌ی وب آنلاین یا آفلاین (لوکال) را درون یک Activity به کاربر نمایش دهیم. درست مانند باز کردن یک وب‌سایت در مرورگری مانند Chrome با این تفاوت که کاربر، صفحه وب را درون برنامه مشاهده می‌کند و به یک مرورگر مستقل منتقل نمی‌شود.
در WebView امکان کنترل محتوای دریافتی از صفحه‌ی وب وجود دارد. به عنوان مثال می‌توانیم تعیین کنیم کدهای JavaScript (جاوا اسکریپت) که در طراحی صفحات وب با کدهای HTML ترکیب می‌شوند امکان اجرا داشته باشد یا خیر.

کاربردهای WebView در اندروید

کاربردهای متعددی را می‌توان برای این View ذکر کرد. یکی از مثال‌های بارز و پرکاربرد، نمایش نقشه‌های آنلاین مانند Google Maps است. اگر قصد دارید محل شرکت خود را روی یک نقشه نشان دهید، استفاده از WebView یکی از گزینه‌های ساده و در دسترس است.
یک کاربرد دیگر، نمایش محتوایی است که مرتب در حال تغییر و بروزرسانی است. تعدادی از اپلیکیشن‌های مطرح (ازجمله اینستاگرام) برای نمایش متن “شرایط و قوانین استفاده از اپلیکیشن” از یک وب ویو استفاده می‌کنند. درنتیجه کاربر با مراجعه به این صفحه (اکتیویتی) متن قوانین را به صورت آنلاین و بروز از سرورهای اینستاگرام دریافت می‌کند. مزیت این روش در این است که برای اصلاح و بروزرسانی متن نیازی به انجام تغییرات درون خود برنامه و انتشار نسخه جدید نیست و کاربر بدون نیاز به بروزرسانی اپلیکیشن، هربار که قصد مطالعه قوانین برنامه را داشته باشد، آخرین نسخه را مشاهده می‌کند.
یا فرض کنید یک وب‌سایت فروشگاهی راه اندازی کرده‌اید و به دلایلی (وقت کم، هزینه‌ی زیاد و…) امکان ساخت اپلیکیشن کامل آنرا ندارید. در اینجا به راحتی می‌توان همان وب‌سایت را در قالب یک اپلیکیشن موبایلی به کاربر عرضه کرد. درست مانند این است که کاربر وارد یک مرورگر شده و آدرس وب‌سایت شما را وارد کند. تنها تفاوت در این است که نیازی به وارد کردن آدرس نیست و به محض اجرای برنامه، وب‌سایت لود می‌شود.

نکته: استفاده از این قابلیت برای نمایش یک وب‌سایت کامل در قالب یک اپلیکیشن موبایلی، راهکار استانداردی نیست و تجربه کاربری (UX) قابل قبولی را رقم نمی‌زند. هنگامی از این راهکار استفاده کنید که هیچ گزینه‌ی دیگری روی میز نباشد! در این صورت وب‌سایت باید برای انواع صفحات نمایش بهینه شده باشد، یعنی پیاده سازی طراحی واکنشگرا (Responsive) الزامی است.

در ادامه و در قالب یک پروژه شما را با WebView و قابلیت‌های آن آشنا می‌کنم.

ساخت پروژه‌ WebView در اندروید استودیو

یک پروژه‌ی جدید در اندروید استودیو با نام WebView می‌سازم. اکتیویتی پیش فرض را از نوع Empty Activity انتخاب می‌کنم.
همانطور که در مبحث آموزش کتابخانه Retrofit اندروید اشاره شد، جهت امکان برقراری ارتباط بین اپلیکیشن و شبکه (اینترنت) نیاز به تعریف مجوز دسترسی (Permission) داریم. بنابراین مجوز مربوطه را به مانیفست پروژه اضافه می‌کنم:

AndroidManifest.xml:

سپس در لایه‌ی رابط کاربری اکتیویتی (UI) در حالت Design ویجت WebView را روی صفحه‌ی پیش نمایش کشیده (Drag & drop) یا به صورت دستی و در حالت Text، تگ آنرا به Layout اضافه می‌کنم:

activity_main.xml:

حالا فایل جاوای اکتیویتی یعنی MainActivity.java را به صورت زیر تکمیل می‌کنم:

package ir.android_studio.webview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = findViewById(R.id.web_view);

        String siteUrl = "https://android-studio.ir";
        mWebView.loadUrl(siteUrl);

    }
}

ابتدا یک شیء از کلاس WebView با نام دلخواه mWebView ساختم. سپس درون متد onCreate این شیء را به View مربوطه متصل کردم. در اینجا قصد دارم آدرس https://android-studio.ir را در این اکتیویتی نمایش دهم که این امر توسط متد loadUrl صورت می‌پذیرد. همانطور که از نام این متد پیداست، Url مدنظر ما بارگزاری (load) می‌شود. در نهایت محتوای این آدرس به mWebView که به ویجت web_view متصل شده ارسال می‌گردد.
پروژه را اجرا می‌کنم. اگر شبیه ساز یا دیوایس دسترسی به اینترنت داشته و وب‌سایت نیز در دسترس باشد، باید محتوای آن را نمایش دهد.

صفحه‌ی وب با موفقیت درون اکتیویتی لود شده و می‌توانم به بالا و پایین اسکرول کنم.
اگر هدف من از ساخت این اپلیکیشن، تبدیل وب‌سایت به یک برنامه‌ی موبایلی باشد شاید تنها کار لازم حذف ActionBar است که در مبحث آموزش ساخت Toolbar در اندروید با نحوه‌ی انجام آن آشنا شدیم. کافیست در فایل styles.xml استایل مربوط به Theme متریال پروژه را به Theme.AppCompat.Light.NoActionBar تغییر دهم:

styles.xml:

بجز loadUrl متدهای دیگری مانند canGoBack()، canGoForward()، clearHistory()، getUrl()، getTitle() و… قابل استفاده است که در صورت نیاز می‌توانید در مورد هرکدام جستجو کنید.
در ابتدای مبحث گفتیم در WebView امکان کنترل و اعمال تنظیمات بر روی اجزای دریافتی از صفحه‌ی وب را داریم.
به عنوان مثال اجرای کدهای جاوا اسکریپت (جاوا اسکریپت را با جاوا اشتباه نگیرید) به صورت پیش فرض غیر فعال است که این امر باعث می‌شود منوی سایت من باز نشود. زیرا باز و بسته شدن زیرمنوها توسط کتابخانه‌ی جی‌کوئری (jQuery) که با جاوا اسکریپت نوشته شده مدیریت و اجرا می‌شود.

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mWebView = findViewById(R.id.web_view);

    String siteUrl = "https://android-studio.ir";
    mWebView.loadUrl(siteUrl);

    mWebView.getSettings().setJavaScriptEnabled(true);

}

با استفاده از متد getSettings() امکان اجرای تنظیمات وسیعی وجود دارد که برای هرکدام یک متد مشخص تهیه شده. همانطور که در کد بالا ملاحظه می‌کنید با استفاده از متد setJavaScriptEnabled و مقدار true برای آن، کدهای جاوا اسکریپت فعال (Enable) می‌شوند. مجدد پروژه را Run یا Apply Changes می‌کنم تا تغییرات روی شبیه ساز بروزرسانی شود:

متدهای دیگری نیز در اختیار توسعه دهنده قرار گرفته تا بتواند بر حسب نیاز خود، سایر قسمت‌ها را شخصی سازی کند:

برای مثال اولین مورد موجود در لیست (setDefaultFontSize) برای تعیین اندازه فونت بکار می‌رود.
یا با استفاده از متدهای زیر، دکمه‌های زوم به صفحه اضافه می‌شوند:

mWebView.getSettings().setSupportZoom(true);
mWebView.getSettings().setBuiltInZoomControls(true);
mWebView.getSettings().setDisplayZoomControls(true);

(دکمه‌های Zoom هنگام اسکرول صفحه ظاهر می‌شوند)
تعدادی دیگر از قابلیت‌ها را توسط متد setWebViewClient می‌توان مدیریت کرد. جهت مدیریت بهتر کدها ابتدا یک کلاس داخلی با نام دلخواه mWebViewClient درون اکتیویتی و بعد از بلاک مربوط به متد onCreate می‌سازم که از کلاس WebViewClient ارث بری می‌کند:

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = findViewById(R.id.web_view);

        String siteUrl = "https://android-studio.ir";
        mWebView.loadUrl(siteUrl);

        mWebView.getSettings().setJavaScriptEnabled(true);

        mWebView.getSettings().setSupportZoom(true);
        mWebView.getSettings().setBuiltInZoomControls(true);
        mWebView.getSettings().setDisplayZoomControls(true);

    }

    private class mWebViewClient extends WebViewClient {


    }

}

اولین متدی که به این کلاس اضافه می‌کنم مربوط به مدیریت کلیک روی لینک‌های موجود در صفحه‌ی وب است. روی لینک یکی از مطالب وب‌سایت کلیک می‌کنم:

مشاهده می‌کنید صفحه‌ی جدید در قالب یک مرورگر با نام WebView Browser Tester باز شده که چندان مطلوب نیست. متد shouldOverrideUrlLoading لینک‌ها را مستقیما درون خود وب‌ویو لود کرده و به مرورگر دیگری منتقل نمی‌شود.

از لیست متدی را انتخاب می‌کنم که پارامترهای ورودی آن از نوع WebView با نام view و String با نام url هستند. این متد با این دو پارامتر مدتیست از سوی اندروید منقضی یا Deprecated تلقی شده با اینحال همچنان استفاده می‌شود.

private class mWebViewClient extends WebViewClient {

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {

        view.loadUrl(url);
        return true;

    }
}

متد را به اینصورت اصلاح و تکمیل کردم. حالا با لمس یا کلیک روی هر لینک، آدرس موردنظر در قالب url توسط loadUrl لود و به view منتقل شده که باعث می‌شود صفحه‌ی جدید مستقیما درون WebView نمایش داده شود.
قبل از اجرا و تست این متد، دو متد پرکاربرد دیگر را معرفی می‌کنم. متدهای onPageStarted و onPageFinished به ترتیب، زمان بارگزاری صفحه و پایان این پروسه را برمی‌گردانند.

private class mWebViewClient extends WebViewClient {

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {

        view.loadUrl(url);
        return true;

    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
    }
    
}

برای مثال می‌توان در متد onPageStarted یک ProgressBar را اجرا کرده و در onPageFinished آنرا متوقف نمود. با اینحال برای درک بهتر و همچنین به حاشیه نرفتن مبحث آموزشی، از Toast استفاده می‌کنم:

private class mWebViewClient extends WebViewClient {

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {

        view.loadUrl(url);
        return true;

    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {

        Toast.makeText(MainActivity.this, "Loading page...", Toast.LENGTH_SHORT).show();

    }

    @Override
    public void onPageFinished(WebView view, String url) {

        Toast.makeText(MainActivity.this, "Loading finished", Toast.LENGTH_SHORT).show();
        
    }

}

در نهایت متد setWebViewClient را درون onCreate تعریف کرده و ورودی آنرا کلاس mWebViewClient قرار می‌دهم:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mWebView = findViewById(R.id.web_view);

    String siteUrl = "https://android-studio.ir";
    mWebView.loadUrl(siteUrl);

    mWebView.getSettings().setJavaScriptEnabled(true);

    mWebView.getSettings().setSupportZoom(true);
    mWebView.getSettings().setBuiltInZoomControls(true);
    mWebView.getSettings().setDisplayZoomControls(true);

    mWebView.setWebViewClient(new mWebViewClient());

}

پروژه را اجرا کرده و روی یک لینک کلیک می‌کنم:

مشاهده می‌کنید صفحه‌ی جدید درون خود WebView بارگزاری شد نه یک مرورگر. همچنین پیغام‌های بارگزاری (Loading page…) و اتمام بارگزاری (Loading finished) را می‌بینید که در قالب Toast چاپ شده‌اند.

سورس کامل MainActivity.java:

package ir.android_studio.webview;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Bitmap;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = findViewById(R.id.web_view);

        String siteUrl = "https://android-studio.ir";
        mWebView.loadUrl(siteUrl);

        mWebView.getSettings().setJavaScriptEnabled(true);

        mWebView.getSettings().setSupportZoom(true);
        mWebView.getSettings().setBuiltInZoomControls(true);
        mWebView.getSettings().setDisplayZoomControls(true);

        mWebView.setWebViewClient(new mWebViewClient());

    }

    private class mWebViewClient extends WebViewClient {

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            view.loadUrl(url);
            return true;

        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {

            Toast.makeText(MainActivity.this, "Loading page...", Toast.LENGTH_SHORT).show();

        }

        @Override
        public void onPageFinished(WebView view, String url) {

            Toast.makeText(MainActivity.this, "Loading finished", Toast.LENGTH_SHORT).show();

        }

    }

}

نمایش صفحات HTML محلی و آفلاین در WebView

در قسمت قبل محتوای مدنظر ما از یک url و بصورت آنلاین دریافت می‌شد که مستلزم برقراری ارتباط اینترنتی بود. اما ممکن است در مواردی نیاز به نمایش محتوایی با فرمت وب و HTML بصورت آفلاین داشته باشیم. به عنوان مثال طراحی یک یا چند صفحه‌ی خاص از اپلیکیشن برای توسعه دهنده‌ای که با اصول طراحی صفحات وب نیز آشناست، ممکن است پیاده سازی آن در فرمت HTML و CSS ساده‌تر از کار با Layout های اندروید باشد. یا ممکن است شخص بخواهد یک اپلیکیشن کتابچه را به‌طور کامل توسط صفحات وب پیاده‌سازی کند. محتوای این صفحات، ایستا (استاتیک) است و نیازی به اتصال به سرور نیست.
در این روش فایل‌های مرتبط با صفحات وب را در فولدر assets پروژه قرار می‌دهیم. این فولدر به صورت پیش‌فرض وجود ندارد. برای ساخت آن در قسمت نمایش ساختار پروژه روی app راست کلیک کرده و مسیر
New > Folder > Assets Folder
را دنبال کرده و در پنجره‌ی باز شده Finish بزنید تا فولدر ساخته شود:

همچنین می‌توان این کار را در خارج از محیط اندروید استودیو و در محل قرارگیری پروژه، این فولدر را اضافه کرد:

من یک صفحه‌ی ساده‌ی وب ساختم که شامل یک فایل html و یک css است:

این دو فایل را کپی کرده و در محیط اندروید استودیو یا File explorer سیستم عامل درون فولدر paste می‌کنم:

در مرحله آخر برای اجرای این فایلِ محلی بجای url وب‌سایت، آدرس زیر را در siteUrl جایگزین آدرس وب‌سایت می‌کنم:

String siteUrl = "file:///android_asset/index.html";

به اینصورت فایل index.html موجود در فولدر assets پروژه اندرویدی در WebView اجرا می‌شود:

در این پروژه صرفا جهت آشنایی با نحوه‌ی اضافه کردن صفحات وب به اپلیکیشن یک صفحه‌ی HTML بسیار ساده را استفاده کردم اما پیچیده‌ترین صفحات وب (شامل متن، تصویر، کدهای جاوا اسکریپت و..) را به تعداد زیاد و نامحدود می‌توان در اپلیکیشن‌های اندرویدی بکار برد.

مطالعه‌ی بیشتر:

https://developer.android.com/reference/android/webkit/WebView
https://developer.android.com/reference/android/webkit/WebSettings
https://developer.android.com/guide/webapps/webview

توجه: سورس پروژه درون پوشه Exercises قرار دارد

دانلود فایل این آموزش با فرمت PDF به همراه سورس پروژه
تعداد صفحات : ۲۰
حجم : ۲ مگابایت
قیمت : رایگان
دانلود رایگان با حجم ۲ مگابایت لینک کمکی

نوشته نمایش صفحات وب در اکتیویتی توسط WebView اولین بار در اندروید استودیو پدیدار شد.

کار با GridLayout در اندروید

سیدمهدی مطهری — Mon, 25 Feb 2019 23:25:50 +0000

در جلسات گذشته با ViewGroup هایی مانند RelativeLayout، LinearLayout و TableLayout آشنا شدیم و توانستیم رابط‌های کاربری متفاوتی را توسط این Layout ها ایجاد کنیم. در این مبحث قصد دارم یک ViewGroup دیگر با نام GridLayout را معرفی کنم.

GridLayout چیست؟

به نام خدا. در اندروید ۴٫۰ (API 14) یک ViewGroup جدید با نام GridLayout معرفی شد. Grid به معنای طراحی شبکه‌ای و سلولی است. مانند یک جدول که از تعدادی سطر و ستون تشکیل شده.

البته اصطلاح GridLayout منحصر به سیستم عامل اندروید نیست و اگر این واژه را در گوگل جستجو کنید به مثال‌هایی در سایز زمینه‌ها مانند CSS در طراحی صفحات وب برخورد خواهید کرد.
اگر مبحث TableLayout را فراموش کرده‌اید مجدد یک مرور کلی روی آن داشته باشید تا تفاوت بین این دو را بهتر درک کنید. در TableLayout صرفا امکان مدیریت View ها (به عبارتی، سلول‌ها)ی موجود در یک سطر را داشتیم و می‌توانستیم چند سطر یا ردیف زیر یکدیگر ایجاد کنیم. اما در GridLayout مدیریت ستون‌ها نیز امکان‌پذیر است. به عنوان مثال می‌توان ستون‌های دو سطر را با یکدیگر ادغام کرد. یک View مانند Button می‌تواند یک یا چند سلول را در جهت افقی یا عمودی اشغال کند. همچنین می‌توان یک سلول را از یک سطر به سطر دیگر (و از یک ستون به ستون دیگر) منتقل کرد.
علی‌رقم کاربردهای فراوان این ViewGroup، در منابع آموزشی کمتر به آن پرداخته شده که در این مبحث سعی می‌کنم تا حد امکان توضیحات کامل ارائه دهم.

مزایای GridLayout

GridLayout عمدتا در طراحی لایه‌های پیچیده کاربرد دارد. لایه‌هایی که پیاده سازی آنها توسط سایر ViewGroup ها سخت و در مواردی غیر ممکن است. Layout ای که با GridLayout به راحتی ساخته می‌شود در سایر ViewGroup ما را با یک Layout تو در تو و عمیق مواجه می‌کند که این عمیق بودن خود باعث کاهش کارایی (Performance) برنامه می‌شود. همانطور که قبلا اشاره شد، در اینجا مدیریت ستون‌ها نیز به سادگی امکان‌پذیر است و به طور کلی انعطاف بیشتری در پیاده‌سازی لایه‌های پیچیده داریم.
اگر بخواهم ویژگی‌های این Layout را به صورت خلاصه بیان کنم، در سه گزینه خلاصه می‌شود:

امکان کنترل و مدیریت سلول‌ها در هردو جهت سطر (Row) و ستون (Column)
اجرای لایه‌های پیچیده بدون استفاده از Layout های تو در تو و در نتیجه بهینه بودن لایه
ساخت ساده‌ی لایه‌هایی که از نظم و ترتیب مشخصی پیروی نمی‌کنند

ساخت پروژه‌ی GridLayout

یک پروژه با نام GridLayout در اندروید استودیو با یک Empty Activity ایجاد می‌کنم و با ارائه‌ی چند مثال، به تشریح این ViewGroup می‌پردازم.

در پالت اندروید استودیو گزینه‌ی GridLayout قرار دارد که با کشیدن و رها کردن روی صفحه‌ی پیش نمایش، به لایه‌ی اکتیویتی اضافه می‌شود. اما من این کار را انجام نمی‌دهم زیرا این گزینه مربوط به کتابخانه Support است که با افزودن آن به پروژه، خط زیر به build.gradle اضافه می‌شود:

implementation 'com.android.support:gridlayout-v7:xx.x.x'

در رابط کاربری اکتیویتی نیز تگ XML زیر ایجاد می‌شود:

همانطور که در ابتدای مبحث اشاره شد، GridLayout در API 14 معرفی شد. استفاده از این کتابخانه در صورتی لازم است که اپلیکیشن ما روی دیوایس‌های API 14 به قبل نیز استفاده شود در صورتی که در زمان تهیه این آموزش، حدود ۱۰۰% دیوایس‌های اندرویدی بالای این نسخه هستند.
Layout موجود در activity_main.xml را حذف کرده و یک GridLayout جایگزین آن می‌کنم:

کد فوق، ساده ترین حالت است. در اینجا ۶ عدد TextView داریم که هرکدام نقش یک سلول را برای GridLayout ایفا می‌کند.
پروژه را روی شبیه ساز اجرا می‌کنم:

سلول‌ها به صورت افقی پشت یکدیگر قرار گرفته‌اند. در این ViewGroup نحوه چینش سلول‌ها را می‌توان در دو حالت horizontal (افقی) و vertical (عمودی) تعیین کرد. در قسمت قبل من خاصیت orientation را تعریف نکردم که به صورت پیش فرض مقدار horizontal برای آن درنظر گرفته شده.
مقدار vertical را اضافه می‌کنم:

مشاهده می‌کنید سلول‌ها به صورت عمودی زیر یکدیگر قرار گرفتند.
در GridLayout دو خاصیت rowCount و columnCount به ترتیب برای تعیین حداکثر تعداد سطر و ستون استفاده می‌شود.
من مجدد حالت چینش را horizontal و برای columnCount مقدار ۳ تعیین می‌کنم تا سلول‌ها در سه ستون قرار گیرند:

قبل از ادامه کار ابتدا یک استایل به TextView ها اضافه می‌کنم تا نتیجه تغییرات واضح‌تر باشد.
استایل زیر را در styles.xml ساختم:

حالا استایل را به ویجت‌ها اضافه می‌کنم:

در حال حاضر چینش سلول‌ها به صورت افقی است. یعنی ۳ سلول اول در سطر اول و ۳ سلول دوم در سطر دوم. حالا می‌خواهم ترتیب قرارگیری به صورت ستونی باشد. Orientation را تغییر داده و rowCount را با مقدار ۲ اضافه می‌کنم تا تعداد سطرها تغییر نکند:

برای ادامه‌ی آموزش orientation را به حالت افقی برمی‌گردانم.
کلمه longer را به text پنجم اضافه می‌کنم تا طولانی‌تر شود:

در ابتدای مبحث گفتیم یکی از مزایای GridLayout امکان مدیریت ستون‌هاست. در تصویر بالا ملاحظه می‌کنید طول Cell2 از سلول ۵ کوتاهتر است و مقداری فضای خالی ایجاد شده که لازم است این فضای خالی پر شود. برای اینکار خاصیت layout_gravity با مقدار fill_horizontal را به سلول‌های این ستون اضافه می‌کنم:

یک ردیف دیگر اضافه می‌کنم تا نتیجه را بهتر درک کنید:

تمام سلول‌های موجود در ستون دوم به اندازه‌ی بزرگترین سلول کشیده شده‌اند.
یکی دیگر از قابلیت‌های لایه‌ی گرید، امکان جابجایی و تغییر موقعیت سلول‌هاست. به عنوان مثال می‌توان مکان Cell 2 و Cell 5 را تغییر داد بطوری که هرکدام در جای دیگری قرار گیرد. این کار توسط دو خاصیت layout_row و layout_column انجام می‌شود. به کد و خروجی زیر دقت کنید:

نکته: شمارش سطر و ستون از عدد ۰ آغاز می‌شود. یعنی موقعیت سلول در سطر اول/ستون اول برابر است با (۰٫۰)

ابتدا برای Cell 2 خاصیت layout_row با مقدار ۱ تعریف کردم تا این سلول در سطر دوم قرار گیرد. با انجام این تغییر، Cell 3 نیز به سطر دوم منتقل می‌شود که با تعریف layout_row برای این سلول و قرار دادن مقدار ۰، مجدد به سطر اول باز می‌گردد. در ادامه موقعیت Cell 5 را تعیین می‌کنم. مقدار ۰ برای layout_row و مقدار ۱ برای layout_column این سلول را در سطر اول/ستون دوم قرار می‌دهد. مانند مرحله قبل که با جابجایی Cell 2 سلول بعد از آن یعنی Cell 3 نیز جابجا شد، در اینجا هم Cell 6 به همراه Cell 5 جابجا می‌شود که با layout_row و مقدار ۱ مجدد آنرا به سطر دوم باز می‌گردانم. اینجاست که انعطاف پذیری بالای این ViewGroup ثابت می‌شود.

یک Activity دیگر از نوع Empty Activity با نام Calculator به پروژه اضافه می‌کنم. هنگام ساخت اکتیویتی، Launcher Activity را انتخاب می‌کنم تا به عنوان اکتیویتی اصلی در شبیه ساز اجرا شود. همانطور که از نام اکتیویتی پیداست، در این مرحله با یک ماشین حساب سروکار داریم.

قصد دارم دکمه‌های این ماشین حساب را با GridLayout پیاده سازی کنم. ۱۴ دکمه‌ که در یک Grid با ۴ سطر و ۴ ستون قرار گرفته‌اند.

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

برای دکمه اول خاصیت layout_columnSpan با مقدار ۲ تعیین کردم. یعنی این ویجت باید به اندازه‌ی دو ستون فضا در اختیار داشته باشد. سپس توسط layout_gravity و مقدار fill، دکمه تمام فضای خالی موجود را اشغال می‌کند. به همین ترتیب برای دکمه‌ی یازدهم layout_rowSpan و layout_gravity تعریف می‌کنم که در نهایت این دکمه به اندازه دو سطر طول دارد.

نکته: در این مثال من بجای fill_horizontal و fill_vertical تنها از fill استفاده کردم که در هردو مشترک است و تفاوتی نمی‌کند از کدام مقدار استفاده کنیم.

تمرین: سعی کنید مثال فوق را توسط LinearLayout یا RelativeLayout و یا TableLayout پیاده سازی کرده، سپس حجم کد XML و زمانی که برای هردو صرف شده را مقایسه کنید.

در مثال آخر یک فرم ورود (Login Form) را توسط GridLayout طراحی می‌کنم.
یک اکتیویتی دیگر با نام Form به پروژه اضافه می‌کنم.
ابتدا کد و خروجی شبیه ساز را درج کرده سپس به توضیح جزئیات می‌پردازم:
activity_form.xml:

در GridLayout برای ایجاد فاصله بین سلول‌ها بجای خاصیت‌ margin از تگ Space استفاده می‌کنیم. در واقع Space خود به عنوان یک سلول به Grid اضافه می‌شود.
چند خاصیت دیگر برای این ViewGroup تعریف شده که useDefaultMargins یکی از آنهاست. این خاصیت یک فاصله‌ی پیش فرض بین سلول‌ها ایجاد می‌کند. البته در صورتی که قبلا فاصله‌ای تعریف نکرده باشیم.
خط زیر را به تگ GridLayout اضافه می‌کنم:

android:useDefaultMargins="true"

اسکرین شات فوق را با تصویر قبل مقایسه کنید. اندکی فضای خالی مابین سلول‌ها ایجاد شده.
سایر ویژگی‌ها را صرفا معرفی می‌کنم:

خاصیت	توضیح
android:columnOrderPreserved	اگر مقدار “true” تعیین شود عرض ستون بر اساس محتوای درون آن تنظیم می‌گردد ولی چنانچه “false” تعیین شود به نحوی تنظیم می‌شود تا سایر ستون‌ها نیز در وضعیت مناسبی قرار گیرند.
android:rowOrderPreserved	اگر مقدار “true” تعیین شود ارتفاع سطر بر اساس محتوای درون آن تنظیم می‌گردد ولی چنانچه “false” تعیین شود به نحوی تنظیم می‌شود تا سایر سطرها نیز در وضعیت مناسبی قرار گیرند.

مطالعه‌ی بیشتر:

https://developer.android.com/reference/android/widget/GridLayout
https://developer.android.com/reference/android/widget/GridLayout.LayoutParams.html

توجه : سورس پروژه درون پوشه Exercises قرار دارد

دانلود فایل این آموزش با فرمت PDF به همراه سورس پروژه
تعداد صفحات : ۲۰
حجم : ۱٫۱ مگابایت
قیمت : رایگان
دانلود رایگان با حجم ۱٫۱ مگابایت لینک کمکی

نوشته کار با GridLayout در اندروید اولین بار در اندروید استودیو پدیدار شد.

تغییر فونت در کل برنامه اندروید یا قسمتی از آن

سیدمهدی مطهری — Sun, 01 Jul 2018 15:15:01 +0000

به‌نام خدا. یکی از نیازهای ضروری یک اپلیکیشن، بخصوص اپلیکیشن‌های فارسی زبان، امکان استفاده از فونت‌های دلخواه در برنامه است. پیاده سازی فونت در اندروید به روش‌های مختلفی قابل انجام است که در این مبحث سه روش را بررسی می‌کنیم.

ابتدا یک پروژه جدید با نام CustomFont و یک Empty Activity ایجاد می‌کنم.

تغییر فونت Widget ها در XML:

همزمان با معرفی API 26 قابلیت جدیدی در اندروید استودیو نسخه ۳ اضافه شد که امکان تعیین فونت برای widget ها بدون نیاز به استفاده از متدهای جاوا و تنها با افزودن خاصیت fontFamily به هر ویجت را فراهم می‌کند. این قابلیت از API 16 به بالا پشتیبانی می‌کند که لازم است کتابخانه appcompat-v7 حتما در پروژه وجود داشته باشد.
ابتدا می‌بایست یک دایرکتوری با نام font به res اضافه کنیم:

Res > New > Android Resource Directory

حالا فایل فونت یا فونت‌های مدنظر (با پسوند .ttf یا .otf) را درون این دایرکتوری قرار می‌دهم:

تذکر: در نامگذاری فایل فونت فقط از حروف کوچک، اعداد و زیرخط (underline) استفاده کنید.

در نهایت توسط خاصیت fontFamily فونت را به یک TextView اضافه می‌کنم. خروجی را قبل و بعد از تعریف این خاصیت مشاهده می‌کنید:

activity_main.xml:

امکانی جهت پیش نمایش فونت در محیط اندروید استودیو فراهم گردیده که با دابل کلیک روی فونت، ادیتور باز شده و می‌توانید متن دلخواه را تایپ کنید:

ست کردن فونت توسط Typeface:

در این قسمت می‌خواهم در اکتیویتی و توسط کلاس Typeface فونت مدنظرم را به id ویجت مربوطه ارسال کنم. یک TextView با شناسه txt_two به صفحه اضافه می‌کنم:

در ادامه اکتیویتی را به اینصورت تکمیل می‌کنم:

MainActivity.java:

package ir.android_studio.customfont;

import android.graphics.Typeface;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    TextView txtTwo;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        txtTwo = findViewById(R.id.txt_two);
        Typeface tf = getResources().getFont(R.font.afaaq);
        txtTwo.setTypeface(tf);

    }
}

در خط اول TextView در اکتیویتی تعریف شده. در خط دوم یک نمونه از Typeface ساخته شده که توسط متد getFont() فونت afaaq از دایرکتوری font (یعنی R.font) فراخوانی شده است. (پوشه font در دایرکتوری res قرار گرفته بنابراین قبل از getFont() متد getResources() نوشته شده. در نهایت توسط متد setTypeface() فونتی که در tf تعریف شده را روی txtTwo اعمال می‌کنم:

در قسمت متد getFont یک ارور داریم:

این متد در API 26 و به بالا قابل استفاده است. یعنی اگر پروژه را روی یک دیوایس پایینتر از API 26 اجرا کنم، تغییر فونت اعمال نمی‌شود و با توجه به اینکه MinSDK پروژه را روی ۱۷ قرار داده‌ام، این مسئله برای تعداد زیادی از کاربران ایجاد مشکل کرده و بجای فونت مدنظر من، فونت پیش فرض دیوایس خود را مشاهده خواهند کرد. استفاده از این متد در زمانی مناسب است که MinSDK پروژه حداقل ۲۶ باشد.
پس ناچارا لازم است Typeface را به صورت دیگری پیاده سازی کنیم. از متدی با نام createFromAsset استفاده می‌کنم که البته فایل فونت را از فولدر assets می‌گیرد. من این فولدر را در پروژه ندارم بنابراین ابتدا آنرا ایجاد می‌کنم:

app > New > Folder > Assets Folder

در پنجره ی باز شده با انتخاب گزینه Finish فولدر اضافه می‌شود:

حالا باید فونت را مجدد به این فولدر هم اضافه کنم. اینکه فایل فونت مستقیما درون assets قرار گیرد یا داخل یک فولدر ویژه فونت، تفاوتی نمی‌کند اما من برای مرتب بودن پروژه، یک فولدر با نام fonts به assets اضافه کرده و همان فونت قبل یعنی afaaq.ttf را درون آن قرار می‌دهم:

assets > New > Directory

(فونت را از فولدر font قبلی copy و اینجا paste کردم)

package ir.android_studio.customfont;

import android.graphics.Typeface;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    TextView txtTwo, txtThree;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // getFont Method
        txtTwo = findViewById(R.id.txt_two);
        Typeface tf = getResources().getFont(R.font.afaaq);
        txtTwo.setTypeface(tf);

        // createFromAsset Method
        txtThree = findViewById(R.id.txt_three);
        Typeface atf = Typeface.createFromAsset(getAssets(), "fonts/afaaq.ttf");
        txtThree.setTypeface(atf);

    }
}

ملاحظه می‌کنید TextView سوم با شناسه txt_three تعریف و توسط متد createFromAsset() فونت موجود در مسیر fonts/afaaq.ttf دایرکتوری assets روی آن اعمال شد:

تغییر فونت در کل برنامه توسط کتابخانه Calligraphy:

در روش‌هایی که تاکنون بررسی شد، برای هر ویجت باید فونت را جداگانه تعریف می‌کردیم. برای اپلیکیشنی که تعداد کمی ویجت دارد یا قصد اعمال فونت فقط در تعداد محدودی از ویجت‌ها را داریم، این روش‌ها ساده و مناسب خواهد بود. اما در مواردی که در حال توسعه یک اپلیکیشن با اکتیویتی‌ها و ویجت‌های متعدد هستیم و لازم است فونت روی همه آنها اعمال شود، استفاده از روش‌های فوق منطقی نیست و علاوه بر صرف زمان زیاد، احتمال خطا را نیز افزایش می‌دهد. در اینصورت لازم است راهی را انتخاب کنیم که بتوان یک فونت را در سراسر پروژه تعریف کرد بدون آنکه نیاز به اعمال تغییرات روی تک تک ویجت‌ها (مانند TextView، Toolbar، Menu و…) باشیم.
در حال حاضر متداول‌ترین راه برای این کار، استفاده از کتابخانه‌ی Calligraphy است که توسط شخصی با نام Christopher Jenkins تهیه و در گیت هاب و به صورت رایگان در دسترس توسعه دهندگان قرار گرفته است:

https://github.com/chrisjenx/Calligraphy

تذکر: در حدود دو ماه قبل از نگارش این آموزش، توسعه دهنده این کتابخانه نسخه جدید کتابخانه را در صفحه جدیدی در گیت هاب با عنوان Calligraphy 3 معرفی و اعلام کرده نسخه فعلی بروزرسانی نخواهد شد. با اینحال من از همین نسخه رایج فعلی یعنی ۲٫۳٫۰ استفاده می‌کنم. نسخه جدید تفاوت محسوسی در پیاده سازی و استفاده نداشته و با مطالعه این مبحث، از نسخه ۳ نیز می‌توانید استفاده کنید.

مطابق توضیحات موجود در صفحه گیت هاب، کتابخانه را به بلاک dependencies در build.gradle(app) اضافه و پروژه را سینک می‌کنم تا کتابخانه دانلود شود:

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    compile 'uk.co.chrisjenx:calligraphy:2.3.0'
}

در قدم بعد لازم است یک کلاس به پکیج اصلی پروژه اضافه کرده و سپس آنرا از کلاس Application ارث بری کنیم. یک کلاس با نام دلخواه Calligraphy ایجاد کردم:

package ir.android_studio.customfont;

import android.app.Application;

public class Calligraphy extends Application {

}

سپس یک متد onCreate() به صورت زیر به کلاس اضافه می‌کنم:

package ir.android_studio.customfont;

import android.app.Application;

import uk.co.chrisjenx.calligraphy.CalligraphyConfig;

public class Calligraphy extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        CalligraphyConfig.initDefault(new CalligraphyConfig.Builder()
                .setDefaultFontPath("fonts/yekan.ttf")
                .setFontAttrId(R.attr.fontPath)
                .build()
        );

    }

}

کد متد را می‌توانید از سورس پروژه یا صفحه گیت هاب کتابخانه کپی کرده و فقط مسیر فونت مدنظر خود را در ورودی setDefaultFontPath() اصلاح کنید. به جهت تشخیص بهتر، از یک فونت متفاوت با دو فونت قبل استفاده می‌کنم. این کتابخانه نیز فونت را از assets می‌خواند بنابراین فونت yekan.ttf را مانند مرحله قبل به assets/fonts اضافه کردم:

لازم است این کلاس را در مانیفست پروژه (AndroidManifest.xml) توسط خاصیت android:name معرفی کنیم:

حالا کافیست متد زیر را در اکتیویتی یا اکتیویتی‌هایی که قصد داریم از این فونت تاثیر بپذیرند اضافه کنیم:

@Override
protected void attachBaseContext(Context newBase) {
    super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
}

MainActivity.java:

package ir.android_studio.customfont;

import android.content.Context;
import android.graphics.Typeface;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.widget.TextView;

import uk.co.chrisjenx.calligraphy.CalligraphyContextWrapper;

public class MainActivity extends AppCompatActivity {

    TextView txtTwo, txtThree;
    Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        //Toolbar
        mToolbar = findViewById(R.id.m_toolbar);
        setSupportActionBar(mToolbar);

        //getFont Method
        txtTwo = findViewById(R.id.txt_two);
        Typeface tf = getResources().getFont(R.font.afaaq);
        txtTwo.setTypeface(tf);

        //createFromAsset Method
        txtThree = findViewById(R.id.txt_three);
        Typeface atf = Typeface.createFromAsset(getAssets(), "fonts/afaaq.ttf");
        txtThree.setTypeface(atf);

    }

    @Override
    protected void attachBaseContext(Context newBase) {
        super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
    }

}

من یک Toolbar جایگزین اکشن‌بار پیش فرض کردم تا نتیجه را بهتر درک کنید.

activity_main.xml:

یک TextView دیگر با شناسه txt_four و یک Button در صفحه قرار دادم که نه از طریق xml و نه java فونتی روی آن اعمال نشده.
پروژه را اجرا می‌کنم:

ملاحظه می‌کنید title تولبار، TextView چهارم و Button، فونت yekan که در کالیگرافی تعریف شده را نشان می‌دهند. حتی TextView اول که فونت mitra در xml اعمال شده بود نیز فونت yekan را نمایش می‌دهد. یعنی فونت Calligraphy روی همه آیتم‌های درون اکتیویتی اعمال می‌شود مگر اینکه توسط Typeface فونتی متفاوت از آن تعریف شده باشد (مانند TextView شماره دو و سه).
با استفاده از Calligraphy هم می‌توان مستقیم و بدون نیاز به کدهای جاوا، روی ویجت‌ها و از طریق xml فونت اعمال کرد. اینکار عینا مانند روش xml ابتدای مبحث انجام می‌شود با این تفاوت که به‌جای خاصیت fontFamily از fontPath استفاده می‌کنیم و فایل فونت نیز باید در assets قرار گرفته باشد. یک فونت دیگر با نام beirut.ttf به فولدر fonts در assets اضافه می‌کنم:

سپس یک دکمه دیگر به صفحه اضافه کرده و فونت را توسط fontPath تعریف می‌کنم:

دکمه دوم فونت beirut را نشان می‌دهد.
شاید این سوال برایتان پیش آمده که تفاوت این روش و روش اول مبحث که هردو توسط یک خاصیت در xml انجام می‌شوند چیست و ما باید کدام گزینه را انتخاب کنیم؟
یک اصل کلی در توسعه برنامه‌ها (چه در بستر موبایل، وب و یا دسکتاپ) این است که تا حد امکان استفاده از کتابخانه‌ها و پلاگین‌ها به حداقل برسد ترجیحا از امکانات داخلی ای که در اختیار داریم بهره ببریم تا هم حجم برنامه و هم ایرادات، باگ‌ها و تداخلات احتمالی کتابخانه‌ها با سایر اجزای پروژه به حداقل برسد. یعنی در اینجا اگر نیازی به تغییر فونت سراسر پروژه نداشته و تنها چند ویجت محدود باید تغییر کند، بهتر است از کتابخانه Calligraphy صرف نظر نموده و از راهکارهای داخلی اندروید مانند xml و Typeface استفاده کنیم. اما در صورتی که نیاز به تغییر فونت کل پروژه بود، ناگزیر به استفاده از این کتابخانه هستیم و همانطور که در صفحات قبل مشاهده کردید، با اعمال فونت توسط کتابخانه، ویجتی که توسط fontFamily تعریف شده بود در عمل این خاصیت را از دست داده و فونت جدید در واقع روی آن Override می‌شود. بنابراین در این شرایط، برای تغییر یک یا چند ویجت محدود، می‌بایست از خاصیت xml مربوط به خود کتابخانه یعنی fontPath و یا Typeface بهره گرفت.
طبیعتا خاصیت مربوط به فونت را می‌توان در یک style نیز تعریف کرد تا لازم نباشد برای تک تک ویجت‌های مدنظر جداگانه تعریف گردد:

با تعریف استایل فوق، هر ویجت و کامپوننتی که استایل CustomFontStyle را بپذیرد فونت نیز اعمال خواهد شد:

نکته: خاصیت fontPath بدون پیشوند android: یا app: بوده و به همین دلیل اندروید استودیو اخطاری با همین مضمون اعلام می‌کند که جای نگرانی نیست و خللی در کار ایجاد نمی‌کند. با اینحال اگر تمایل دارید این اخطار از محیط IDE شما حذف شود، راهکار آن در صفحه گیت‌هاب کتابخانه ذکر شده است.

تذکر: در انتخاب فونت دقت کنید. هر فونتی مناسب استفاده در اپلیکیشن نیست. برای مثال فونت‌های آفاق و بیروت که من در این مبحث استفاده کردم، بجز در موارد خاص (استفاده‌های فانتزی)، نتیجه مطلوبی نخواهد داشت. در حال حاضر فونت ایران سنس بیشترین استفاده را در بین اپ های فارسی زبان دارد که به دلیل رعایت حق مولف در این پروژه استفاده نکردم. در صورت تمایل به استفاده از این فونت لازم است لایسنس آن را از fontiran.com خریداری کنید.

توجه : سورس پروژه درون پوشه Exercises قرار داده شده است

منابع تکمیلی:

https://github.com/chrisjenx/Calligraphy
https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml
https://developer.android.com/reference/android/graphics/Typeface

دانلود فایل این آموزش با فرمت PDF به همراه سورس پروژه
تعداد صفحات : ۲۰
حجم : ۱/۴ مگابایت
قیمت : رایگان
دانلود رایگان با حجم ۱/۴ مگابایت لینک کمکی

نوشته تغییر فونت در کل برنامه اندروید یا قسمتی از آن اولین بار در اندروید استودیو پدیدار شد.

کار با TextInputLayout و Floating Label متریال دیزاین

سیدمهدی مطهری — Fri, 22 Jun 2018 17:39:54 +0000

معرفی TextInputLayout:

به‌نام خدا. در این مبحث به قابلیتی با عنوان Floating Label می‌پردازیم که بر روی EditText اجرا می‌شود. در گذشته با Hint آشنا شدیم. با استفاده از این ویژگی می‌توانستیم یک توضیح کوتاه به یک EditText اضافه کنیم که با پر شدن فیلد توسط کاربر، Hint نیز مخفی می‌شد. اما برای زیبایی بیشتر فیلدهایی که دارای Hint می‌باشند می‌توانیم قابلیتی پیاده سازی کنیم که با لمس EditText توسط کاربر و وارد کردن مقدار، Hint حذف نشده و با یک حالت انیمیشن به بالای فیلد منتقل شود. برای پیاده سازی این قابلیت به کتابخانه Support Design و تگ TextInputLayout نیاز داریم. ضمنا از این کامپوننت برای نمایش Error ها نیز استفاده می‌شود.

یک پروژه جدید با نام TextInputLayout و یک Empty Activity ایجاد می‌کنم.
در ابتدا لازم است کتابخانه design را به پروژه اضافه کنم:

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

قصد دارم دو EditText برای دریافت نام کاربری و رمز عبور کاربر به اکتیویتی اضافه کنم:

activity_main.xml:

هر EditText درون یک تگ TextInputLayout قرار می‌گیرد.
پروژه را اجرا می‌کنم:

با اجرای پروژه، اولین EditText یعنی Username در حالت Focus قرار می‌گیرد که آماده وارد کردن کاراکتر است. هر آیتمی که در حالت Focus باشد رنگ Hint و خط زیر آن قرمز و مابقی آیتم‌ها خاکستری است.
ممکن است بخواهیم آیتمی غیر از آیتم اول در حالت Focus باشد. یا بهرحال تعیین کنیم یک آیتم خاص به عنوان آیتم Focus شده نمایش داده شود. به کد زیر دقت کنید:

من یک تگ requestFocus به TextInputLayout مربوط به آیتم Password اضافه کردم که در اجرای مجدد پروژه هم این فیلد Focus شده:

در حال حاضر همیشه یک EditText باید در حالت Focus باشد. اما بهتر است حالتی را پیاده سازی کنیم که اگر کاربر نقطه ای از صفحه (بجز محل این دو آیتم) را لمس کند، آیتمی که Focus هست از این حالت خارج شده و در نهایت تمامی آیتم ها در حالت عادی نمایش داده شوند.

Layout ریشه اکتیویتی یک LinearLayout است. به این لایه دو خاصیت focusable و focusableInTouchMode با مقدار true و یک id اضافه کردم. سپس در Backend اکتیویتی این لایه را تعریف نموده و برای آن یک متد Listener می‌سازم که ورودی آن null است:

MainActivity.java:

package ir.android_studio.textinputlayout;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    LinearLayout mLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mLayout = findViewById(R.id.main_layout);
        mLayout.setOnClickListener(null);

    }
}

مقدار null برای این setOnClickListener باعث می‌شود تا هنگام کلیک (لمس) صفحه که من از نوع LinearLayout ساخته ام، همه EditText ها در حالت غیر Focus قرار گیرند:

ضمنا با اضافه شدن دو خاصیت فوق به لایه اصلی، هیچکدام از آیتم ها در ابتدای اجرای پروژه به صورت پیش فرض Focus نیستند.
قبل از ادامه آموزش، تگ requestFocus را هم غیر فعال (کامنت) می‌کنم زیرا نمی‌خواهم هیچ آیتمی فوکوس باشد.

مدیریت Error ها در TextInputLayout:

مطمئنا همه ما هنگام تکمیل فرم ها به ارورهایی برخورد کرده ایم. این فرم می‌تواند یک فرم ثبت نام در یک وب سایت یا یک اپلیکیشن باشد. به عنوان مثال در فیلد مربوط به کد پستی، اخطار “کد وارد شده باید ده رقم باشد” به کاربر اعلام می‌شود.
تصمیم دارم برای فیلد Username یک error تعریف کنم.

package ir.android_studio.textinputlayout;

import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    LinearLayout mLayout;
    TextInputLayout userLayout, passLayout;
    EditText userEdittext, passEdittext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mLayout = findViewById(R.id.main_layout);
        mLayout.setOnClickListener(null);

        userLayout = findViewById(R.id.user_layout);
        passLayout = findViewById(R.id.pass_layout);

        userEdittext = findViewById(R.id.user_edittext);
        passEdittext = findViewById(R.id.pass_edittext);

        userEdittext.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {

                if (userEdittext.getText().toString().isEmpty()) {
                    userLayout.setError("Enter Username!");
                } else {
                    userLayout.setErrorEnabled(false);
                }

            }
        });

    }

}

در کد بالا از متد setOnFocusChangeListener استفاده شده:

userEdittext.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View view, boolean b) {

    }
});

این متد هنگامی اجرا می‌شود که کاربر روی یک EditText ضربه بزند و آن فیلد در حالت فوکوس قرار بگیرد. متد را به اینصورت تکمیل می‌کنم:

userEdittext.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View view, boolean b) {

        if (userEdittext.getText().toString().isEmpty()) {
            userLayout.setError("Enter Username!");
        } else {
            userLayout.setErrorEnabled(false);
        }

    }
});

یک شرط تعیین کردم که اگر EditText خالی بود، توسط متد setError یک ارور را روی userLayout نمایش بدهد و زمانی که این شرط نقض شد (یعنی فیلد خالی نباشد) ارور غیر فعال شود.
پروژه را اجرا می‌کنم:

ملاحظه می‌کنید با لمس EditText مربوط به Username بلافاصله اخطار با رنگ قرمز زیر آن نمایش داده می‌شود. در حال حاضر برنامه یک ایراد دارد. با وجود اینکه من کلمه test را تایپ کرده‌ام هنوز اخطار Enter Username حذف نشده و زمانی حذف خواهد شد که کاربر EditText بعدی یا جای دیگری از صفحه را لمس کند تا این آیتم از Focus خارج شود. در صورتی که به محض ورود اولین کاراکتر این ارور باید حذف شود.
با استفاده از متد addTextChangedListener و TextWatcher می‌توانیم تغییرات متن یک EditText را شنود کنیم.

userEdittext.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void afterTextChanged(Editable editable) {

    }
});

TextWatcher سه متد دارد که نقش هرکدام از نامش پیداست. beforeTextChanged قبل از تغییر متن، onTextChanged هنگام تغییر متن و afterTextChanged بعد از تغییر متن صدا زده می‌شوند.
در اینجا من به متد دوم نیاز دارم. همان if ای که قبلا نوشتم را درون این متد تکرار می‌کنم:

package ir.android_studio.textinputlayout;

import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.EditText;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    LinearLayout mLayout;
    TextInputLayout userLayout, passLayout;
    EditText userEdittext, passEdittext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mLayout = findViewById(R.id.main_layout);
        mLayout.setOnClickListener(null);

        userLayout = findViewById(R.id.user_layout);
        passLayout = findViewById(R.id.pass_layout);

        userEdittext = findViewById(R.id.user_edittext);
        passEdittext = findViewById(R.id.pass_edittext);

        userEdittext.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {

                if (userEdittext.getText().toString().isEmpty()) {
                    userLayout.setError("Enter Username!");
                } else {
                    userLayout.setErrorEnabled(false);
                }

            }
        });

        userEdittext.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

                if (userEdittext.getText().toString().isEmpty()) {
                    userLayout.setError("Enter Username!");
                } else {
                    userLayout.setErrorEnabled(false);
                }

            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });

    }

}

حالا با وارد کردن اولین کاراکتر، اخطار حذف می‌شود:

با استفاده از خاصیت textColorHint می‌توان رنگ Hint یا همان Floating Label را تغییر داد:

خاصیت hintTextAppearance هم برای استایل دهی به Hint هنگامی که Focus شده، بکار می‌رود:

بهتر است استایلی که تعریف می‌کنیم از TextAppearance.AppCompat ارث بری کند.
متن Error را هم به همین صورت و توسط خاصیت errorTextAppearance می‌توان استایل دهی کرد:

در TextInputLayout قابلیت دیگری با نام Counter (شمارنده) تعریف شده. کاربرد شمارنده در مواقعی است که بخواهیم تعداد کاراکترهای مناسب را به کاربر اعلام کنیم:

خاصیت counterEnabled برای فعال کردن این ویژگی و counterMaxLength برای تعیین تعداد کاراکتر استفاده شده است:

با وارد کردن هر کاراکتر درون این EditText یک شماره به عدد سمت چپ اضافه می‌شود.
در صورتی که تعداد کاراکتر ورودی از مقدار MaxLength بیشتر شود، رنگ شمارنده تغییر می‌کند. تعیین رنگ شمارنده در حالت عادی و حالتی که تعداد کاراکترها از مقدار تعیین شده تجاوز کند به ترتیب توسط دو خاصیت counterTextAppearance و counterOverflowTextAppearance صورت می‌پذیرد:

خاصیت passwordToggleEnabled آیکونی به EditText های از نوع password اضافه می‌کند که کاربر با لمس آن، پسوردی که وارد کرده را می‌تواند مشاهده می‌کند:

توجه : سورس پروژه درون پوشه Exercises قرار داده شده است

منابع تکمیلی:

https://developer.android.com/reference/android/support/design/widget/TextInputLayout
https://developer.android.com/reference/com/google/android/material/textfield/TextInputLayout
https://developer.android.com/reference/android/text/TextWatcher

دانلود فایل این آموزش با فرمت PDF به همراه سورس پروژه
تعداد صفحات : ۲۱
حجم : ۱/۳ مگابایت
قیمت : رایگان
دانلود رایگان با حجم ۱/۳ مگابایت لینک کمکی

نوشته کار با TextInputLayout و Floating Label متریال دیزاین اولین بار در اندروید استودیو پدیدار شد.

کار با Bottom Navigation متریال دیزاین + سورس پروژه

سیدمهدی مطهری — Mon, 04 Jun 2018 11:35:44 +0000

با توجه به اندازه محدود صفحات نمایش دستگاه‌های هوشمند و بویژه دیوایس‌های اندرویدی، طراحان رابط کاربری برنامه‌های اندرویدی همواره سعی‌شان بر این است تا حداکثر استفاده را از فضایی که در اختیار کاربر قرار دارد برده و گزینه‌ها یا صفحات پرکاربرد اپلیکیشن با سهولت بیشتری در دسترس افراد قرار گیرد. قابلیت Bottom Navigation در اندروید یکی از آیتم‌های پرکاربرد در طراحی رابط کاربری اپ‌های اندرویدی به شمار می‌رود.
در این جلسه از سری مباحث آموزش برنامه نویسی اندروید با این قابلیت بیشتر آشنا شده و در قالب یک مثال، نحوه پیاده سازی آن را مرحله به مرحله بیان می‌کنیم.

معرفی Bottom Navigation

بنام خدا. Bottom Navigation یکی دیگر از کامپوننت‌های متریالی اندروید است که کاری مشابه Tabs انجام می‌دهد. این کامپوننت در پایین صفحه قرار می‌گیرد و برای نمایش ۳ الی ۵ گزینه مناسب است.

در استفاده از کامپوننت Bottom Navigation باید یکسری موارد را مدنظر قرار داد. از جمله:
– از Bottom Navigation عموما برای نمایش صفحات و قسمت‌های مهم اپلیکیشن استفاده می‌شود. صفحاتی که به لحاظ اهمیت دارای سطح و تراز یکسانی هستند و کاربر بیشترین سروکار را با آنها دارد. اینستاگرام را درنظر بگیرید:

در نوار پایین صفحه ۵ آیتم قرار گرفته که جزء پرکاربردترین صفحات این اپ است و کاربر به راحتی به آنها دسترسی دارد.
– برخلاف Tabs در اینجا تعداد آیتم‌ها باید محدود بوده (بین ۳ تا ۵) تا نیاز به اسکرول بین آیتم‌ها نباشد. همچنین استفاده از آن برای کمتر از ۳ آیتم هم پیشنهاد نمی‌شود. بنابراین اگر اپ شما فقط دو صفحه مهم دارد، استفاده از این ویجت راه حل مناسب نیست (بجای آن از Tabs و یا Navigation Drawer استفاده کنید).
– در صورت استفاده از text label (متن) به همراه آیکون، تا حد امکان متن کوتاه انتخاب شود تا در یک خط قرار گیرد.
– استفاده همزمان از Tabs در بالای صفحه و Bottom Navigation در انتهای صفحه ممکن است باعث سردرگمی کاربر شود بنابراین توصیه نمی‌شود.
– اندازه متن و آیکون همه آیتم‌ها یکسان تعیین شود.
– از بکار بردن رنگهای متفاوت برای آیکون یا متن آیتم‌ها اجتناب کنید. رابط کاربری هرچقدر یکدست و ساده تر باشد برای کاربر تجربه بهتری به همراه دارد.
در گذشته برای پیاده سازی یک Bottom Navigation می‌بایست از کتابخانه‌های متفرقه موجود در سطح وب استفاده می‌شد. یا اینکه توسعه دهنده شخصا این قابلیت را از پایه بنویسد. اما در نسخه ۲۵ کتابخانه Support Design این کامپوننت نیز به صورت رسمی معرفی و اضافه شد.

ساخت پروژه Bottom Navigation

مطابق مبحث آموزش ساخت پروژه در اندروید استودیو یک پروژه اندرویدی با نام BottomNavigation می‌سازم. اکتیویتی را از نوع Empty Activity و زبان را Java انتخاب کردم.
در اولین قدم کتابخانه Design را به پروژه اضافه می‌کنم:

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

سپس مطابق کد زیر یک BottomNavigationView به Layout اضافه می‌کنم:

activity_main.xml

با استفاده از خاصیت layout_alignParentBottom ویجت در انتهای صفحه قرار می‌گیرد.
مانند Navigation Drawer که در مباحث گذشته آشنا شدیم، در اینجا هم برای نمایش آیتم‌ها از Menu استفاده می‌کنیم. در مسیر res > New > Android Resource File یک فایل با نام دلخواه bottom_navigation.xml و از نوع Menu به پروژه اضافه می‌کنم که در نهایت یک فولدر با نام menu و حاوی این فایل به فولدر res اضافه می‌شود.

سه آیتم به صورت زیر داخل menu تعریف می‌کنم:

bottom_navigation.xml

هر آیتم شامل یک title، id و icon است که از آیکون‌های پیش فرض اندروید استودیو در مسیر res > New > Vector Asset استفاده کرده‌ام.
حالا منو را به BottomNavigationView اضافه می‌کنم:

app:menu="@menu/bottom_navigation"

پروژه را اجرا می‌کنم:

چند خاصیت هم برای customize کردن Bottom Navigation در اختیار داریم:

خاصیت background که کاربرد آن واضح است و رنگ پس‌زمینه کامپوننت را مشخص می‌کند. دو مورد بعد یعنی itemTextColor و itemIconTint برای تعیین رنگ متن و آیکون استفاده می‌شوند:

با تعیین رنگ پس زمینه، shadow نیز به بالای نوار اضافه می‌شود. علاوه بر موارد فوق، خاصیت itemBackground هم داریم که برای تعیین رنگ پس‌زمینه آیتم‌ها بکار می‌رود. برای فهم بهتر، این خاصیت را به کامپوننت اضافه کرده و در دو حالت قرارگیری دیوایس نمایش می‌دهم:

app:itemBackground="@color/colorPrimary"

با تعریف itemTextColor و itemIconTint رنگ متن و آیکون هرسه آیتم یکسان است. در صورتی که بخواهیم رنگ آیتم انتخاب شده (checked) از سایر آیتم‌ها مجزا باشد، به صورت زیر عمل می‌کنیم:
ابتدا روی res راست کلیک کرده، در مسیر New > Android Resoure File یک فایل xml از نوع Color به پروژه اضافه می‌کنم:

تذکر: با تایید پنجره فوق، یک فولدر جدید با نام color به پروژه اضافه می‌شود.

فایل را به اینصورت تکمیل می‌کنم:

nav_color.xml

در کد فوق دو آیتم با خاصیت state_checked و مقادیر true و false تعریف شده که هرکدام یک رنگ را به خود اختصاص داده.
حالا برای دو خاصیت مربوط به رنگ متن و آیکون، فایل فوق را تعریف می‌کنم:

ملاحظه می‌کنید آیتمی که در حالت انتخاب شده قرار دارد رنگ مربوط به مقدار true

و سایر آیتم‌ها رنگ خط زیر (یعنی مقدار false) را نشان می‌دهند:

آیتم انتخاب شده، رنگ پیش فرض خود را از colorPrimary تم متریال می‌گیرد بنابراین اگر فقط قصد تغییر رنگ آن را داشته باشیم، کافیست به جای مراحل قبل، یک style جدید تعریف کرده، مقدار colorPrimary را جایگزین کنیم:

مرحله نهایی، هندل کردن آیتم‌هاست که با انتخاب هر آیتم چه عملی انجام شود. من یک مثال ساده پیاده سازی می‌کنم که با انتخاب هر آیتم، یک text متناسب با آن در وسط صفحه نمایش داده شود.

یک TextView به لایه اضافه می‌کنم:

در ادامه دو ویجت Bottom Navigation و TextView را داخل اکتیویتی تعریف کرده و سپس متد Listener آنرا می‌نویسم:

MainActivity.java

package ir.android_studio.bottomnavigation;

import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    BottomNavigationView bottomNav;
    TextView itemText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottomNav = findViewById(R.id.bottom_nav);
        itemText = findViewById(R.id.text);

        bottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                return false;
            }
        });

    }
}

از متد setOnNavigationItemSelectedListener برای تعیین عملکرد آیتم‌ها استفاده می‌شود.
متد را با استفاده از یک switch case تکمیل می‌کنم:

bottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {

        switch (item.getItemId()) {

            case R.id.item_1:
                itemText.setText("Home Item");
                return true;

            case R.id.item_2:
                itemText.setText("Account Item");
                return true;

            case R.id.item_3:
                itemText.setText("Settings Item");
                return true;

        }

        return false;
    }
});

در switch فوق، تعیین شده تا با دریافت id مربوط به هرکدام از آیتم‌ها، چه متنی در TextView نمایش داده شود.

یک آیتم دیگر به Menu اضافه می‌کنم:

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

How to show more than 3 items in bottomNavigationView

با مطالعه پرسش و پاسخ‌های موجود در StackOverflow.com متوجه شدم باید قابلیت shiftMode را غیر فعال کنم که کد آن به صورت زیر است:

private void disableShiftMode(BottomNavigationView view) {
    BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
    try {
        Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
        shiftingMode.setAccessible(true);
        shiftingMode.setBoolean(menuView, false);
        shiftingMode.setAccessible(false);
        for (int i = 0; i < menuView.getChildCount(); i++) {
            BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
            item.setShiftingMode(false);
            // set once again checked value, so view will be updated
            item.setChecked(item.getItemData().isChecked());
        }
    } catch (NoSuchFieldException e) {
        Log.e("BNVHelper", "Unable to get shift mode field", e);
    } catch (IllegalAccessException e) {
        Log.e("BNVHelper", "Unable to change value of shift mode", e);
    }
}

نیازی نیست وارد جزئیات متد بالا شوید. من هم درک کاملی از عملکرد کد ندارم و صرفا از آن استفاده می‌کنم.
متد را به اکتیویتی اضافه کرده سپس در متد onCreate آنرا فراخوانی می‌کنم:

package ir.android_studio.bottomnavigation;

import android.support.annotation.NonNull;
import android.support.design.internal.BottomNavigationItemView;
import android.support.design.internal.BottomNavigationMenuView;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.MenuItem;
import android.widget.TextView;

import java.lang.reflect.Field;

public class MainActivity extends AppCompatActivity {

    BottomNavigationView bottomNav;
    TextView itemText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottomNav = findViewById(R.id.bottom_nav);
        itemText = findViewById(R.id.text);

        disableShiftMode(bottomNav);

        bottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch (item.getItemId()) {

                    case R.id.item_1:
                        itemText.setText("Home Item");
                        return true;

                    case R.id.item_2:
                        itemText.setText("Account Item");
                        return true;

                    case R.id.item_3:
                        itemText.setText("Settings Item");
                        return true;

                    case R.id.item_4:
                        itemText.setText("Premium Item");
                        return true;

                }

                return false;
            }
        });

    }

    // Method for disabling ShiftMode of BottomNavigationView
    private void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }

}

تقریبا در تمام مواردی مانند مسئله فوق که به یک راه حل نیاز داریم، با یک جستجوی ساده می‌توان به راه حل رسید و لازم نیست خودمان اقدام به پرسش کنیم و چند ساعت و چند روز منتظر پاسخ باشیم. مشکل و سوال ما قبلا سوالی افراد دیگری نیز بوده.

توجه : سورس پروژه‌ها درون پوشه Exercises قرار دارد

منابع تکمیلی:

https://material.io/design/components/bottom-navigation.html
https://developer.android.com/reference/android/support/design/widget/BottomNavigationView

دانلود فایل این آموزش با فرمت PDF به همراه سورس پروژه
تعداد صفحات : ۱۹
حجم : ۱/۲ مگابایت
قیمت : رایگان
دانلود رایگان با حجم ۱/۲ مگابایت لینک کمکی

نوشته کار با Bottom Navigation متریال دیزاین + سورس پروژه اولین بار در اندروید استودیو پدیدار شد.

کار با Bottom Sheet متریال دیزاین

سیدمهدی مطهری — Sun, 27 May 2018 13:34:22 +0000

معرفی Bottom Sheet:

به نام خدا. Bottom Sheet یکی دیگر از کامپوننت‌های متریال دیزاین در اندروید است که برای نمایش اطلاعات، منو ها و یا هر چیز دیگری بکار می‌رود. به تعریف ساده، یک صفحه یا نواری است که از پایین صفحه نمایش به سمت بالا باز می‌شود. به طور کلی Bottom Sheet ها را می‌توان به دو دسته Persistent Bottom Sheet و Modal Bottom Sheet تقسیم کرد.
در ادامه دو مثال از کاربرد این کامپوننت را نشان می‌دهم که تصویر اول مربوط به Google Maps و تصویر دوم Google Drive است:

در Google Maps با Pin کردن یک نقطه روی نقشه، یک Bottom Sheet از پایین صفحه باز می‌شود که حاوی اطلاعات مختصری از مکان انتخاب شده است. سپس با لمس دکمه MORE INFO یا کشیدن نوار به سمت بالا، اطلاعات بیشتری به کاربر ارائه می‌شود که در گوگل مپ، در این حالت تمام صفحه را دربر می‌گیرد.
در گوگل درایو هم از این کامپوننت برای نمایش گزینه‌های مرتبط با فایل و همچنین سایر موارد مانند ساخت فولدر جدید یا آپلود فایل استفاده شده است.
من این مبحث را در قالب چند پروژه تهیه می‌کنم تا درک جزئیات و تفاوت‌ها ساده تر شود.
ابتدا یک پروژه جدید با نام SimpleBottomSheet و یک Empty Activity ایجاد می‌کنم. برای پیاده سازی Bottom Sheet لازم است کتابخانه Support Design را به پروژه اضافه کنیم:

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

در این پروژه همانطور که از نام آن پیداست قصد دارم یک Bottom Sheet را در ساده ترین حالت آن معرفی کنم. بنابراین در این مثال فقط با layout اکتیویتی سروکار دارم و از Java استفاده نخواهم کرد.
در قدم اول جهت نمایش Bottom Sheet در یک اکتیویتی، باید Root Layout را از نوع CoordinatorLayout انتخاب کنیم:

activity_main.xml:

همانطور که در کد بالا ملاحظه می‌کنید، CoordinatorLayout هم از زیرمجموعه های کتابخانه Design است. از CoordinatorLayout برای کنترل حرکت‌ها در متریال استفاده می‌شود. مانند اجرای animation در حرکت عناصر و المان‌های رابط کاربری. یعنی در Bottom Sheet استفاده از این layout باعث می‌شود تا باز و بسته شدن آن با یک حالت انیمیشن همراه باشد که نسبت به یک باز و بسته شدن عادی و ناگهانی، حس و تجربه بهتری را به کاربر منتقل می‌کند. CoordinatorLayout کاربردهای گسترده ای دارد که در مباحث آتی و در جای مناسب اشاره خواهد شد. به عنوان مثال در برخی از اپ ها با اسکرول به پایین، Toolbar حذف و با اسکرول به بالا، مجدد ظاهر می‌شود که پیاده سازی این عمل با CoordinatorLayout انجام می‌پذیرد.

ابتدا یک Bottom Sheet ساده تعریف کرده و در ادامه توضیحات لازم را قید می‌کنم:

یک LinearLayout به layout اضافه کردم که حاوی دو TextView می‌باشد. در انتخاب نوع این Layout محدودیتی نیست و از سایر موارد مانند RelativeLayout، ConstraintLayout و… هم می‌توان استفاده کرد. کاری که باید انجام دهیم، تعیین این LinearLayout به عنوان یک Bottom Sheet است که به اینصورت انجام شده:

app:layout_behavior="android.support.design.widget.BottomSheetBehavior"

با افزودن ویژگی فوق به یک layout، اندروید آنرا به عنوان یک Bottom Sheet درنظر می‌گیرد. مقدار این ویژگی را به صورت دیگری هم می‌توانیم تعریف کنیم:

app:layout_behavior="@string/bottom_sheet_behavior"

کلید Ctrl را نگه داشته، روی مقدار فوق کلیک کنید. به فایل values.xml مربوط به کتابخانه design منتقل می‌شوید که در cache سیستم شما ذخیره شده است. به عنوان فوق برنامه، مسیر محل قرارگیری این فایل که در نوار آدرس اندروید استودیو نمایش داده می‌شود را در درایو مربوطه باز کنید. فولدرهای قبل آن را هم بررسی کنید. تمامی کتابخانه هایی که قبلا یکبار استفاده کردید در اینجا ذخیره شده و برای پروژه های بعدی استفاده می‌شود.
پروژه را اجرا می‌کنم:

یک نوار با رنگ پس زمینه و ارتفاع ۲۰۰dp که قبلا تعیین کردم در پایین صفحه ظاهر شده که محتوای آن شامل دو TextViewمی‌باشد. در حال حاضر این یک نوار ثابت است که با کشیدن به سمت پایین هیچ واکنشی صورت نمی‌پذیرد. خاصیت زیر را با یک مقدار دلخواه به Bottom Sheet (یعنی LinearLayout) اضافه می‌کنم:

app:behavior_peekHeight="60dp"

مجدد پروژه را اجرا می‌کنم:

با اضافه شدن خاصیت فوق، نوار ابتدا ارتفاعی برابر مقدار تعریف شده یعنی ۶۰dp دارد که با کشیدن نوار به سمت بالا، تا حداکثر ارتفاع خود یعنی ۲۰۰dp باز شده و مجددا با کشیدن آن به سمت پایین، به ارتفاع اولیه یعنی ۶۰dp برمی‌گردد.
واضح است اگر مقدار behavior_peekHeight را برابر با ۰ قرار بدهم، در حالت پیش فرض نوار کاملا مخفی است که در این پروژه قابل استفاده نیست. زیرا برای بالا آوردن نوار مخفی استفاده از جاوا لازم است که در این پروژه قصد کار با جاوا را نداریم.
در قسمت قبل با کشیدن نوار به سمت پایین، در ارتفاع اولیه یعنی ۶۰dp متوقف می‌شود. اما با استفاده از خاصیت behavior_hideable و مقدار true، نوار به طور کلی به پایین صفحه رفته و محو می‌شود:

app:behavior_hideable="true"

بدیهی است مقدار false برای خاصیت فوق، مانند قسمت قبل عمل کرده و نوار کاملا مخفی نمی‌شود.

سورس کامل activity_main.xml:

تذکر: سورس فوق با نام activity_main_linear.xml در کنار سورس اصلی پروژه قرار داده شده است.

در قسمت قبل، layout نوار Bottom Sheet از نوع LinearLayout بود. من در TextView دوم یک متن نسبتا طولانی استفاده کردم. اما در حال حاضر فقط قسمتی از متن و بطور کل محتوای نوار برای کاربر نمایش داده می‌شود و مابقی آن مخفی است. یعنی فقط به اندازه ۲۰۰dp را نشان می‌دهد و قابلیت اسکرول فعال نیست تا کاربر بتواند ادامه محتوا را نیز مشاهده کند. جهت رفع این مساله لازم است یک NestedScrollView را جایگزین LinearLayout کنیم:

(دقت کنید داخل NestedScrollView جهت چینش عناصر از یک LinearLayout استفاده شده)
حالا با اجرای مجدد پروژه امکان اسکرول محتوا نیز فراهم شده و بعد از آنکه نوار به سمت بالا کشیده شد و در حداکثر ارتفاع خود یعنی ۲۰۰dp قرار گرفت، با اسکرول مجدد به سمت بالا، ادامه محتوا نمایش داده می‌شود و به همین ترتیب برای اسکرول به سمت پایین.

تذکر: پروژه فوق، با نام SimpleBottomSheet در پوشه Exercises قرار دارد.

در پروژه قبل با کلیّت این کامپوننت متریالی آشنا شدیم. در ادامه قصد دارم دو نوع Persistent و Modal را در دو پروژه جداگانه بررسی کنم. البته شاید نتوان از نظر تفاوت کاربرد این دو، یک مرز مشخص تعیین کرد اما بعد از مطالعه ادامه مبحث، تا حدود زیادی نوع کاربرد هریک از این دو مورد روشن می‌شود.

Persistent Bottom Sheet:

از این حالت عموما جهت نمایش محتوا استفاده می‌شود. مواردی مانند “جزئیات بیشتر”، “اطلاعات تکمیلی” و سایر موارد مشابه که بین محتوای اصلی موجود در صفحه و محتوای Bottom Sheet یک ارتباط وجود دارد و در واقع به نوعی این نوار نقش تکمیل کننده صفحه اصلی را دارد.
مجدد به مثال اولی که در ابتدای مبحث اشاره شد دقت کنید:

کاربر با انتخاب یک نقطه بر روی نقشه، ابتدا اطلاعات کلی از جمله نام مکان و مسافت را مشاهده می‌کند که در ادامه با کشیدن نوار به بالا یا انتخاب دکمه MORE INFO، توضیحات تکمیلی را نیز دریافت خواهد کرد. به عبارت دیگر، محتوای این نوار، اطلاعات داخلی برنامه محسوب می‌گردد و ارتباطی با خارج از آن ندارد.
یک پروژه با نام PersistentBottomSheet و یک Empty Activity ایجاد می‌کنم.
مانند پروژه قبل، اینجا هم لازم است کتابخانه design را اضافه کنم.
در این پروژه می‌خواهم با کلیک روی یک دکمه، یک Bottom Sheet باز و بسته شود. بنابراین به دلیل آنچه در پروژه قبل ذکر شد، ابتدا layout ریشه را به CoordinatorLayout تغییر داده، سپس یک Button به آن اضافه می‌کنم:

activity_main.xml:

CoordinatorLayout امکان مدیریت نحوه چینش عناصر را ندارد بنابراین دکمه را درون یک RelativeLayout قرار دادم. در مرحله بعد یک Bottom Sheet به layout اضافه می‌کنم:

در اینجا از NestedScrollView استفاده نکردم. ارتفاع هم wrap_content تعیین کردم بنابراین نوار به اندازه محتوای درون آن باز خواهد شد.
بهتر است برای Bottom Sheet یک layout جداگانه ساخته و آنرا درون layout اکتیویتی اصلی include کنم تا نظم بیشتری به کار داده باشم. یک Layout جدید با نام bottom_sheet.xml ایجاد کرده، کد فوق را درون آن قرار می‌دهم:

activity_main.xml:

در حال حاضر با اجرای پروژه، ۶۰dp از ابتدای نوار نمایش داده می‌شود که با کشیدن به سمت بالا، نوار کامل باز خواهد شد. اما قصد دارم این عمل باز شدن توسط دکمه صورت پذیرد.

اکتیویتی را به اینصورت تکمیل می‌کنم:

package ir.android_studio.persistentbottomsheet;

import android.support.design.widget.BottomSheetBehavior;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    Button btnSheet;
    LinearLayout sheetLayout;
    BottomSheetBehavior bottomSheet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnSheet = findViewById(R.id.btn_expand);
        sheetLayout = findViewById(R.id.bottom_sheet);
        bottomSheet = BottomSheetBehavior.from(sheetLayout);

        btnSheet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                bottomSheet.setState(BottomSheetBehavior.STATE_EXPANDED);

            }
        });

    }
}

ابتدا Button و LinearLayout مربوط به BottomSheet را توسط id ای که قبلا به آنها اختصاص دادم تعریف کردم. سپس یک نمونه از متد BottomSheetBehavior با نام دلخواه bottomSheet ساختم که توسط متد .from() لایه مربوطه را به آن معرفی کرده ام.

نکته: در تعریف sheetLayout می‌توان از View بجای LinearLayout یا NestedScrollView و… استفاده کرد. زیرا همه اینها از View ارث بری شده اند:

View sheetLayout;

در ادامه برای دکمه یک Listener ایجاد کردم. از متد setState() جهت تعیین حالت Bottom Sheet استفاده می‌شود. من حالت STATE_EXPANDED را انتخاب کردم، یعنی با لمس دکمه، نوار در وضعیت Expanded (باز شده) قرار می‌گیرد.
پروژه را اجرا و تست می‌کنم:

عملیات به درستی انجام می‌شود و نوار باز شد. در قدم بعد می‌خواهم با لمس دوباره‌ی دکمه، نوار مجددا بسته شود:

btnSheet.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

        if (bottomSheet.getState() == BottomSheetBehavior.STATE_COLLAPSED) {

            bottomSheet.setState(BottomSheetBehavior.STATE_EXPANDED);

        }
        else if (bottomSheet.getState() == BottomSheetBehavior.STATE_EXPANDED) {

            bottomSheet.setState(BottomSheetBehavior.STATE_COLLAPSED);
            
        }

    }
});

با استفاده از if else و متد getState() شرطی تعیین کردم تا اگر نوار در وضعیت Collapsed بود، با لمس دکمه به وضعیت Expanded تغییر کند و بلعکس.
در هریک از دو نقش فوق، دکمه عبارت Expand را نشان می‌دهد که منطقی نیست. هنگامی که نوار در وضعیت Expand قرار دارد، نقش دکمه Collapse کردن آن است بنابراین عنوان دکمه نیز باید تغییر کند که با استفاده از setText() درون شرط این اصلاح را صورت می‌دهم:

btnSheet.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

        if (bottomSheet.getState() == BottomSheetBehavior.STATE_COLLAPSED) {

            bottomSheet.setState(BottomSheetBehavior.STATE_EXPANDED);
            btnSheet.setText("Collapse");

        }
        else if (bottomSheet.getState() == BottomSheetBehavior.STATE_EXPANDED) {

            bottomSheet.setState(BottomSheetBehavior.STATE_COLLAPSED);
            btnSheet.setText("Expand");

        }

    }
});

با اجرای مجدد پروژه، نوار در هر وضعیتی که باشد، دکمه عبارت متضاد آنرا نشان می‌دهد.
هنوز یک ایراد دیگر داریم. در حال حاضر اگر وضعیت نوار را فقط با دکمه تغییر دهید همه چیز به خوبی انجام شده و با تغییر حالت نوار، text دکمه هم تغییر می‌کند. اما در صورتی که کاربر نوار را به صورت عادی به طرف بالا یا پایین بکشد، تغییری در text انجام نمی‌شود که یک خطای منطقی است. یعنی اگر دکمه عبارت Expand را نشان می‌دهد و کاربر نوار را بدون استفاده از دکمه Expand کند (بالا ببرد)، باز هم دکمه کلمه Expand را نشان می‌دهد در صورتی که باید با کلمه Collapse جایگزین شود.
در اینجا متدی داریم با نام setBottomSheetCallback که امکان مدیریت Bottom Sheet را فراهم می‌کند:

bottomSheet.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {

    }
});

این متد دو تابع onStateChanged و onSlide دارد که برای رفع مشکل ایجاد شده از مورد اول استفاده می‌کنیم:

public void onStateChanged(@NonNull View bottomSheet, int newState) {

    if (newState == BottomSheetBehavior.STATE_EXPANDED) {
        btnSheet.setText("Collapse");
    } else if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
        btnSheet.setText("Expand");
    }

}

در اینجا با استفاده از newState() یک شرط تعیین شده. به اینصورت که اگر وضعیت جدید روی Expanded بود، دکمه کلمه Collapse را نشان دهد و بلعکس. حالا با اجرای مجدد پروژه همه چیز به درستی کار می‌کند.

با تعیین این شرط، عملا setText هایی که در Listener دکمه تعریف کرده بودم کارایی ندارد و آنها را حذف می‌کنم (در سورس پروژه comment شده است).

MainActivity.java:

package ir.android_studio.persistentbottomsheet;

import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    Button btnSheet;
    LinearLayout sheetLayout;
    BottomSheetBehavior bottomSheet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnSheet = findViewById(R.id.btn_expand);
        sheetLayout = findViewById(R.id.bottom_sheet);
        bottomSheet = BottomSheetBehavior.from(sheetLayout);

        btnSheet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                if (bottomSheet.getState() == BottomSheetBehavior.STATE_COLLAPSED) {

                    bottomSheet.setState(BottomSheetBehavior.STATE_EXPANDED);
                    //btnSheet.setText("Collapse");

                }
                else if (bottomSheet.getState() == BottomSheetBehavior.STATE_EXPANDED) {

                    bottomSheet.setState(BottomSheetBehavior.STATE_COLLAPSED);
                    //btnSheet.setText("Expand");

                }

            }
        });

        bottomSheet.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {

                if (newState == BottomSheetBehavior.STATE_EXPANDED) {
                    btnSheet.setText("Collapse");
                } else if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
                    btnSheet.setText("Expand");
                }

            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {

            }
        });

    }
}

دو خاصیت behavior_peekHeight و behavior_hideable را به جای xml می‌توان در جاوا نیز تعریف و کنترل کرد (در سورس کامنت شده):

bottomSheet.setPeekHeight(0);
bottomSheet.setHideable(true);

تذکر: پروژه فوق، با نام PersistentBottomSheet در پوشه Exercises قرار دارد.

Modal Bottom Sheet:

در این نوع، در حقیقت ما یک Dialog (مشابه AlertDialog) را به عنوان یک Bottom Sheet نمایش می‌دهیم. مانند مثال دوم ابتدای مبحث. یعنی Google Drive:

از Modal عموما جهت نمایش گزینه هایی مانند Share، Copy، Upload و سایر اکشن های مشابه استفاده می‌شود.
یک پروژه جدید با نام ModalBottomSheet و یک Empty Activity ایجاد می‌کنم.
مشابه موارد قبل ابتدا کتابخانه Support Design را به پروژه اضافه می‌کنم.
activity_main.xml را مشابه پروژه قبل می‌سازم با این تفاوت که layout ای که include شده بود حذف می‌شود:

برای نمایش Bottom Sheet در قالب یک Dialog، یک فرگمنت می‌سازم. بعد از ساخته شدن فرگمنت، باید ارث بری آن را از Fragment به BottomSheetDialogFragment تغییر دهم:

BottomSheetFragment.java:

package ir.android_studio.modalbottomsheet;

import android.os.Bundle;
import android.support.design.widget.BottomSheetDialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class BottomSheetFragment extends BottomSheetDialogFragment {


    public BottomSheetFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_bottom_sheet, container, false);
    }

}

نکته: اگر بعد از ساخت فرگمنت، ارور مربوط به کتابخانه support-v4 گرفتید، نیاز به تغییر آی پی و نصب آن نیست. این کتابخانه برای ایمپورت شدن android.support.v4.app.Fragment اضافه می‌شود که ما در این پروژه به آن نیازی نداریم و بجای Fragment از BottomSheetDialogFragment استفاده می‌کنیم. بنابراین جهت رفع مشکل کافی است com.android.support:support-v4:xx.x.x را از build.gradle حذف کنید.
حذف import android.support.v4.app.Fragment از کلاس فرگمنت فراموش نشود.

حالا باید layout این فرگمنت را تکمیل کنم. همان محتوایی که برای bottom_sheet.xml پروژه قبل ساخته بودم را در اینجا استفاده می‌کنم:

fragment_bottom_sheet.xml:

در مرحله نهایی، یک متد Listener برای دکمه Expand می‌نویسم و داخل آنرا به صورت زیر تکمیل می‌کنم:

package ir.android_studio.modalbottomsheet;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    Button btnSheet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnSheet = findViewById(R.id.btn_expand);

        btnSheet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                BottomSheetFragment bottomFragment = new BottomSheetFragment();
                bottomFragment.show(getSupportFragmentManager(), bottomFragment.getTag());

            }
        });

    }
}

ابتدا از فرگمنت یک نمونه با نام bottomFragment ساخته شده. سپس توسط متد show() نمایش داده می‌شود. این متد دو پارامتر ورودی می‌گیرد که اولی FragmentManager و دومی Tag فرگمنت مربوطه است.
پروژه را اجرا می‌کنم:

مانند AlertDialog، این نوار نیز دارای یک elevation (ارتفاع) زیاد است و با دکمه back دیوایس و یا کشیدن نوار به سمت پایین حذف می‌شود.

تذکر: پروژه فوق، با نام ModalBottomSheet در پوشه Exercises قرار دارد.

منابع تکمیلی:

https://developer.android.com/reference/android/support/design/widget/BottomSheetBehavior
https://developer.android.com/reference/android/support/design/widget/BottomSheetDialog
https://developer.android.com/reference/android/support/design/widget/BottomSheetDialogFragment

دانلود فایل این آموزش با فرمت PDF به همراه سورس پروژه‌ها
تعداد صفحات : ۲۵
حجم : ۲/۳ مگابایت
قیمت : رایگان
دانلود رایگان با حجم ۲/۳ مگابایت لینک کمکی

نوشته کار با Bottom Sheet متریال دیزاین اولین بار در اندروید استودیو پدیدار شد.