行为类似于浏览器的 Android 实现(缩放/平移)

标签 android layout zooming pan

我想知道是否有可能创建一个 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,功能就不如所希望或预期的那样。例如,如果我向下滚动并放大,则无法一直向上滚动,只能滚动到放大时可见的部分。

最佳答案

我强烈建议通过 PhoneGap 使用 HTML5。没那么难。

编辑:需要几个步骤:

  1. 将 cordova 添加为库(在我的例子中是 cordova-2.5.0.jar)
  2. 创建一个类来处理返回的 javascript 调用(参见下面的 JSComm.java)
  3. 使用 webview DroidGap 创建一个 Activity (见下文);请注意,Apache 在较新的版本中将其重命名为 CordovaActivity)
  4. 创建一个 javascript 文件(如下)
  5. 创建一个 HTML 页面(如下),其中包括对您的 javascript 文件和 cordova javascript 文件的引用(在我的例子中是 cordova-2.5.0.js)
  6. /res/xml/config.xml 中添加一些 xml(见下文)
  7. 不要忘记将您的 Activity 添加到 list 中。

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 实现(缩放/平移),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15359322/

相关文章:

android - Firebase异常 : Failed to bounce to type

java - JPanel & 组件自动改变位置

android - 从android中的通知栏打开内部 Activity

android - 如何在不使用 layout_weight 的情况下水平平均划分两个按钮?

java - HttpURLConnection 不适用于 Android

java - 在 Android 中更改按钮单击的布局

android - 如何将多个项目放在 ListView 的同一行?

javascript - D3 v4 : Reset zoom state

css - 高分辨率屏幕上的网站太小

java - Android 中的双击缩放