نمایش نتیجه اجرای کد HTML در یک activity ، با WebView در برنامه نویسی اندروید
در این آموزش، یک برنامه اندروید می سازیم که اولین صفحه آن (activity اصلی)، یک WebView است که برای مشاهده نتیجه اجرای یک سری کد HTML به کار می رود. دقت کنید که هیچ فایلی برای کدهای HTML ، به کار نخواهیم برد و کدهای HTML را درون خود فایل java مربوط به activity می نویسیم.
در برنامه eclipse ، ابتدا یک پروژه اندروید با نام Kelidestan.com_WebView_HTML می سازیم (نام package را برابر com.kelidestan.webview_html قرار می دهیم. نام activity اصلی را برابر MainActivity انتخاب می کنیم و فایل xml متناظر آن را هم، activity_main قرار می دهیم).
ابتدا فایل activity_main.xml را باز می کنیم. این فایل، به صورت گرافیکی، همانند شکل زیر می باشد :
TextView موجود در فایل xml را حذف می کنیم و سپس، مطابق گزینه های مشخص شده در شکل زیر، یک WebView را به درون فایل xml وارد می کنیم :
شکل حاصل، به صورت زیر خواهد بود :
WebView را بزرگتر می کنیم (با کشیدن مرزهای آن) :
در properties مربوط به TextView ، نگاه می کنیم تا ببینیم id مربوط به TextView چیست :
بنابراین id مربوط به TextView ، برابر webView1 می باشد.
خوب، اکنون فایل MainActivity.java که همان activity اصلی می باشد را باز می کنیم. کدهای آن به صورت زیر می باشد :
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
کدها را به صورت زیر تغییر می دهیم :
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.webkit.WebView;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webView = (WebView) findViewById(R.id.webView1);
String html_code = "<html><body>some <b>text<b>. <p>this is a paragraph.</p></body></html>";
webView.loadData(html_code, "text/html", null);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
کد HTML را در رشته ای با نام html_code ذخیره کرده ایم و سپس آن را در WebView اجرا کرده ایم.
برنامه اندروید آماده است و می توانید آن را به شیوه دلخواه خود، اجرا کنید و نتیجه را ببینید.
با اجرای برنامه اندروید، بر روی یک گوشی، صفحه زیر نمایش داده می شود :
فایل های پروژه اندروید را می توانید از لینک های زیر دریافت کنید :
محسن
admin سلام.
در این مبحث، صرفا چگونگی نمایش حاصل اجرای کد HTML در یک WebView را شرح دادیم، اما اگر متن به هم ریخته است، باید خود کدهای HTML را تصحیح کنید.
برای این منظور، می توانید به آموزش های HTML و CSS مراجعه نمایید :
آموزش HTML
آموزش CSS
به عنوان مثال، یک چارچوب استاندارد و مناسب برای نوشتن متن فارسی در بین کدهای HTML ، چارچوب زیر می باشد :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
که بخش مهم آن برای صحیح دیده شدن متن فارسی، خط زیر می باشد :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
بقیه موارد، شامل راست چین بودن متن، سمت قرارگیری آن و ... را می توانید با استفاده از ویژگی های CSS تعیین کنید.
اگر حجم کدهای HTML زیاد شود، می توانید آن را در یک فایل html ذخیره کرده و سپس در WebView نمایش بدهید :
کلید شماره 2633
مهرداد واسه بهم ریخته نشدنش باید با فرمت utf8 کد بزنی
علی سلام
میشه بگین در b4a چطور میشه فونت یا سایز رو تغییر داد؟
با این فرض که کدهای html ما در یک فایل قرار داره.
admin سلام.
معمولا به دو صورت می توان مشخصات فایل HTML نمایش داده شده در WebView را تغییر داد.
یکی از طریق کدهای java و اعمال تغییراتی به کل متن های نمایش داده شده در WebView است (مثل تغییر اندازه متن) که مثالی از آن را در کلید شماره 257 ذکر کردیم. اکنون باید ببینید که کد مورد نظر در برنامه b4a عمل می کند یا خیر (بنده در زمینه b4a اطلاعی ندارم).
روش دوم هم، استفاده از کدهای CSS برای تغییر ویژگی های های به کار رفته در فایل HTML می باشد. دقت کنید که شما تنها با ساخت یک فایل CSS و سپس ارجاع به آن در فایل های HTML ، می توانید مشخصات تعداد زیادی فایل HTML را به صورت همزمان تغییر بدهید. در این زمینه، به بخش آموزش CSS مراجعه نمایید :
آموزش CSS
مهرداد درود،
نمیدونم با چه زبونی از شما نویسنده این مطلب و عوامل این سایت، سپاس گذاری کنم، خیلی ممنونم بابت این مطلب مفید و گرانقدر.
