android - ブラウザのように動作するAndroidの実装（ズーム/パン）

Question

次のようなものを含め、Android携帯のブラウザと同じように動作するAndroidアプリケーションを作成できるかどうか疑問に思いました。

（ピンチ）ズーム
パン/スクロール

私はいくつかのことを試しました

ZoomViewは最初のポイントを処理しますが、レイアウトが画面よりも大きい場合は正しく機能しません（スクロール/パン部分が入る場合：画面の外側ではレイアウトが途切れ、内側に配置すると奇妙な動作をしますScrollView）。
パン/スクロールのためにTwoDScrollViewを試しましたが、これと上記は通常のようにうまくいきませんScrollView。
ZoomableRelativeLayoutは機能し、ピンチも実装されていますが、これは画像でのみ機能します。たとえば、クリック可能な領域は、ズーム/パンしたときにシフトしません。ですから、それもまた失敗でした。

別

WebView/を使用しますPhoneGapが、私は実際にはまたはの専門家ではありませHTML(5)んJavaScript。

質問

画面よりも大きく、完全にズームおよびパン可能、できればネイティブにすることができるレイアウトがある場合、最善のアプローチは何ですか？

私が読んだ投稿

現在の実装と欠点

View zoomableLayout = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.actuallayout, null, false);
zoomableLayout.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

zoomView = new ZoomView(this);
zoomView.addView(zoomableLayout);
LinearLayout main_container = (LinearLayout) findViewById(R.id.main_container);
main_container.addView(zoomView);

ズームされていないレイアウトが画面に収まる限り、これは非常にうまく機能します。それが大きくなり、実装する必要があるScrollView場合、機能は期待どおりまたは期待どおりではありません。たとえば、下にスクロールしてズームインすると、上までスクロールできず、ズームインしたときに表示されていたものまでしかスクロールできません。

score 1 · Accepted Answer

HTML5PhoneGapを通じて強くお勧めします。それほど難しいことではありません。

編集：いくつかの手順が必要です：

コルドバをライブラリとして追加します（私の場合はそうですcordova-2.5.0.jar）
返されるjavascript呼び出しを処理するクラスを作成します（以下をJSComm.java参照）
Webビューを使用してアクティビティを作成しますDroidGap（以下を参照）。CordovaActivity Apacheが新しいリリースで名前を変更したことに注意してください）
javascriptファイルを作成します（以下）
javascriptファイルとcordovajavascriptファイル（私の場合cordova-2.5.0.js）への参照を含むHTMLページ（以下）を作成します
にいくつかのxml（以下を参照）を追加します/res/xml/config.xml
マニフェストにアクティビティを追加することを忘れないでください。

JSComm.java

public class JSComm extends CordovaPlugin {     
    public boolean execute(final String action, final JSONArray args, CallbackContext callbackContext) {
        final CallbackContextWrapper callbackContextWrapper = new CallbackContextWrapper(callbackContext);
        if (action.equals("MyString")
            return handleIt(args.getJSONObject(0));
        else 
            return false;
    }
}

MyCordovaActivity.java

public class FormViewer extends DroidGap {
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.init();
        super.appView.getSettings().setJavaScriptEnabled(true);
        super.appView.getSettings().setSupportZoom(true);
        super.appView.getSettings().setBuiltInZoomControls(true);
        super.appView.getSettings().setDisplayZoomControls(false);
        super.appView.getSettings().setUseWideViewPort(true);
        super.appView.getSettings().setLoadWithOverviewMode(true);
        super.loadUrl("file:///" + myHTMLFilePath);
    }

    public void nextPage() {
        this.sendJavascript("nextPage()"); //example
    }
}

JSComm.js

function nextPage() {
  var inputted = trytogetinputs(); //some method: get all html input elements
  cordova.exec(
      null, //what to execute when success? Nothing in this case.
      function(args) {
          addErrorBorders(args); //What to do if fail? add some error borders in this case.
      },
      "JSComm", //name of CordovaPlugin class
      "MyString", //to identify what method was run
      [inputted] //some data you can send along.
  );
}

あなたのHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="common.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../cordova-2.5.0.js"></script><!--Cordova js file-->
    <script type="text/javascript" charset="utf-8" src="../../javacomm.js"></script><!--Your js file-->
    <script type="text/javascript" src="../../jquery-ui.min.js"></script>
    <script type="text/javascript" src="../../jquery.signature.min.js"></script>
  </head>
  <body background="0.png">...etc...</body></html>

xml

<?xml version="1.0" encoding="utf-8"?>
<!--
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
-->
<cordova>
    <!--
    access elements control the Android whitelist.
    Domains are assumed blocked unless set otherwise
     -->

    <access origin="http://127.0.0.1*"/> <!-- allow local pages -->

    <!-- <access origin="https://example.com" /> allow any secure requests to example.com -->
    <!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www -->
    <access origin=".*"/>

    <!-- <content src="http://mysite.com/myapp.html" /> for external pages -->
    <content src="index.html" />

    <log level="DEBUG"/>
    <preference name="useBrowserHistory" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="fullscreen" value="false" />
<plugins>
    <plugin name="App" value="org.apache.cordova.App"/>
    <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
    <plugin name="Device" value="org.apache.cordova.Device"/>
    <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
    <plugin name="Compass" value="org.apache.cordova.CompassListener"/>
    <plugin name="Media" value="org.apache.cordova.AudioHandler"/>
    <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
    <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
    <plugin name="File" value="org.apache.cordova.FileUtils"/>
    <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
    <plugin name="Notification" value="org.apache.cordova.Notification"/>
    <plugin name="Storage" value="org.apache.cordova.Storage"/>
    <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
    <plugin name="Capture" value="org.apache.cordova.Capture"/>
    <plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
    <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
    <plugin name="Echo" value="org.apache.cordova.Echo" />
    <plugin name="Globalization" value="org.apache.cordova.Globalization"/>
    <plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser"/>
    <plugin name="JSComm" value="com.example.application.JSComm"/>
</plugins>
</cordova>

android - ブラウザのように動作するAndroidの実装（ズーム/パン）

1 に答える 1

Related

Reference