Webビューを利用したブログアプリケーションの作成

創造の理由

毎回スマホのブラウザでアクセスするより、パソコンのショートカットをクリックするようにアクセスしたらどうですか?そう思うよ
開発を開始する前に、Webビューとは何かを見てみましょう.

1.ネットワークビューとは?

Webビューは、API Level 1の機能でアクティブなレイアウトにWebコンテンツを表示します.完全に開発されたブラウザに比べて機能が不足していますが、アプリケーション専用の環境でWebページを表示する場合に便利かもしれません.

2.実施

実装前は、すべてのコードがコードで記述されていたため、javaコードが必要な場合は、コード変換器を使用して簡単に表示できます.
実装する機能は、次の4つに分類されます.
表示

Webビュー

アプリケーションバー

ボタンをダブルクリックすると、ページ上部

に移動します.
は、

、

を返します.

WebサイトFaviconは、アプリケーションイメージ

として登録されています.

2-1)Webビュー表示&Prograss Bar

非常に簡単なので、新しいプロジェクトを作成するときに作成したアクティブなデバイスに実際に使用します.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    </WebView>
      <ProgressBar
            app:layout_constraintTop_toTopOf="parent"
            android:id="@+id/pBar"
            android:layout_width="match_parent"
            android:layout_height="5dp"
            android:layout_gravity="top"
            android:scaleY="4"
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
            android:indeterminate="true"
    />
</android.support.constraint.ConstraintLayout>

レイアウトにWebビューコンポーネントを作成します.
ソースコードに移動
まずやるべきことはBuildです.ビューをgradleにバインドしてtrueにします.

buildFeatures{
	viewBinding = true
}

MainActivityバインドビューに移動

lateinit var mainActivity: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)

  //뷰 바인딩
  mainActivity = ActivityMainBinding.inflate(layoutInflater)
  setContentView(mainActivity.root)

}

WebビューのロードとProgrammar Barを実装する時です.onCreateで実装するとコードが延長されるので、新しい関数を作成します.

    fun initWebView(url: String) {
        val webView = mainActivity.webView
        val pBar = mainActivity.pBar

        //진행바 숨기기
        pBar.visibility = View.GONE

        //웹코어 설정
        webView.webViewClient = object : WebViewClient() {
            //로딩 시작시
            override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
                super.onPageStarted(view, url, favicon)
                pBar.visibility = View.VISIBLE
            }

            //로딩 종료
            override fun onPageFinished(view: WebView?, url: String?) {
                super.onPageFinished(view, url)
                pBar.visibility = View.GONE
            }
        }
        //자바스크립트 설정
        webView.settings.javaScriptEnabled = true
        //웹뷰 url 설정
        webView.loadUrl(url)
    }

一つ目はPrograssBarを隠すことです.デフォルトでは、ビューは画面に表示され続けます.GONE属性を入れます.

ネットワークのコアを設定します.Webコアが設定されていない場合は、URLをロードする際にページ移動がある場合は、携帯電話でデフォルト設定されているブラウザで移動します.Webビューを移動するには、Webコアを設定する必要があります.

WebViewClient()オブジェクトを生成すると、ロードを検証するための処理バーが表示されるかどうかが宣言されます.

最後はWebViewsettings.JavaScript Enabledのデフォルトはfalseです.ブラウザイベントはtrueに変更してこそ正常に動作します.

2-2)ダブルクリックイベント

まず、レイアウトにボタンを作成して、画面の上部をクリックできます.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <Button
            android:id="@+id/topButton"
            android:layout_width="100dp"
            android:layout_height="50dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:background="@android:color/transparent"
    />
    <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    </WebView>
    <ProgressBar
            app:layout_constraintTop_toTopOf="parent"
            android:id="@+id/pBar"
            android:layout_width="match_parent"
            android:layout_height="5dp"
            android:layout_gravity="top"
            android:scaleY="4"
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
            android:indeterminate="true"
    />
</android.support.constraint.ConstraintLayout>

実際のアプリケーションを起動すると、ユーザー画面にボタンが表示されないため、バックグラウンドに@android:color/transparenceプロパティを配置します.
クリックボタンイベントをonCreate()で作成します.

var doubleClickFlag = 0

//상단 더블클릭시 최상위 페이지로
mainActivity.topButton.setOnClickListener {
	doubleClickFlag++
	val clickRun = Runnable { doubleClickFlag = 0 }
	
    	//1번 터치시
	if (doubleClickFlag == 1) {
		//터치간격 조절
		Handler().postDelayed(clickRun, 250)
	} else {
		mainActivity.webView.pageUp(true)
	}
}

イベントをダブルクリックしていないため、イベントをクリックすることを宣言します.

クリック間隔が設定されていない場合、間隔に関係なく、Handlerが0.25秒以内に他のイベントが発生しない場合、doubleClickFlagは0になり、タッチ間隔を調整します.

2-3)後退

個別に設定しないと、後退イベントが発生したときにアプリケーションが閉じる現象が発生するので、設定する必要があります.

//뒤로가기버튼 눌려졌을 때
override fun onBackPressed() {
	//웹뷰내에서 뒤로가기
	if (mainActivity.webView.canGoBack()) {
		mainActivity.webView.goBack()
	} else {
		super.onBackPressed()
	}
}

2-4）サイトアイコンの設定

WebビューでWebサイトにアクセスするショートカットアプリケーションを作成したので、アプリケーションアイコンもFaviconでサイトに直接アクセスできます.
エンベロープで開発者ツール(F 12)を開きます.

検索faviconは、すべてのショートカットdkdlzhsrhkサイズアイコンを受け入れます.
サイズは小さいかもしれませんが、サイズは近いので、mipmap-hdpi、mipmap-mhdpi、mipmap-xhdpi、mipmap-xhdpiに入れることができます.
次のAndroidManifestxmlでアイコン画像を設定します.

android:icon="@mipmap/붙여넣은 사진"
android:roundIcon="@mipmap/붙여넣은 사진"

これでアイコンを含むWebビューアプリケーションが完了します.

の最後の部分

Webビューで簡単なアプリケーションを作成しました.
通常のアカウントログインはメールでログインするため、メール確認中にブラウザに移動するため、解決方法が見つかりません.ソーシャルログイン中にGoogleログインにはGoogle'sAuth 2.0ポリシーを表示する必要があります.
Google Webビュードキュメント
コードや構築されたアプリケーションを使用したい場合は、私の上で確認してください.
https://github.com/Huzit/VelogWebview