استفاده از WebView در اندروید- ساخت یک مرورگر ساده

استفاده از WebView در اندروید- ساخت یک مرورگر ساده

سلام دوستان؛

WebView در اندروید این امکان را به شما میدهد که یک صفحه وب را در نرم افزارتان ادغام کنید. WebView تمام ویژگی های یک مرورگر دکستاپ مانند مدیریت تاریخچه، کوکی ها، پشتبانی از Html5 و …. را دارا است. با استفاده از WebView در اندروید می توانید نرم افزارهای معرکه ای بسازید.

در این آموزش شروع به یادگیری استفاده ساده از یک WebView می کنیم و در نهایت یک مرورگر ساده می سازیم. همچنین می آموریم که چگونه از WebView در اندروید در کنار سایر اِلمان های طراحی مانند CollapsingToolbar و CollapsingToolbar استفاده کنیم.

۱- استفاده ابتدایی از WebView در اندروید

استفاده ابتدایی از WebView دو گام ساده بیشتر ندارد، در اولین گام نیاز است که یک WebView به فایل xml خود اضافه کنیم.

در گام دوم شما نیاز به Load کردن یک URL خاص در فایل جاوا (MainActivity.java) دارید. در اینجا ما صفحه گوگل را به عنوان آدرس قرار داده ایم.

make-custom-web-view-in-android-mobcollege.ir

حتی اگر بارگذاری یک آدرس ساده، آسان به نظر بیاید ولی سفارشی سازی یک WebView در اندروید نیاز به داشتن دانشی بیشتر از شناخت WebView و ارائه آن دارد.

۲- ساخت یک پروژه جدید

۱- ابتدا یک پروژه جدید ایجاد کنید.

۲- نیاز به استفاده از شبکه داریم، به منظور انجام اینکار باید مجوز استفاده از INTERNET اینترنت را در فایل AndroidManifest.xml مربوط به برنامه را صادر کنیم.

۳- فایل build.gradle را باز کنید و کتابخانه Glide را به آن اضافه کنید، این کار برای بارگذاری تصویر درون CollapsingToolbar نیاز است.

۴- این پوشه را دانلود کنید و محتویات آنرا به پروژه خود اضافه کنید، این پوشه حاوی اطلاعات و فایل هایی برای برنامه است.

۵- فایل های layout مربوط به MainActivity را باز کنید و تغییرات زیر را در آن انجام دهید.

content_main.xml

۶- در حال حاضر  MainActivity.java را باز کنید و تغییرات زیر را در آن اعمال کنید. در اینجا initCollapsingToolbar کاملا به WebView نامربوط است، ولی collapsing effect را زمانی که صفحه به سمت بالا میرود را تولید میکند.

اگر شما برنامه را اجرا کنید، میتوانید مشاهده کنید که صفحه وب در حال بارگذاری در WebView است.

make-custom-web-view-in-android-mobcollege.ir

۲-۱بارگذاری Local Html, CSS and Font-Style

در برخی از موارد ما نیاز به بارگذاری صفحه یک از محل ذخیره سازی محلی (local storage) داریم، برای این منظور  میتوانیم از پوشه assets برای ذخیره سازی Html,Css و فونت ها و نیز بارگذاری مجدد آنها استفاده کنیم.

۷- در زیر مجموعه src/main یک پوشه  (assets (src/main/assets بسازید و Html ,css ها را درون آن قرار دهید. من در اینجا یک فایل Html به نام sample.html را ذخیره کرده ام. همچنین دو فونت با نام های Roboto-Light.ttf و Roboto-Medium.ttf برای باگذاری در Css قرار داده ام.

ساخت web view سفارشی در اندروید

۸- کد زیر را در فایل MainActivity.java به منظور بارگذاری sample.html از پوشه assets قرار دهید.

make-custom-web-view-in-android-mobcollege.ir

۲-۲ فعال/غیرفعال کردن Javascript

شما میتوانید در WebView در اندروید از طریق متد setJavaScriptEnabled استفاده از JavaScript را فعال و غیرفعال کنید.

۲-۳ فعال کردن Zooming Controls

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

۲-۴ ساخت یک نرم افزار ساده

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

۹- یک کلاس بسازید و نام آنرا Utils.java قرار دهید.

> ()isSameDomain- چک میکند که آیا URL از یک دامنه است یا خیر.

> ()bookmarkUrl- این متد یک URL را از لیست bookmarks درون SharedPreferences حذف و یا اضافه میکند.

> ()tintMenuIcon- برای تغییر رنگ Toolbar استفاده می شود.

۱۰- در مسیر res ⇒ menu، یک منو جدید بسازید و نام آنرا  browser.xml قرار دهید. این منو آیکن برگشت، فوروارد و bookmark را در Toolbar قرار می دهد.

۱۱- یک Activity جدید بسازید و نام آنرا BrowserActivity.java قرار دهید و کدهای زیر را درون آن قرار دهید.

۱۲- فایل MainActivity.java را باز کنید و کد های زیر را درون آن قرار دهید. در اینجا ما از یک ()MyWebChromeClient  برای رهگیری استفاده از WebView  استفاده می کنیم. در ()shouldOverrideUrlLoading برای تشخیص اینکه کلیک خارجی است یا خیر استفاده می کنیم، اگر خارجی باشد ما BrowserActivity را شروع می کنیم.

برنامه را اجرا کنید و برروی لینک خارجی کلیک کنید. اکنون شما میتوانید نرم افزار را به صورت زیر مشاهده کنید.

make-custom-web-view-in-android-mobcollege.ir

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

عضو می‌شوم:)

مقاله های مرتبط :

دیدگاه خود را بیان کنید :

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *