使用“Powered By Chrome”打开自定义WebView用动作菜单 [英] Opening Custom WebView with "Powered By Chrome" With action menus

问题描述

我最近注意到，当某些Android应用程序中的链接打开时，它们具有与自定义菜单下的由Chrome驱动类似的外观和自定义操作菜单。在这个中使用了什么组件？还是它仍然是Chromium WebView ？希望我想将它们添加到我的下一个项目中，这些项目涉及在应用程序中打开链接。

LinkedIn App

GMail应用程式

解决方案

这是 Chrome自定义标签。您可以从谷歌浏览器此处查看示例代码。

试试下面的util类：

  public class CustomTabs {
 
 private static final int TOOLBAR_​​SHARE_ITEM_ID = 1; 
 
 public static void openTab（Context context，String url）{
 CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder（）; 
 
 enableUrlBarHiding（builder）; 
 setToolbarColor（context，builder）; 
 setSecondaryToolbarColor（context，builder）; 
 setCloseButtonIcon（context，builder）; 
 setShowTitle（builder）; 
 setAnimations（context，builder）; 
 setShareActionButton（context，builder，url）; 
 addToolbarShareItem（context，builder，url）; 
 addShareMenuItem（builder）; 
 addCopyMenuItem（context，builder）; 
 
 CustomTabsIntent customTabsIntent = builder.build（）; 
 customTabsIntent.launchUrl（context，Uri.parse（url））; 
 
 $ b $ *当用户在页面上向下滚动时，可以隐藏url栏* / 
 private static void enableUrlBarHiding（CustomTabsIntent.Builder builder）{
 builder.enableUrlBarHiding（）; 
 
 
设置工具栏颜色* / 
 private static void setToolbarColor（Context context，CustomTabsIntent.Builder builder）{
 builder.setToolbarColor（ContextCompat.getColor （context，R.color.colorPrimary））; 
 
 
设置辅助工具栏颜色* / 
 private static void setSecondaryToolbarColor（Context context，CustomTabsIntent.Builder builder）{
 builder.setSecondaryToolbarColor（ContextCompat。 getColor（context，R.color.colorPrimary））; 
 
 
设置自定义选项卡的关闭按钮图标* / 
 private static void setCloseButtonIcon（Context context，CustomTabsIntent.Builder builder）{
 builder。 setCloseButtonIcon（BitmapFactory.decodeResource（context.getResources（），R.drawable.ic_arrow_back））; 
 
 
设置标题是否显示在自定义选项卡中* / 
 private static void setShowTitle（CustomTabsIntent.Builder builder）{
 builder.setShowTitle （真正）; 
 
 $ b $ *设置动画* / 
 private static void setAnimations（Context context，CustomTabsIntent.Builder builder）{
 builder.setStartAnimations（context，R.anim .slide_in_right，R.anim.slide_out_left）; 
 builder.setExitAnimations（context，R.anim.slide_in_left，R.anim.slide_out_right）; 
 
 
设置显示在工具栏中的共享操作按钮* / 
 private static void setShareActionButton（Context context，CustomTabsIntent.Builder builder，String url）{
位图图标= BitmapFactory.decodeResource（context.getResources（），android.R.drawable.ic_menu_share）; 
字符串标签=通过分享; 
 
 Intent shareIntent = new Intent（Intent.ACTION_SEND）; 
 shareIntent.putExtra（Intent.EXTRA_TEXT，url）; 
 shareIntent.setType（text / plain）; 
 
 PendingIntent pendingIntent = PendingIntent.getActivity（context，0，shareIntent，PendingIntent.FLAG_UPDATE_CURRENT）; 
 
 builder.setActionButton（icon，label，pendingIntent）; 
 
 $ b $ *添加显示在辅助工具栏中的共享项目* / 
 private static void addToolbarShareItem（Context context，CustomTabsIntent.Builder builder，String url）{
位图图标= BitmapFactory.decodeResource（context.getResources（），android.R.drawable.ic_menu_share）; 
字符串标签=通过分享; 
 
 Intent shareIntent = new Intent（Intent.ACTION_SEND）; 
 shareIntent.putExtra（Intent.EXTRA_TEXT，url）; 
 shareIntent.setType（text / plain）; 
 
 PendingIntent pendingIntent = PendingIntent.getActivity（context，0，shareIntent，PendingIntent.FLAG_UPDATE_CURRENT）; 
 
 builder.addToolbarItem（TOOLBAR_​​SHARE_ITEM_ID，icon，label，pendingIntent）; 
 
 
 $ b / *向菜单添加一个默认的共享项目* / 
 private static void addShareMenuItem（CustomTabsIntent.Builder builder）{
 builder。 addDefaultShareMenuItem（）; 
 
 $ b $ *将副本项目添加到菜单* / 
 private static void addCopyMenuItem（Context context，CustomTabsIntent.Builder builder）{
 String label =复制; 
 Intent intent = new Intent（context，CopyBroadcastReceiver.class）; 
 PendingIntent pendingIntent = PendingIntent.getBroadcast（context，0，intent，PendingIntent.FLAG_UPDATE_CURRENT）; 
 
 builder.addMenuItem（label，pendingIntent）; 
} 
 
 public static class CopyBroadcastReceiver extends BroadcastReceiver {
 
 @Override 
 public void onReceive（Context context，Intent intent）{
 String url = intent.getDataString（）; 
 
 ClipboardManager clipboardManager =（ClipboardManager）context.getSystemService（Context.CLIPBOARD_SERVICE）; 
 ClipData data = ClipData.newPlainText（Link，url）; 
 clipboardManager.setPrimaryClip（data）; 
 
 Toast.makeText（context，Copied+ url，Toast.LENGTH_SHORT）.show（）; 
} 
} 
} 
  

不要忘记添加依赖于你的 app / build.gradle

  dependencies {
 ... 
 compile'c​​om.android.support:customtabs:25.2.0'
} 
  

并在您的 AndroidManifest.xml中注册 BroadcastReceiver

 < application> 
 ... 
< receiver android：name =。CustomTabs $ CopyBroadcastReceiver/> 
< / application> 
  

I've recently noticed that when a link is opened in some of few Android apps, they have this similar look and feel and the custom action menus with the "Powered by Chrome" below the custom menu. What component is used in this or is it still the Chromium WebView? Hopefully I'm looking to add them to my next projects which involve opening link inside an app.

LinkedIn App

Twitter App

GMail App

解决方案

It is Chrome Custom Tabs. You can see the sample code from Google Chrome here.

Try the following util class:

public class CustomTabs {

    private static final int TOOLBAR_SHARE_ITEM_ID = 1;

    public static void openTab(Context context, String url) {
        CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();

        enableUrlBarHiding(builder);
        setToolbarColor(context, builder);
        setSecondaryToolbarColor(context, builder);
        setCloseButtonIcon(context, builder);
        setShowTitle(builder);
        setAnimations(context, builder);
        setShareActionButton(context, builder, url);
        addToolbarShareItem(context, builder, url);
        addShareMenuItem(builder);
        addCopyMenuItem(context, builder);

        CustomTabsIntent customTabsIntent = builder.build();
        customTabsIntent.launchUrl(context, Uri.parse(url));
    }

    /* Enables the url bar to hide as the user scrolls down on the page */
    private static void enableUrlBarHiding(CustomTabsIntent.Builder builder) {
        builder.enableUrlBarHiding();
    }

    /* Sets the toolbar color */
    private static void setToolbarColor(Context context, CustomTabsIntent.Builder builder) {
        builder.setToolbarColor(ContextCompat.getColor(context, R.color.colorPrimary));
    }

    /* Sets the secondary toolbar color */
    private static void setSecondaryToolbarColor(Context context, CustomTabsIntent.Builder builder) {
        builder.setSecondaryToolbarColor(ContextCompat.getColor(context, R.color.colorPrimary));
    }    

    /* Sets the Close button icon for the custom tab */
    private static void setCloseButtonIcon(Context context, CustomTabsIntent.Builder builder) {
        builder.setCloseButtonIcon(BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_arrow_back));
    }

    /* Sets whether the title should be shown in the custom tab */
    private static void setShowTitle(CustomTabsIntent.Builder builder) {
        builder.setShowTitle(true);
    }

    /* Sets animations */
    private static void setAnimations(Context context, CustomTabsIntent.Builder builder) {
        builder.setStartAnimations(context, R.anim.slide_in_right, R.anim.slide_out_left);
        builder.setExitAnimations(context, R.anim.slide_in_left, R.anim.slide_out_right);
    }

    /* Sets share action button that is displayed in the Toolbar */
    private static void setShareActionButton(Context context, CustomTabsIntent.Builder builder, String url) {
        Bitmap icon = BitmapFactory.decodeResource(context.getResources(), android.R.drawable.ic_menu_share);
        String label = "Share via";

        Intent shareIntent = new Intent(Intent.ACTION_SEND);
        shareIntent.putExtra(Intent.EXTRA_TEXT, url);
        shareIntent.setType("text/plain");

        PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, shareIntent, PendingIntent.FLAG_UPDATE_CURRENT);

        builder.setActionButton(icon, label, pendingIntent);
    }

    /* Adds share item that is displayed in the secondary Toolbar */
    private static void addToolbarShareItem(Context context, CustomTabsIntent.Builder builder, String url) {
        Bitmap icon = BitmapFactory.decodeResource(context.getResources(), android.R.drawable.ic_menu_share);
        String label = "Share via";

        Intent shareIntent = new Intent(Intent.ACTION_SEND);
        shareIntent.putExtra(Intent.EXTRA_TEXT, url);
        shareIntent.setType("text/plain");

        PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, shareIntent, PendingIntent.FLAG_UPDATE_CURRENT);

        builder.addToolbarItem(TOOLBAR_SHARE_ITEM_ID, icon, label, pendingIntent);

    }

    /* Adds a default share item to the menu */
    private static void addShareMenuItem(CustomTabsIntent.Builder builder) {
        builder.addDefaultShareMenuItem();
    }

    /* Adds a copy item to the menu */
    private static void addCopyMenuItem(Context context, CustomTabsIntent.Builder builder) {
        String label = "Copy";
        Intent intent = new Intent(context, CopyBroadcastReceiver.class);
        PendingIntent pendingIntent = PendingIntent.getBroadcast(context, 0, intent, PendingIntent.FLAG_UPDATE_CURRENT);

        builder.addMenuItem(label, pendingIntent);
    }

    public static class CopyBroadcastReceiver extends BroadcastReceiver {

        @Override
        public void onReceive(Context context, Intent intent) {
            String url = intent.getDataString();

            ClipboardManager clipboardManager = (ClipboardManager) context.getSystemService(Context.CLIPBOARD_SERVICE);
            ClipData data = ClipData.newPlainText("Link", url);
            clipboardManager.setPrimaryClip(data);

            Toast.makeText(context, "Copied " + url, Toast.LENGTH_SHORT).show();
        }
    }
}

Don't forget to add the dependencies to your app/build.gradle

dependencies {
    ...
    compile 'com.android.support:customtabs:25.2.0'
}

and register your BroadcastReceiver in your AndroidManifest.xml

<application>
    ...
    <receiver android:name=".CustomTabs$CopyBroadcastReceiver" />
</application>

这篇关于使用“Powered By Chrome”打开自定义WebView用动作菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！