如何将我的网站转换为 Android 应用程序

Question

我做了一个网站，现在我想把它转换成一个应用程序。

我对Java 或 Android 应用程序一无所知。我用谷歌搜索了一下，但是我仍然很困惑我应该从哪里开始？

我不是要求任何人为我编码。我只是想知道实现目标的步骤。我应该从哪里开始？

请告诉我，步骤是什么。也许，我在谷歌上搜索的关键字有误。

有没有任何开源或免费项目可以帮助我做到这一点？

Answer 1

1. 基本用法

\n\n

在您的应用程序中集成 WebView 不会\xe2\x80\x99 需要两个以上的步骤。首先，您需要在 xml 布局中包含 WebView 元素。

\n\n

<WebView\n    android:id="@+id/webView"\n    android:layout_width="match_parent"\n    android:layout_height="wrap_content"/>\n

\n\n

其次，您已从 Activity 中加载 Web 视图中的特定 url。下面将 google\xe2\x80\x99s 主页加载到网络视图中。

\n\n

WebView webView = (WebView) findViewById(R.id.webView);\nwebView.loadUrl("YOUR WEBSITE LINK HERE");\n

\n\n

尽管加载一个简单的 url 看起来很容易，但自定义 WebView 需要对 WebView 及其提供的方法有透彻的了解。我们\xe2\x80\x99将从WebView提供的基本方法开始，稍后我们\xe2\x80\x99将构建一个简单的浏览器活动，该活动充当应用内浏览器，提供向后、向前和书签选项。我们\xe2\x80\x99将通过在Android Studio中启动一个简单的项目来一一学习。

\n\n

2. 创建新项目

\n\n

\n

1. 通过填写所需的详细信息，在 Android Studio 中从 File \xe2\x87\x92 New Project 创建一个新项目。

\n

2. 由于我们需要发出网络请求，因此需要在AndroidManifest.xml中添加INTERNET权限。

\n

\n\n

AndroidManifest.xml

\n\n

<?xml version="1.0" encoding="utf-8"?>\n<manifest xmlns:android="http://schemas.android.com/apk/res/android"\n    package="info.androidhive.webview" >\n\n    <uses-permission android:name="android.permission.INTERNET"/>\n\n    <application\n        android:allowBackup="true"\n        android:icon="@mipmap/ic_launcher"\n        android:label="@string/app_name"\n        android:supportsRtl="true"\n        android:theme="@style/AppTheme.NoActionBar" >\n        <activity android:name=".MainActivity" >\n            <intent-filter>\n                <action android:name="android.intent.action.MAIN" />\n\n                <category android:name="android.intent.category.LAUNCHER" />\n            </intent-filter>\n        </activity>\n    </application>\n</manifest>\n

\n\n

3.打开build.gradle并添加Glide库支持。这是在 CollapsingToolbar 中加载图像所必需的。此步骤是可选的，但我建议您在本文中遵循此步骤。

\n\n

dependencies {\n    ... \n    // glide\n    compile \'com.github.bumptech.glide:glide:3.7.0\'\n}\n

\n\n

4. 打开主活动的布局文件（activity_main.xml 和 content_main.xml）和 WebView 元素。除此之外，我还添加了 CoordinatorLayout、工具栏和 ProgressBar，它们将在加载网页时显示。

\n\n

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"\n    xmlns:app="http://schemas.android.com/apk/res-auto"\n    android:id="@+id/main_content"\n    android:layout_width="match_parent"\n    android:layout_height="match_parent"\n    android:background="@android:color/white"\n    android:fitsSystemWindows="true">\n\n    <android.support.design.widget.AppBarLayout\n        android:id="@+id/appbar"\n        android:layout_width="match_parent"\n        android:layout_height="@dimen/detail_backdrop_height"\n        android:fitsSystemWindows="true"\n        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">\n\n        <android.support.design.widget.CollapsingToolbarLayout\n            android:id="@+id/collapsing_toolbar"\n            android:layout_width="match_parent"\n            android:layout_height="match_parent"\n            android:fitsSystemWindows="true"\n            app:contentScrim="?attr/colorPrimary"\n            app:expandedTitleMarginEnd="64dp"\n            app:expandedTitleMarginStart="48dp"\n            app:expandedTitleTextAppearance="@android:color/transparent"\n            app:layout_scrollFlags="scroll|exitUntilCollapsed">\n\n            <RelativeLayout\n                android:layout_width="wrap_content"\n                android:layout_height="wrap_content">\n\n                <ImageView\n                    android:id="@+id/backdrop"\n                    android:layout_width="match_parent"\n                    android:layout_height="match_parent"\n                    android:fitsSystemWindows="true"\n                    android:scaleType="centerCrop"\n                    app:layout_collapseMode="parallax" />\n            </RelativeLayout>\n\n            <android.support.v7.widget.Toolbar\n                android:id="@+id/toolbar"\n                android:layout_width="match_parent"\n                android:layout_height="?attr/actionBarSize"\n                app:layout_collapseMode="pin"\n                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />\n\n        </android.support.design.widget.CollapsingToolbarLayout>\n\n    </android.support.design.widget.AppBarLayout>\n\n    <include layout="@layout/content_main" />\n\n    <ProgressBar\n        android:id="@+id/progressBar"\n        style="@style/Widget.AppCompat.ProgressBar.Horizontal"\n        android:layout_width="match_parent"\n        android:layout_height="wrap_content"\n        android:layout_marginTop="-7dp"\n        android:indeterminate="true"\n        app:layout_behavior="@string/appbar_scrolling_view_behavior" />\n\n</android.support.design.widget.CoordinatorLayout>\n

\n\n

内容_main.xml

\n\n

<?xml version="1.0" encoding="utf-8"?>\n<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"\n    xmlns:app="http://schemas.android.com/apk/res-auto"\n    android:layout_width="match_parent"\n    android:layout_height="match_parent"\n    android:fadeScrollbars="false"\n    android:scrollbarFadeDuration="0"\n    app:layout_behavior="@string/appbar_scrolling_view_behavior">\n\n\n    <WebView\n        android:id="@+id/webView"\n        android:layout_width="match_parent"\n        android:layout_height="wrap_content" />\n\n</android.support.v4.widget.NestedScrollView>\n

\n\n

5. 现在打开MainActivity.java并修改代码如下。这里的 initCollapsingToolbar() 方法与 WebView 完全无关，但它是在网页向上滚动时提供折叠效果。Glide方法用于在工具栏中显示标题图像。

\n\n

    package info.androidhive.webview;\n\nimport android.content.Intent;\nimport android.os.Bundle;\nimport android.support.design.widget.AppBarLayout;\nimport android.support.design.widget.CollapsingToolbarLayout;\nimport android.support.v7.app.AppCompatActivity;\nimport android.support.v7.widget.Toolbar;\nimport android.text.TextUtils;\nimport android.view.MotionEvent;\nimport android.view.View;\nimport android.webkit.WebView;\nimport android.webkit.WebViewClient;\nimport android.widget.ImageView;\nimport android.widget.ProgressBar;\n\nimport com.bumptech.glide.Glide;\nimport com.bumptech.glide.load.engine.DiskCacheStrategy;\n\n\npublic class MainActivity extends AppCompatActivity {\n\n    private String postUrl = "http://api.androidhive.info/webview/index.html";\n    private WebView webView;\n    private ProgressBar progressBar;\n    private ImageView imgHeader;\n\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_main);\n        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);\n        setSupportActionBar(toolbar);\n        getSupportActionBar().setDisplayHomeAsUpEnabled(true);\n\n        webView = (WebView) findViewById(R.id.webView);\n        progressBar = (ProgressBar) findViewById(R.id.progressBar);\n        imgHeader = (ImageView) findViewById(R.id.backdrop);\n\n        // initializing toolbar\n        initCollapsingToolbar();\n\n        webView.getSettings().setJavaScriptEnabled(true);\n        webView.loadUrl(postUrl);\n        webView.setHorizontalScrollBarEnabled(false);\n    }\n\n    /**\n     * Initializing collapsing toolbar\n     * Will show and hide the toolbar txtPostTitle on scroll\n     */\n    private void initCollapsingToolbar() {\n        final CollapsingToolbarLayout collapsingToolbar =\n                (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);\n        collapsingToolbar.setTitle(" ");\n        AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);\n        appBarLayout.setExpanded(true);\n\n        // hiding & showing the txtPostTitle when toolbar expanded & collapsed\n        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {\n            boolean isShow = false;\n            int scrollRange = -1;\n\n            @Override\n            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {\n                if (scrollRange == -1) {\n                    scrollRange = appBarLayout.getTotalScrollRange();\n                }\n                if (scrollRange + verticalOffset == 0) {\n                    collapsingToolbar.setTitle("Web View");\n                    isShow = true;\n                } else if (isShow) {\n                    collapsingToolbar.setTitle(" ");\n                    isShow = false;\n                }\n            }\n        });\n\n        // loading toolbar header image\n        Glide.with(getApplicationContext()).load("http://api.androidhive.info/webview/nougat.jpg")\n                .thumbnail(0.5f)\n                .crossFade()\n                .diskCacheStrategy(DiskCacheStrategy.ALL)\n                .into(imgHeader);\n    }\n}\n

\n\n

其余代码请参见此处的 WEBVIEW 示例

\n