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

时间:2013-03-12 10:58:10

标签: android layout zoom 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);   

这非常好用,只要unzoomed布局适合屏幕。一旦它变大,我需要实现ScrollView,功能就不如预期或预期的那样。例如,如果我向下滚动并放大,我无法向上滚动,只能向我放大时可见的内容滚动。

1 个答案:

答案 0 :(得分:1)

我强烈建议通过PhoneGap HTML5。这并不难。

编辑:需要几个步骤:

  1. 将cordova添加为库(在我的情况下为cordova-2.5.0.jar
  2. 创建一个将处理返回的javascript调用的类(请参阅下面的JSComm.java
  3. 使用网络视图DroidGap创建活动(见下文);请注意Apache在较新版本中将其重命名为CordovaActivity
  4. 创建一个javascript文件(如下)
  5. 创建一个HTML页面(下方),其中包含对您的javascript文件和cordova javascript文件的引用(在我的案例中为cordova-2.5.0.js
  6. /res/xml/config.xml
  7. 中添加一些xml(见下文)
  8. 不要忘记将您的活动添加到清单。
  9. 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>