1335 views 7 comments

Android Tips : 8 ขั้นตอนง่ายๆกับการสร้าง Webview

by on พฤษภาคม 14, 2010
 


.

เห็นหลายคนถามถึงวิธีการสร้าง Webview ก็เลยตั้งใจอยากเผยแพร่ความรู้ตรงนี้  จริงๆแล้ว Webview เป็นอะไรที่ง่ายแต่ไม่ค่อยมีใครทำกัน   สำหรับมือใหม่อาจยากหน่อย (ผมก็มือใหม่เพราะอ่านภาษาจาวาไม่ออก)  ความยากนั้นอยู่ที่ตำแหน่งการใส่โค้ดครับ  ใส่ถูกก็ใช้ได้  กว่าผมจะทำได้เพราะใส่โค้ดถูกตำแหน่ง  และต้องเป็นขั้นตอน หากทำลัดแล้วแม้จะใส่โค้ดถูกก็ยัง Error  แต่ถ้าทำตามขั้นตอนดังนี้ไม่ error แน่นอนครับ  …สำหรับเครื่องมือที่ใช้เป็น Esclipse ของ MOTODEV และเขียนโค้ดด้วย Android 1.6  วิธีการมีดังนี้

.

1. สร้างโปรเจคขึ้นมาใหม่   File->New->Project->Android->Android Project

.

2. ตั้งค่าโปรเจคดังนี้ หรือเป็นชื่อโปรเจคตัวเอง โดยเปลี่ยน TwittA88 เป็นชื่อที่ต้องการ

.

Project Name : TwittA88
Application name : TwittA88
Package name : com.TwittA88
Create Activity : TwittA88
Min SDK Version : 4 (android 1.6)

.

.

.

3.  เปิดไฟล์ layout (res/layout/main.xml) ขึ้นมาแล้วเขียนโค๊ดดังนี้

.
โค๊ด:

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”>

<WebView
android:id=”@+id/webview”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
/>
</LinearLayout>

.

.

***เสร็จขั้นตอนนี้ให้ทำการ save โดยการกด X ตามภาพและกด Yes เพื่อ Save

.

.

4. ทำการตั้งค่า AndroidManifest.xml เพื่อให้เข้าถึง Internet โดยเพิ่มโค้ดเพิ่มเข้าไปที่ child ของ element  (เสร็จขั้นตอนนี้แล้วให้ Save)

.
โค๊ด:

<uses-permission android:name=”android.permission.INTERNET” />

.

.

5. เปิดไฟล์ HelloWebView.java (src/com.example/HelloWebView.java)  ใส่โค้ดลงไป  (***ขั้นตอนนี้ห้าม Save)
โค๊ด:

public class HelloWebView extends Activity {
WebView webview;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

}
}

6. เมื่อวางโค้ดแล้วให้กด Ctrl+shift+o (ตัวโอ)  ***ขั้นตอนนี้ ห้าม Save

.

7.เพิ่มโค๊ดด้านล่างนี้ไปที่ function onCreate ในไฟล์ HelloWebView.java ***เสร็จขั้นตอนนี้แล้วค่อย Save

.

ใส่โค้ดเสร็จเปลี่ยนชื่อ Class ให้ตรงกับชื่อโปรเจค  และเปลี่ยนชื่อเว็บไซท์เป็นชื่อเว็บที่ต้องการ  ***ชื่อเว็บต้องเรียบง่ายจึงจะได้ผล ตามตัวอย่างในวงแดงชื่อเว็บดูรกมันจะไม่ได้  เคล็ดลับอีกอย่างในการใส่ชื่อเว็บ ต้องนำหน้าด้วย www ทุกครั้ง  เช่น  http://app.lovemaq.com/ ต้องเปลี่ยนเป็น  http://www.app.lovemaq.com/

.

โค๊ด:

webview = (WebView) findViewById(R.id.webview);
webview.getSettings().setJavaScriptEnabled(true);
webview.loadUrl(“http://www.google.com”);

.

.

8 . Export ออกมาเป็น apk พร้อมทำการ sign และติดตั้งลงเครื่องได้เลยครับ  >> วิธีการ Export สำหรับ Motodev ให้เข้าไปที่  MOTODEV >> Export Android Application Using Studio for Android

.

จากนั้นก็เลือก Project ที่เราต้องการ Export  แล้วเอาเครื่องหมาย Signing ออก  แล้วกด Finish  (ถ้าอยากรู้ว่า apk เราไปอยู่ไหนให้ดูที่ Destination ในวงสีส้ม)

.

ต้องการดูต้นฉบับได้ที่นี่
http://developer.android.com/guide/tutorials/views/hello-webview.html

.

หรือจะดาวโหลดไฟล์ไปลอง  แล้วเปลี่ยนแค่ชื่อเว็บ  Download