개요
WebView란 애플리케이션에서 웹페이지를 보여주고자 할 때 사용한다.
주로 사용자 가이드, 서비스 이용약관, 이벤트 페이지 같은 업데이트해야 할 정보가 있는 경우이다.
특히 스크롤 형태의 웹페이지를 애플리케이션에서 WebView 전체 화면으로 사용한다면 문제가 없지만,
스크롤이 끝난 웹페이지 하단에서 버튼을 사용하고 싶다면 어떻게 처리하는지 다루고자 한다.
방법
NestedScrollView를 사용하는 것이다!
- 최상위 레이아웃을 NestedScrollView로 감싸고
fillViewport 옵션 활성화 (웹페이지 높이(스크롤 여부)와 상관없이 항상 버튼 하단에 위치시키기 위함) - 그다음
- WebView의 height는 wrap_content
- Button의 위치는 상단 제약으로 WebView 아래 / 하단 제약으로 부모 뷰 하단
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="@+id/webView_test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button_test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/webView_test"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>테스트를 위해 두 개의 이미지를 포함한 html을 만들어
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<p>1. 클린 아키텍처</p>
<br>
<img src="https://bimage.interpark.com/partner/goods_image/1/1/2/2/314531122g.jpg">
<br>
<p>2. 테스트 주도 개발</p>
<img src="https://bimage.interpark.com/partner/goods_image/8/9/8/7/214078987g.jpg">
</body>
</html>WebView를 통해 load 했다.
webViewTest.loadUrl("file:///android_asset/page.html")
이 방법을 사용하면,
안드로이드 웹뷰에서 로딩되는 웹페이지의 모든 스크롤이 내려갔을 때 하단에 버튼이 위치하게 된다.
'Android' 카테고리의 다른 글
| [Android] 깔끔한 Log를 사용하여 생산성 향상하기 (0) | 2022.02.26 |
|---|---|
| [Android] RecyclerView를 사용해야 하는 이유 (feat. ListView) (0) | 2022.02.20 |
| [Android] Realm 데이터베이스 사용하기 (0) | 2021.09.15 |
| [Android] Custom Dialog 사용하여 ID, PW 받아오기 (0) | 2021.09.02 |
| [Android] 유용한 Plugin 소개 (JsonToKotlinClass) (0) | 2021.08.29 |
