서비스를 해야할 일이 있어 앱을 만들까 하다가 웹 페이지를 만들어서 웹과 모바일 양쪽에서 사용 하는게 좋을것
같아 간단한 테스트를 해봅니다.
일단 껍데기만 있는 앱을 하나 만들어 봅니다.
1. 프로젝트 생성
이런! 만들고 나니 Web을
WEb으로 하였군요. 아무리 구상 단계지만 너무 성의가 없네요.
어째든 샘플이니까 그냥 계속 진행 합니다.
Empty Activity를 선택하고 나머지는 그냥 Next 버튼을 클릭 합니다.
2. 레이아웃 수정
Layout을 수정할 차례군요.
기본으로 생성되는 Hello World는 삭제하고
좌측 Palette에 있는 Widgets의
WebView를 찍어서 우측에 넣어 줍니다.
단순하지만 원하는 모양 입니다.
3. 코딩
이제 코딩을 시작 합니다.
3.1 AndroidManifest.xml
인터넷을 사용하려면 권한이 있어야 하니 권한을 추가 합니다.
<uses-permission android:name="android.permission.INTERNET"
/>
3.2 activity_main.xml
Layout에 추가한 WebView에
ID를 생성해 줍니다. 작업할 때 생성했으면 넘어갑니다.
<WebView
android:id="@+id/webvw"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp" />
3.3 MainActivity.java
마지막으로 웹 페이지가 나오도록 코딩을 완료 합니다.
webView = (WebView) findViewById(R.id.webvw);
webView.setWebViewClient(new WebViewClient());
webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.loadUrl("https://copycoding.tistory.com");
4. 결과
https://copycoding.tistory.com를
호출한 결과를 볼까요?
잘 나오는 군요. 가상 서버에서 작업 중인 로컬 웹 서버를 호출해
보았습니다.
webView.loadUrl("http://192.168.1.118:8080/tistory/");
예쁜 이미지만 입히면 되겠습니다. 이제 열심히 일만 하면 되겠군요.
5. 전체 소스
5.1 AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="copycoding.tistory.mobileweb">
<uses-permission android:name="android.permission.INTERNET"
/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN"
/>
<category android:name="android.intent.category.LAUNCHER"
/>
</intent-filter>
</activity>
</application>
</manifest>
5.2 activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:id="@+id/webvw"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp" />
</android.support.constraint.ConstraintLayout>
5.3 MainActivity.java
package copycoding.tistory.mobileweb;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
private WebView
webView;
private WebSettings webSettings;
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView =
(WebView) findViewById(R.id.webvw);
webView.setWebViewClient(new WebViewClient());
webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.loadUrl("https://copycoding.tistory.com");
}
}