如何將我的網站轉換爲Android應用程序

Question

我製作了一個網站，現在我想將其轉換爲應用程序。

我有字面上沒有知識的Java或Android應用程序。我google了一下，但是，我仍然困惑從哪裏開始？

我不是問任何人爲我編碼。我只想知道，我可以通過哪些步驟實現我的目標。我應該從哪裏開始？

請告訴我，什麼是步驟。也許，我在Google上搜索錯誤的關鍵字。

有沒有開源或免費的項目，可以幫助我做到這一點？

Answer 1

使用網頁視圖來顯示你的網站在Android應用程序

Answer 2

1.基本用法

集成在您的應用程序將不會超過兩步的WebView。首先，您需要在您的xml佈局中包含WebView元素。

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

第二，你已經從你的活動加載webview中的具體URL。下面將谷歌的主頁加載到網頁視圖中。

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

即使加載一個簡單的URL似乎很容易，定製的WebView需要通過的WebView，它是提供方法透徹的認識。我們將從WebView提供的基本方法開始，稍後我們將構建一個簡單的瀏覽器活動，它充當應用程序內瀏覽器，提供向後，向前和書籤選項。我們將通過在Android Studio中啓動一個簡單的項目逐個學習。

2.創建新項目

1. 從文件創建Android Studio中一個新的項目通過填充所需的細節⇒新建項目。

2. 由於我們需要提出網絡請求，我們需要在AndroidManifest.xml中添加INTERNET權限。

AndroidManifest.xml中

<?xml version="1.0" encoding="utf-8"?> 
<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
    package="info.androidhive.webview" > 

    <uses-permission android:name="android.permission.INTERNET"/> 

    <application 
     android:allowBackup="true" 
     android:icon="@mipmap/ic_launcher" 
     android:label="@string/app_name" 
     android:supportsRtl="true" 
     android:theme="@style/AppTheme.NoActionBar" > 
     <activity android:name=".MainActivity" > 
      <intent-filter> 
       <action android:name="android.intent.action.MAIN" /> 

       <category android:name="android.intent.category.LAUNCHER" /> 
      </intent-filter> 
     </activity> 
    </application> 
</manifest> 

3.打開的build.gradle並添加滑翔庫支持。這是在CollapsingToolbar中加載圖像所必需的。這一步是可選的，但我建議你按照這篇文章。

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

4.打開佈局文件的主要活動（activity_main.xml中和content_main.xml）和web視圖元素。除此之外，我還添加了CoordinatorLayout，工具欄和一個ProgressBar，它將在網頁加載時顯示。

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@android:color/white" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/detail_backdrop_height" 
     android:fitsSystemWindows="true" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:expandedTitleMarginEnd="64dp" 
      app:expandedTitleMarginStart="48dp" 
      app:expandedTitleTextAppearance="@android:color/transparent" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <RelativeLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"> 

       <ImageView 
        android:id="@+id/backdrop" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:fitsSystemWindows="true" 
        android:scaleType="centerCrop" 
        app:layout_collapseMode="parallax" /> 
      </RelativeLayout> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 

     </android.support.design.widget.CollapsingToolbarLayout> 

    </android.support.design.widget.AppBarLayout> 

    <include layout="@layout/content_main" /> 

    <ProgressBar 
     android:id="@+id/progressBar" 
     style="@style/Widget.AppCompat.ProgressBar.Horizontal" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="-7dp" 
     android:indeterminate="true" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

</android.support.design.widget.CoordinatorLayout> 

content_main.xml

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


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

</android.support.v4.widget.NestedScrollView> 

5。現在打開MainActivity.java並修改代碼如下。這裏initCollapsingToolbar（）方法與WebView完全無關，但它是在網頁向上滾動時提供摺疊效果。 Glide方法用於在工具欄中顯示標題圖像。

package info.androidhive.webview; 

import android.content.Intent; 
import android.os.Bundle; 
import android.support.design.widget.AppBarLayout; 
import android.support.design.widget.CollapsingToolbarLayout; 
import android.support.v7.app.AppCompatActivity; 
import android.support.v7.widget.Toolbar; 
import android.text.TextUtils; 
import android.view.MotionEvent; 
import android.view.View; 
import android.webkit.WebView; 
import android.webkit.WebViewClient; 
import android.widget.ImageView; 
import android.widget.ProgressBar; 

import com.bumptech.glide.Glide; 
import com.bumptech.glide.load.engine.DiskCacheStrategy; 


public class MainActivity extends AppCompatActivity { 

    private String postUrl = "http://api.androidhive.info/webview/index.html"; 
    private WebView webView; 
    private ProgressBar progressBar; 
    private ImageView imgHeader; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
     setSupportActionBar(toolbar); 
     getSupportActionBar().setDisplayHomeAsUpEnabled(true); 

     webView = (WebView) findViewById(R.id.webView); 
     progressBar = (ProgressBar) findViewById(R.id.progressBar); 
     imgHeader = (ImageView) findViewById(R.id.backdrop); 

     // initializing toolbar 
     initCollapsingToolbar(); 

     webView.getSettings().setJavaScriptEnabled(true); 
     webView.loadUrl(postUrl); 
     webView.setHorizontalScrollBarEnabled(false); 
    } 

    /** 
    * Initializing collapsing toolbar 
    * Will show and hide the toolbar txtPostTitle on scroll 
    */ 
    private void initCollapsingToolbar() { 
     final CollapsingToolbarLayout collapsingToolbar = 
       (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); 
     collapsingToolbar.setTitle(" "); 
     AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar); 
     appBarLayout.setExpanded(true); 

     // hiding & showing the txtPostTitle when toolbar expanded & collapsed 
     appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { 
      boolean isShow = false; 
      int scrollRange = -1; 

      @Override 
      public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 
       if (scrollRange == -1) { 
        scrollRange = appBarLayout.getTotalScrollRange(); 
       } 
       if (scrollRange + verticalOffset == 0) { 
        collapsingToolbar.setTitle("Web View"); 
        isShow = true; 
       } else if (isShow) { 
        collapsingToolbar.setTitle(" "); 
        isShow = false; 
       } 
      } 
     }); 

     // loading toolbar header image 
     Glide.with(getApplicationContext()).load("http://api.androidhive.info/webview/nougat.jpg") 
       .thumbnail(0.5f) 
       .crossFade() 
       .diskCacheStrategy(DiskCacheStrategy.ALL) 
       .into(imgHeader); 
    } 
} 

對於代碼WEBVIEW EXAMPLE HERE