H5 mall client, the effect and android native client is not much different, now H5 is more and more popular, Android partners have encountered a new challenge. This project can only learn about the use of WebViewActivity, but because JS can not see, so to see the method inside, the main code:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_webview);
ButterKnife.bind(this);
String url = getIntent().getStringExtra(EXTRA_URL);
mWebView.setWebViewClient(new WebViewClient());
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.loadUrl(url);
setupActionBar(url);
}
Copy the codeThere is also the CustomTabActivityHelper class wrapped
/** * Opens the URL on a Custom Tab if possible. Otherwise fallsback to opening it on a WebView * * @param activity The host activity * @param customTabsIntent a CustomTabsIntent to be used if Custom Tabs is available * @param uri the Uri to be opened * @param fallback a CustomTabFallback to be used if Custom Tabs is not available */ public static void openCustomTab(Activity activity, CustomTabsIntent customTabsIntent, Uri uri, CustomTabFallback fallback) { String packageName = CustomTabsHelper.getPackageNameToUse(activity); //If we cant find a package name, it means there's no browser that supports //Chrome Custom Tabs installed. So, we fallback to the webview if (packageName == null) { if (fallback ! = null) { fallback.openUri(activity, uri); } } else { customTabsIntent.intent.setPackage(packageName); customTabsIntent.launchUrl(activity, uri); } } /** * Unbinds the Activity from the Custom Tabs Service * @param activity the activity that is connected to the service */ public void unbindCustomTabsService(Activity activity) { if (mConnection == null) return; activity.unbindService(mConnection); mClient = null; mCustomTabsSession = null; }Copy the code
So let’s get to the point.
Today we’ll take a look at one of them: Custom Tabs. Note that this refers to the Chrome browser’s Custom multi-window and not the Android Tab. Chrome is now the default browser for Android native systems. If you need to open web content in your application, the previous approach is to either use a WebView or open a third-party browser directly to display the content. Typical scenarios such as most of the content in wechat are first displayed in wechat’s own WebView, and then you can choose the menu to open in the browser. The Chrome team believes that displaying web content in apps is now common, and that this feature was implemented to make it easier for people to display web content and preserve a good user experience. Specifically, if you want to open a web page in your application, you can use Chrome Custom Tabs to open a Custom Tab in Your Chrome browser to display the page. You can customize the Tab properties to maintain a good user experience. And make the user feel like the custom Tab is part of your application. You can customize the following contents:
- The color of the ActionBar (the top Toolbar, url column)
- Custom Tab entry and exit cutscenes in custom Tab
- Add custom ICONS and menus on ActionBar
- Custom return icon Custom Tab can notify the application of web navigation through the callback interface
- Better performance, using the Custom Tab to open the web page, can also be pre-loaded content, so that when opened, the user feels very fast.
- Life cycle management, the use of Custom TAB can be bound with your application, when the user is browsing the web page, your application is also considered to be interactive procedures, will not be killed by the system.
- Cookies from Chrome can be shared so users don’t have to log in again. This works if the user has Chrome’s data compression function enabled
- The same autocomplete feature as Chrome
- I use the latest version of Chrome every time
Here is a comparison of the same page speed using Chrome, Chrome Custom Tabs, and WebView:
When to use WebView and Chrome Custom Tabs?
If you haven’t been using a WebView before, you should always use Chrome Custom Tabs to open the page. If you’ve been using WebView before, there are two scenarios to help you decide which one is best for you: If the web content you want to display is under your control and the web content needs to interact with Android components, such as calling Android functions through JavaScript interfaces, you also need to use WebView. Other cases can be implemented using Chrome Custom Tabs. Chrome Custom Tabs is very simple to use. It only takes one line of code to use, and it is no different from directly calling the system browser to display the page. With a few simple Settings, you can make browsing third-party web pages feel like your app. It’s available from Chrome version 45, also released last week, and is currently only available on Android. How to use it?
The use of the most simple way is only need to use CustomTabsIntent Builder object to set up some common custom options, and then call CustomTabsIntent. LaunchUrl (Activity context, Uri url) functions. Of course, in the specific use process, you also need to determine whether the user’s phone supports Custom Tabs. It is recommended to use this inner CustomTabsHelper. Java and CustomTabActivityHelper. Java class two tools. . For example, in CustomUIActivity openCustomTab function, can be used by the following code Custom Tabs to display a web page, and customize the ActionBar color, Activity animated transitions, such as:
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder(); / / change the color of the ActionBar intentBuilder setToolbarColor (color); String shareLabel = getString(r.sing.label_action_share); // Add a share button. Bitmap icon = BitmapFactory.decodeResource(getResources(),android.R.drawable.ic_menu_share); PendingIntent pendingIntent = createPendingIntent(); intentBuilder.setActionButton(icon, shareLabel, pendingIntent); / / display the page title intentBuilder. SetShowTitle (mShowTitleCheckBox. IsChecked ()); / / Custom closed Custom tabs icon intentBuilder. SetCloseButtonIcon (BitmapFactory. DecodeResource (getResources (), R.drawable.ic_arrow_back)); . / / custom Activity transitions animation intentBuilder setStartAnimations (this, state Richard armitage nim. Slide_in_right, state Richard armitage nim. Slide_out_left); intentBuilder.setExitAnimations(this, android.R.anim.slide_in_left,android.R.anim.slide_out_right); / / the last call helper class CustomTabActivityHelper openCustomTab function to open a url CustomTabActivityHelper. OpenCustomTab (this, intentBuilder.build(), Uri.parse(url), new WebviewFallback()); Read more: http://blog.chengyunfeng.com/?p=773#ixzz47Cy4WiEJCopy the codeIf the user’s phone does not support Chrome Custom Tabs, call the openUri function of the WebviewFallback interface, which can be used to open the page in the previous way. Such as using a WebView or using a third-party browser on the system. There are other examples of advanced usage here and here for further reference, such as: MainActivity. In Java, In the Activity. Through CustomTabsClient onStart first. BindCustomTabsService (Context Context, String packageName, CustomTabsServiceConnection connection) function to bind to the CustomTabsService, after the success of the binding, In the customTabsclient.warmup (Long Flags) function to preload Chrome, the Chrome will load some basic controls so that when opened it will be faster; Can also through CustomTabsClient. NewSession (CustomTabsCallback callback) function to obtain a Custom tabs reply, can monitor the answer in the callback navigation operations, Like whether navigation failed or succeeded. Custom Tabs is a simple way to display a web page. Although most Android phones in The country are not using Chrome browser, it is recommended that developers add this feature. In case several users use the latest version of Chrome browser, Custom Tabs is a simple way to display a page. Will they be impressed when they use your application?
Read more: blog.chengyunfeng.com/?p=773#ixzz…