[안드로이드] 하이브리드 앱 만들기(hybrid)

[ 안드로이드 하이브리드 앱 만들기 ]

안녕하세요. 오늘은 안드로이드 하이브리드 앱을 만드는 기초에 대해서 설명 드리겠습니다.

기초 설정 및 앞으로 기능 하나 하나 추가 해 볼 생각입니다.

자 처음으로 하이브리드 앱을 만들기 위해서는 인터넷을 허용 해야 합니다.

아래와 같이 AndroidManifest.xml 에 권한을 추가 해주면 됩니다.

추가 위치는 <application></application> 태그 위에 추가 해주시면 됩니다.

 
 <uses-permission android:name="android.permission.INTERNET"></uses-permission> <!-- 인터넷 허용 -->
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission> <!-- 네트워크 상태 -->
 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission> <!-- 와이파이 허용 -->
 

다음으로 webview를 추가 해줍니다.

res -> layout -> activity_main.xml에 아래와같이 웹뷰를 추가 해줍니다.

 
<WebView
   android:id="@+id/testWebview"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
</WebView>
 

위와 같이 testWebview를 하나 생성 해줍니다.

다음으로는 MainActivity.java로 이동 합니다. 아래와 같이 MainActivity에 추가 해줍니다.

 
public class MainActivity extends AppCompatActivity {
 
    private WebView mWebView;
 
    // 웹뷰 url 셋팅
    private final String webViewUrl = "https://www.naver.com";
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // 웹뷰 세팅
        mWebView = findViewById(R.id.webView); // 레이아웃 연결
 
        mWebView.getSettings().setUseWideViewPort(true); // wide viewport를 사용하도록 설정
        mWebView.getSettings().setJavaScriptEnabled(true); // 자바스크립트 사용 허용
        mWebView.getSettings().setLoadWithOverviewMode(true); // 웹 컨텐츠가 웹뷰보다 클 경우 스크린 크기에 맞게 조정
 
 
        mWebView.setWebViewClient(new WebViewClient(){}); // 웹뷰를 웹뷰레이아웃 내에서 사용하기 위해서 설정.
 
        // 웹뷰로 보여줄 url주소 세팅
        mWebView.loadUrl(webViewUrl);
    }
 
}
 

위와 같이 설정 후 앱을 빌드하면 아래와 같이 내부 webview로 네이버가 켜집니다.

오늘은 간단하게 webview를 이용하여 하이브리드 앱을 만들어 봤습니다. 궁금하신점이 있으면 댓글 남겨주세요.

- 추천글

[ lombok, springboot ] 스프링부트에 lombok()롬복 설정 및 사용설명 (간단)

[ springboot ] 스프링부트 스케쥴러 설정 방법 및 예제 (초간단)

[ Android ] 안드로이드 setText() 텍스트 변경 이벤트 소스 및 설명

[ Android ] 안드로이드 클릭 이벤트 소스 및 설명(간단)