آموزش برنامه نویسی اندروید (Android)
۴۱۹ آموزش
نمایش دسته بندی ها (۴۱۹ آموزش)

نمایش نتیجه اجرای کد 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 را باز می کنیم. این فایل، به صورت گرافیکی، همانند شکل زیر می باشد :

نمایش نتیجه اجرای کد HTML در یک activity ، با WebView در برنامه نویسی اندروید

TextView موجود در فایل xml را حذف می کنیم و سپس، مطابق گزینه های مشخص شده در شکل زیر، یک WebView را به درون فایل xml وارد می کنیم :

نمایش نتیجه اجرای کد HTML در یک activity ، با WebView در برنامه نویسی اندروید

شکل حاصل، به صورت زیر خواهد بود :

نمایش نتیجه اجرای کد HTML در یک activity ، با WebView در برنامه نویسی اندروید

WebView را بزرگتر می کنیم (با کشیدن مرزهای آن) :

نمایش نتیجه اجرای کد HTML در یک activity ، با WebView در برنامه نویسی اندروید

در properties مربوط به TextView ، نگاه می کنیم تا ببینیم id مربوط به TextView چیست :

نمایش نتیجه اجرای کد HTML در یک activity ، با WebView در برنامه نویسی اندروید

بنابراین id مربوط به TextView ، برابر webView1 می باشد.

خوب، اکنون فایل MainActivity.java که همان activity اصلی می باشد را باز می کنیم. کدهای آن به صورت زیر می باشد :


package com.kelidestan.webview_html;

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;
        }

}

کدها را به صورت زیر تغییر می دهیم :


package com.kelidestan.webview_html;

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 اجرا کرده ایم.

برنامه اندروید آماده است و می توانید آن را به شیوه دلخواه خود، اجرا کنید و نتیجه را ببینید.

با اجرای برنامه اندروید، بر روی یک گوشی، صفحه زیر نمایش داده می شود :

نمایش نتیجه اجرای کد HTML در یک activity ، با WebView در برنامه نویسی اندروید

فایل های پروژه اندروید را می توانید از لینک های زیر دریافت کنید :

نویسنده علیرضا گلمکانی
شماره کلید 226
گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 6 6 0
محسن
۱۳۹۵/۰۹/۲۸
۲۲:۰۰

با روشی که توضیح دادید متن فارسی به صورت کاراکترهای بهم ریخته نمایش داده میشه
لطفا اگر راهکاری سراغ دارید کمکمون کنید .
قصد دارم متن فارسی به صورت تراز شده داشته باشم

admin
۱۳۹۵/۱۰/۰۱
۰۶:۵۷

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





به عنوان مثال، یک چارچوب استاندارد و مناسب برای نوشتن متن فارسی در بین کدهای HTML ، چارچوب زیر می باشد :


که بخش مهم آن برای صحیح دیده شدن متن فارسی، خط زیر می باشد :


بقیه موارد، شامل راست چین بودن متن، سمت قرارگیری آن و ... را می توانید با استفاده از ویژگی های CSS تعیین کنید.

اگر حجم کدهای HTML زیاد شود، می توانید آن را در یک فایل html ذخیره کرده و سپس در WebView نمایش بدهید :



مهرداد
۱۳۹۸/۰۳/۱۰
۱۵:۲۰

واسه بهم ریخته نشدنش باید با فرمت utf8 کد بزنی

علی
۱۳۹۵/۱۲/۲۳
۰۹:۱۲

سلام
میشه بگین در b4a چطور میشه فونت یا سایز رو تغییر داد؟
با این فرض که کدهای html ما در یک فایل قرار داره.

admin
۱۳۹۵/۱۲/۲۴
۱۱:۳۷

سلام.
معمولا به دو صورت می توان مشخصات فایل HTML نمایش داده شده در WebView را تغییر داد.
یکی از طریق کدهای java و اعمال تغییراتی به کل متن های نمایش داده شده در WebView است (مثل تغییر اندازه متن) که مثالی از آن را در ذکر کردیم. اکنون باید ببینید که کد مورد نظر در برنامه b4a عمل می کند یا خیر (بنده در زمینه b4a اطلاعی ندارم).
روش دوم هم، استفاده از کدهای CSS برای تغییر ویژگی های های به کار رفته در فایل HTML می باشد. دقت کنید که شما تنها با ساخت یک فایل CSS و سپس ارجاع به آن در فایل های HTML ، می توانید مشخصات تعداد زیادی فایل HTML را به صورت همزمان تغییر بدهید. در این زمینه، به بخش آموزش CSS مراجعه نمایید :



مهرداد
۱۳۹۸/۰۳/۱۰
۱۵:۲۲

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

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)