آموزش استفاده از WebView – اندروید استودیو
سلام
ابزاری به نام WebView در اندروید استودیو داریم که اکثرا در بیشتر پلتفرم ها و محیط های برنامه نویسی نظیر بیسیک فور اندروید وجود داره، توسط این ابزار میتونیم یک آدرس اینترنتی یا آدرس صفحه HTML رو به صورت آفلاین لود کنیم و در برنامه به کاربر نشون بدیم، از این ابزار برای مثال میتونید برای ساخت کتاب، برای نشان دادن یک سایت به کاربر و … استفاده کنید، در ادامه همراه بپرسم باشید تا آموزش رو شروع کنیم.
آموزش:
آموزش رو دو بخش میکنیم تا مفهومی تر باشد، در بخش اول قصد داریم تا یک آدرس اینترنتی را به صورت آنلاین لود کنیم و در بخش دوم یک صفحه HTML را به صورت آفلاین لود میکنیم و در برنامه به کاربر نمایش میدیم.
پروژه ی جدیدی بسازید و نامش را برای مثال WebView بذارید و همراه ما باشید …
بخش اول: لود کردن آدرس اینترنتی به صورت آنلاین
- قبل از هر کاری نیاز داریم تا دسترسی استفاده از اینترنت را به برنامه بدیم، برای این کار فایل AndroidManifest.xml را باز کنید و کد زیر را اضافه کنید.
|
۱ |
<uses-permission android:name="android.permission.INTERNET"/> |
کد بالا دسترسی استفاده از اینترنت را به برنامه میدهد، اگر دسترسی ندهیم برنامه نیمتواند آدرس صفحه اینترنتی را باز کند.
- سپس به فایل xml اکتویتی مورد نظرمون میریم تا یک webview تعریف کنیم(فرض میکنیم در اکتویتی پیشفرض یعنی activity_main.xml قرار است این کار را انجام دهیم).
|
۱ ۲ ۳ ۴ |
<WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="wrap_content"/> |
- حال می بایست در فایل جاوای اکتویتی مورد نظر، Webview را تعریف و آدرس صفحه اینترنتی مورد نظر را بدیم.
|
۱ ۲ |
WebView webView = (WebView) findViewById(R.id.webView); webView.loadUrl("https://beporsam.ir"); |
- اکنون اگر برنامه را اجرا کنید خواهید دید که سایت بپرسم به نمایش در خواهد آمد(چون در webview گفتیم که سایت بپرسم به نمایش در بیاد)
لود شدن سایت بپرسم در برنامه
آموزش ساده ای بود، در دو مرحله تونستیم آدرس صفحه مورد نظرمون رو در برنامه به نمایش بزاریم، ولی اگر هنوز هم متوجه نشدید و مشکلی دارید میتونید در ادامه کدهای سه فایل برنامه، یعنی فایل های AndroidManifest.xml, activity_main.xml,MainActivity.java را در جدول زیر دانلود کنید.
|
نام فایل |
توضیح |
کد |
|
AndroidManifest.xml |
در این فایل دسترسی استفاده از اینترنت را به برنامه دادیم(خط ۴) |
|
|
activity_main.xml |
در این فایل یک webview ایجاد کردیم(خط ۱۲-۹) |
|
|
MainActivity.java |
در این فایل کدهای برنامه را نوشتیم(خط ۱۴و۱۵) |
بخش دوم: لود کردن آدرس اینترنتی به صورت آفلاین
در این روش دیگر نیازی به اضافه کردن کد دسترسی به اینترنت نداریم، همانطور که اطلاع دارید، صفحات سایت ها به صورت HTML است که توسط مرورگر خوانده می شود، کاری که ما میخوایم انجام بدیم به این صورت است که صفحات HTML با محتوای دلخواه را ایجاد میکنیم و سپس این صفحات را در Webview به نمایش در می آوریم، در ادامه با چگونگی کار آشنا می شویم.
- قبل از هر چیز نیاز به یک صفحه HTML داریم که من یک نمونه صفحه طراحی کردم که میتونید دانلود(کلیک کنید) کنید.
اگر با چگونگی ساخت صفحات HTML آشنایی ندارید، پیشنهاد میکنیم آموزش های HTML و CSS که در وب سایت قرار دارند را مطالعه کنید.
همچنین با استفاده از ابزار ویرایشگر و ساخت آنلاین کدهای HTML که در بپرسم قرار دارد میتوانید صفحات HTML خود را آنلاین طراحی کنید(برای دسترسی به این ابزار، کلیک کنید)
- برای اینکه فایل های HTML را در برنامه لود کنیم، نیاز داریم تا این فایل ها را در پوشه ای به نام assets قرار دهیم، پس برای این کار در مسیر src/main پوشه ای به نام assets بسازید.
assets
در اندروید استودیو روی در قسمت پروژه، روی پوشه app راست کلیک و New را انتخاب و سپس از بخش Folder گزینه Assets Folder را انتخاب کنید(سپس فایل html را در این پوشه قرار دهید).
ساخت پوشه assets
- سپس از کد زیر برای لود کردن فایل HTML استفاده میکنیم.
|
۱ |
webView.loadUrl("file:///android_asset/beporsam.html"); |
کد بالا را جایگزین کد زیر در بخش اول آموزش کنید، تا بجای لود آدرس اینترنتی، فایل html موجود در پوشه assets لود شود.
|
۱ |
webView.loadUrl("https://beporsam.ir"); |
- اکنون اگر برنامه را اجرا کنید، خواهید دید که فایل HTML ساخته شده در برنامه نمایش داده میشود.
نمایش دادن فایل HTML در برنامه
آموزش استفاده از webview تا اینجا به پایان رسید، ولی در ادامه میخوایم کدهایی رو بدیم که با استفاده از این کدها میتونید از این ابزار به صورت حرفه ای تر کار بکشید!
فعال/غیر فعال کردن جاوا اسکرپیت
برای فعال یا غیر فعال کردن کدهای جاوا اسکریپت در صفحه ای که لود میکنید، میتونید از کد زیر استفاده کنید.
|
۱ |
webView.getSettings().setJavaScriptEnabled(true); |
true به معنای فعال بودن و false به معنای غیر فعال بودن
فعال/غیر فعال کردن زوم
اگر دقت کنید بعضی صفحات HTML را که در گوشی باز میکنید پایین صفحه مورد نظر دو علامت ذره بین قرار داره که از یکی برای زوم کردم و از یکی برای دور شدن از زوم استفاده میشه، با استفاده از کدهای زیر میتونید این قابلیت رو مدیریت کنید.
|
۱ ۲ ۳ |
webView.getSettings().setSupportZoom(true); webView.getSettings().setBuiltInZoomControls(true); webView.getSettings().setDisplayZoomControls(true); |
true به معنای فعال بودن و false به معنای غیر فعال بودن
فکر نکنم مبحث دیگه ای مونده باشه و نگفته باشم، این آموزش هم نیز همینجا به پایان می رسونم.
برای مشاهده ی دیگر آموزش های اندروید استودیو، کلیک کنید.
امیدوارم مفید واقع بوده باشه 🙂
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید