網頁鏈接觸發原生Intent

jopen 10年前發布 | 9K 次閱讀 Android開發 移動開發

人們每天都要訪問大量的手機網頁, 如果把手機網頁(Web)和應用(App)緊密地聯系起來, 就可以增大用戶的訪問量, 也有其他應用場景, 如網頁中調用支付鏈接, 新聞中啟動問診界面, 提供優質的原生功能等等.

如何在網頁(Web)中, 通過Intent直接啟動應用(App)的Activity呢?

本文主要有以下幾點:
(1) 如何在Web中發送原生的Intent消息.
(1) 如何加載本地的HTML頁面到瀏覽器.
(2) 如何創建半透明的Activity頁面.

展示

1. 配置項目

新建HelloWorld工程. 添加ButterKnife支持.

compile 'com.jakewharton:butterknife:7.0.1'

2. BottomSheet

邏輯, 添加ShareIntent的監聽, 即網頁鏈接觸發的Intent, 提取Link和Title信息, 底部出現或消失的動畫.

/** * 網頁Activity * <p/> * Created by wangchenlong on 15/12/7. */
public class WebIntentActivity extends Activity {

    @Bind(R.id.web_intent_et_title) EditText mEtTitle;
    @Bind(R.id.web_intent_et_link) EditText mEtLink;

    @Override protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_sheet);
        ButterKnife.bind(this);

        // 獲取WebIntent信息
        if (isShareIntent()) {
            ShareCompat.IntentReader intentReader = ShareCompat.IntentReader.from(this);
            mEtLink.setText(intentReader.getText());
            mEtTitle.setText(intentReader.getSubject());
        }
    }

    @Override protected void onResume() {
        super.onResume();
        // 底部出現動畫
        overridePendingTransition(R.anim.bottom_in, R.anim.bottom_out);
    }

    // 判斷是不是WebIntent
    private boolean isShareIntent() {
        return getIntent() != null && Intent.ACTION_SEND.equals(getIntent().getAction());
    }

    @Override public void overridePendingTransition(int enterAnim, int exitAnim) {
        super.overridePendingTransition(enterAnim, exitAnim);
    }
}

動畫屬性, 沿Y軸變換.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate  android:duration="300" android:fromYDelta="100%p" android:toYDelta="0%p"/>
</set>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate  android:duration="300" android:fromYDelta="0%p" android:toYDelta="100%p"/>
</set>

BottomSheet頁面, 由兩個EditText組成.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  android:id="@+id/web_intent_ll_popup_window" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom|center" android:background="@android:color/white" android:orientation="vertical" android:padding="10dp">

    <TextView  android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="發送網頁內容到應用" android:textSize="20sp"/>

    <android.support.design.widget.TextInputLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:layout_marginStart="12dp" android:layout_marginTop="8dp">

        <EditText  android:id="@+id/web_intent_et_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Post Title" android:inputType="textCapWords"/>

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

    <android.support.design.widget.TextInputLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:layout_marginStart="12dp" android:layout_marginTop="8dp">

        <EditText  android:id="@+id/web_intent_et_link" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Link" android:inputType="textCapWords"/>

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

</LinearLayout>

注意
設置LinearLayout的android:layout_gravity="bottom|center"屬性,
配合樣式(Styles)的<item name="android:windowIsFloating">false</item>屬性,
可以在底部顯示頁面.

效果

聲明, 添加SEND的Action, BROWSABLE的Category, text/plain的文件類型.
主題設置透明主題. 啟動時, 會保留上部半透明, 用于顯示網頁信息.

        <activity  android:name=".WebIntentActivity" android:theme="@style/Theme.Transparent">
            <intent-filter>
                <action android:name="android.intent.action.SEND"/>

                <category android:name="android.intent.category.DEFAULT"/>
                <category android:name="android.intent.category.BROWSABLE"/>

                <data android:mimeType="text/plain"/>
            </intent-filter>
        </activity>

透明主題, 注意一些關鍵屬性, 參考注釋, 不一一列舉.

    <style name="Theme.Transparent" parent="AppTheme.NoActionBar">
        <!--背景色-->
        <item name="android:windowBackground">@color/page_background</item>
        <!--不使用背景緩存-->
        <item name="android:colorBackgroundCacheHint">@null</item>
        <!--控制窗口位置, 非流窗口, 固定位置, 用于非全屏窗口-->
        <item name="android:windowIsFloating">false</item>
        <!--窗口透明-->
        <item name="android:windowIsTranslucent">true</item>
        <!--窗口無標題-->
        <item name="android:windowNoTitle">true</item>
    </style>

背景顏色windowBackground非常重要, 不是常規顏色, 也可以設置為透明.

<!--最前兩位是顏色厚度, 00透明, FF全黑-->
<color name="page_background">#99323232</color>

3. 主頁面

本地HTML文件存放在assets中, 提供在瀏覽器打開功能.
瀏覽器打開Web鏈接非常簡單, 打開本地HTML有很多難點.

/** * 測試WebIntent的Demo * * @author C.L.Wang */
public class MainActivity extends AppCompatActivity {

    @SuppressWarnings("unused")
    private static final String TAG = "DEBUG-WCL: " + MainActivity.class.getSimpleName();

    private static final String FILE_NAME = "file:///android_asset/web_intent.html";

    @Bind(R.id.main_wv_web) WebView mWvWeb; // WebView

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // 跳轉WebIntentActivity
                startActivity(new Intent(MainActivity.this, WebIntentActivity.class));
            }
        });

        mWvWeb.loadUrl(FILE_NAME);
    }

    @Override public void onBackPressed() {
        // 優先后退網頁
        if (mWvWeb.canGoBack()) {
            mWvWeb.goBack();
        } else {
            finish();
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        // 打開瀏覽器選項
        if (id == R.id.action_open_in_browser) {
            // 獲取文件名, 打開assets文件使用文件名
            String[] as = FILE_NAME.split("/");
            openUrlInBrowser(as[as.length - 1]);
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    /** * 在瀏覽器中打開 * * @param url 鏈接(本地HTML或者網絡鏈接) */
    private void openUrlInBrowser(String url) {
        Uri uri;
        if (url.endsWith(".html")) { // 文件
            uri = Uri.fromFile(createFileFromInputStream(url));
        } else { // 鏈接
            if (!url.startsWith("http://") && !url.startsWith("https://")) {
                url = "http://" + url;
            }
            uri = Uri.parse(url);
        }

        try {
            Intent intent = new Intent(Intent.ACTION_VIEW, uri);
            // 啟動瀏覽器, 谷歌瀏覽器, 小米手機瀏覽器支持, 其他手機或瀏覽器不支持.
            intent.setClassName("com.android.browser", "com.android.browser.BrowserActivity");
            startActivity(intent);
        } catch (ActivityNotFoundException e) {
            Toast.makeText(this, "沒有應用處理這個請求. 請安裝瀏覽器.", Toast.LENGTH_LONG).show();
            e.printStackTrace();
        }
    }

    /** * 存儲assets內的文件 * * @param url 文件名 * @return 文件類(File) */
    private File createFileFromInputStream(String url) {
        try {
            // 打開Assets內的文件
            InputStream inputStream = getAssets().open(url);
            // 存儲位置 /sdcard
            File file = new File(
                    Environment.getExternalStorageDirectory().getPath(), url);
            OutputStream outputStream = new FileOutputStream(file);
            byte buffer[] = new byte[1024];
            int length;
            while ((length = inputStream.read(buffer)) > 0) {
                outputStream.write(buffer, 0, length);
            }
            outputStream.close();
            inputStream.close();
            return file;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

注意:
(1) 瀏覽器打開assets內文件的方式, 與WebView有所不同,
具體參考createFileFromInputStream函數.
(2) 在瀏覽器打開時, 需要指定包名, 而且各自瀏覽器的模式也不一樣,
小米支持Google原生調用, 參考openUrlInBrowser函數.
(3) 回退事件的處理方式, 參考onBackPressed函數.

動畫

Github下載地址

就這些了, 在瀏覽器的HTML5頁面中, 可以添加更多和本地應用的交互.
OK, Enjoy It.

來自: http://blog.csdn.net//caroline_wendy/article/details/50297671

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!