展示
本文的合集已經(jīng)編著成書，高級Android開發(fā)強化實戰(zhàn)，歡迎各位讀友的建議和指導。在京東即可購買：https://item.jd.com/12385680.html
Android
人們每天都要訪問大量的手機網(wǎng)頁, 如果把手機網(wǎng)頁(Web)和應(yīng)用(App)緊密地聯(lián)系起來, 就可以增大用戶的訪問量, 也有其他應(yīng)用場景, 如網(wǎng)頁中調(diào)用支付鏈接, 新聞中啟動問診界面, 提供優(yōu)質(zhì)的原生功能等等.
如何在網(wǎng)頁(Web)中, 通過Intent直接啟動應(yīng)用(App)的Activity呢?
本文主要有以下幾點:
(1) 如何在Web中發(fā)送原生的Intent消息.
(1) 如何加載本地的HTML頁面到瀏覽器.
(2) 如何創(chuàng)建半透明的Activity頁面.
本文源碼的GitHub下載地址
1. 配置項目
新建HelloWorld工程. 添加ButterKnife支持.
compile 'com.jakewharton:butterknife:7.0.1'
2. BottomSheet
邏輯, 添加ShareIntent的監(jiān)聽, 即網(wǎng)頁鏈接觸發(fā)的Intent, 提取Link和Title信息, 底部出現(xiàn)或消失的動畫.
/**
* 網(wǎng)頁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();
// 底部出現(xiàn)動畫
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="發(fā)送網(wǎng)頁內(nèi)容到應(yīng)用"
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>
注意
設(shè)置LinearLayout的android:layout_gravity="bottom|center"屬性,
配合樣式(Styles)的<item name="android:windowIsFloating">false</item>屬性,
可以在底部顯示頁面.
BottomSheet
聲明, 添加SEND的Action, BROWSABLE的Category, text/plain的文件類型.
主題設(shè)置透明主題. 啟動時, 會保留上部半透明, 用于顯示網(wǎng)頁信息.
<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>
透明主題, 注意一些關(guān)鍵屬性, 參考注釋, 不一一列舉.
<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非常重要, 不是常規(guī)顏色, 也可以設(shè)置為透明.
<!--最前兩位是顏色厚度, 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) {
// 跳轉(zhuǎn)WebIntentActivity
startActivity(new Intent(MainActivity.this, WebIntentActivity.class));
}
});
mWvWeb.loadUrl(FILE_NAME);
}
@Override public void onBackPressed() {
// 優(yōu)先后退網(wǎng)頁
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或者網(wǎng)絡(luò)鏈接)
*/
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, "沒有應(yīng)用處理這個請求. 請安裝瀏覽器.", Toast.LENGTH_LONG).show();
e.printStackTrace();
}
}
/**
* 存儲assets內(nèi)的文件
*
* @param url 文件名
* @return 文件類(File)
*/
private File createFileFromInputStream(String url) {
try {
// 打開Assets內(nèi)的文件
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內(nèi)文件的方式, 與WebView有所不同,
具體參考createFileFromInputStream函數(shù).
(2) 在瀏覽器打開時, 需要指定包名, 而且各自瀏覽器的模式也不一樣,
小米支持Google原生調(diào)用, 參考openUrlInBrowser函數(shù).
(3) 回退事件的處理方式, 參考onBackPressed函數(shù).
動畫
就這些了, 在瀏覽器的HTML5頁面中, 可以添加更多和本地應(yīng)用的交互.
OK, Enjoy It.
