AndroidのWebViewで画面の右横にできる隙間を消す方法(スクロールバー表示領域を消す方法)

A Sweeter Jelly Bean!
A Sweeter Jelly Bean! / Android Developers

 WebViewを使ってhtmlを以下のコードで表示すると、画面の右横に隙間ができてしまう。画面の幅を「screen.width * window.devicePixelRatio」で取得してみると、使用端末(007SHJ)の画面幅は「480px」のはずが、「469.5px」になっている。

 この「10.5px」の隙間を消す方法を以下に紹介する。

[java firstline=”10″ highlight=”” title=”MainActivity.java”]
public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

WebView wv = (WebView)findViewById(R.id.screen1);
wv.getSettings().setJavaScriptEnabled(true);
wv.loadUrl("file:///android_asset/index.html");
}

}
[/java]
android01
(※007SH(007SHJ)でスクリーンショット(画面キャプチャ)を撮る方法

■解決方法

 この隙間の正体は、「スクロールバーの表示領域」である。これはWebViewのスクロールバー領域なので、HTMLやCSSでは消すことができない。その為、これを消すAPIがAndroidには用意されている。おっと、消すというのは適切ではないかもしれない、スクロールバー専用の表示領域を設けるのではなく、”スクロールバーをWebViewの上に乗せる”APIだ。

リファレンス:

public void setVerticalScrollbarOverlay (boolean overlay)

Added in API level 1
Specifies whether the vertical scrollbar has overlay style.

Parameters
overlay true if vertical scrollbar should have overlay style
http://developer.android.com/intl/ja/reference/android/webkit/WebView.html
#setVerticalScrollbarOverlay(boolean)

[browser-shot width=”240″ url=”http://developer.android.com/intl/ja/reference/android/webkit/WebView.html#setVerticalScrollbarOverlay(boolean)”]

■解決コード

 ではこのAPIを使ってみよう。

[java firstline=”10″ highlight=”22″ title=”MainActivity.java”]
public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

WebView wv = (WebView)findViewById(R.id.screen1);
wv.setVerticalScrollbarOverlay(true);
wv.getSettings().setJavaScriptEnabled(true);
wv.loadUrl("file:///android_asset/index.html");
}

}
[/java]

■解決したスクリーンショット(画面キャプチャ)

 画面の幅を「screen.width * window.devicePixelRatio」で取得してみると、「480px」とピッタシになった。スクリーンショット(画面キャプチャ)も、まったく隙間が無い!

android02
(※007SH(007SHJ)でスクリーンショット(画面キャプチャ)を撮る方法

■別の方法

 リファレンスを読んでいると、以下も有効なようだ。実際、以下の方法でも前述と同様の結果となった。

リファレンス:

public static final int SCROLLBARS_INSIDE_OVERLAY

Added in API level 1
The scrollbar style to display the scrollbars inside the content area, without increasing the padding. The scrollbars will be overlaid with translucency on the view’s content.

Constant Value: 0 (0x00000000)
http://developer.android.com/intl/ja/reference/android/view/View.html
#SCROLLBARS_INSIDE_OVERLAY

[browser-shot width=”240″ url=”http://developer.android.com/intl/ja/reference/android/view/View.html#SCROLLBARS_INSIDE_OVERLAY”]
[java firstline=”10″ highlight=”22″ title=”MainActivity.java”]
public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

WebView wv = (WebView)findViewById(R.id.screen1);
wv.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
wv.getSettings().setJavaScriptEnabled(true);
wv.loadUrl("file:///android_asset/index.html");
}

}
[/java]

(アシベズヘア@ashibehair_m

━ 関連記事 ━╋╋

  • AndroidのWebViewで画面の右横にできる隙間を消す方法(スクロールバー表示領域を消す方法)
  • Androidアプリのランチャーアイコンを「Android風アイコンジェネレータ」で作成する
  • adb経由でAndroidアプリ(apkファイル)を手動でインストール/アップデートする方法
  • Androidのadbコマンドを気軽に使えるようにする方法(adbのPATHを通す方法)
  • Androidでアプリ開発をする為に、自分のパソコンが「32ビット版」か「64ビット版」かを確認しておく
  • アスタの「アイコン型広告」の文字色を変更する方法(Androidアプリ)
  • アスタの「アイコン型広告」の背景色を変更する方法(Androidアプリ)
  • 成長著しい「アイコン型広告」(アスタ)をAndroidアプリに導入する方法
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【育成シミュレーション篇】 Androidアプリ「ゴマッチョの目指せ!五輪ビルダー ~7年後のオリンピックへ~」をリリース!
  • ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【ツール篇】 RPGなどゲームでキャラクター名に困ったら使うAndroidアプリ「ゴマッチョの気まぐれ ~キャラ名付け~」をリリース!
  • 007SH(007SHJ)でスクリーンショット(画面キャプチャ)を撮る方法
  • AndroidのWebViewで画面の右横にできる隙間を消す方法(スクロールバー表示領域を消す方法)」への11件のフィードバック

    1. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【ツール篇】 RPGなどゲームでキャラクター名に困ったら使うAndroidアプリ「ゴマッチョの気まぐれ ~キャラ名付け~」をリ

    2. ピンバック: materialize.jp » adbコマンドを気軽に使えるようにする方法(adbのPATHを通す方法)

    3. ピンバック: materialize.jp » 成長著しい「アイコン型広告」(アスタ)をAndroidアプリに導入する方法

    4. ピンバック: materialize.jp » Androidスマートフォンでファミコン(NES)を愉しむ! エミュレータ「Nesoid」のインストールと使用方法

    5. ピンバック: materialize.jp » アスタの「アイコン型広告」の文字色を変更する方法(ANDROIDアプリ)

    6. ピンバック: materialize.jp » 007SH(007SHJ)でスクリーンショット(画面キャプチャ)を撮る方法

    7. ピンバック: materialize.jp » Androidでアプリ開発をする為に、自分のパソコンが「32ビット版」か「64ビット版」かを確認しておく

    8. ピンバック: materialize.jp » Androidアプリのランチャーアイコンを「Android風アイコンジェネレータ」で作成する

    9. ピンバック: materialize.jp » Androidスマートフォンでスーパーファミコン(SNES)を愉しむ! エミュレータ「SNesoid」のインストールと使用方法

    10. ピンバック: adb経由でAndroidアプリ(apkファイル)を手動でインストール/アップデートする方法 | materialize.jp

    11. ピンバック: Androidのadbコマンドを気軽に使えるようにする方法(adbのPATHを通す方法) | materialize.jp

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です