chrome自定义背景_Android Chrome自定义标签

最新推荐文章于 2024-08-10 07:22:37 发布

cunchi4221

最新推荐文章于 2024-08-10 07:22:37 发布

阅读量497

点赞数

原文链接：https://www.journaldev.com/21723/android-chrome-custom-tabs

版权

chrome自定义背景

In this tutorial, we’ll be discussing and implementing Chrome Custom Tabs in our Android Application.

在本教程中，我们将在Android应用程序中讨论和实现Chrome自定义标签。

Android Chrome自定义标签 (Android Chrome Custom Tabs)

Chrome Custom Tabs are an alternative way of launching URLs in our Android applications.

Chrome自定义标签页是在我们的Android应用程序中启动URL的另一种方法。

The other two ways were using a WebView and opening it in a browser.

另两种方式是使用WebView并在浏览器中打开它。

Both of these take more time, hence Chrome Custom Tabs was introduced.

两者都需要花费更多时间，因此引入了Chrome自定义标签。

The following gif from the Chrome Dev Docs compares the time taken in all three:

以下来自Chrome开发者文档的gif文件比较了这三个时间所花费的时间：

Chrome Custom Tabs came up with the following support library in Android M.

Chrome自定义标签在Android M中提供了以下支持库。

compile 'com.android.support:customtabs:28.0.0-alpha3'

Using this we can:

使用此我们可以：

Set a different background on the toolbar of the tab.
在选项卡的工具栏上设置其他背景。
Change the cross/back arrow of the tab.
更改选项卡的十字/后退箭头。
Show/hide url title on the toolbar.
在工具栏上显示/隐藏URL标题。
Add menu icons to perform certain actions.
添加菜单图标以执行某些操作。

In short, Chrome Custom Tabs allows us to customize the tabs easily and load them much faster.

简而言之，Chrome自定义标签页使我们能够轻松自定义标签页并更快地加载它们。

Chrome自定义标签实施 (Chrome Custom Tabs Implementation)

To launch a chrome custom tab we do:

要启动chrome自定义标签，请执行以下操作：

CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder().build();
customTabsIntent.launchUrl(this, Uri.parse(url));

Where url is the string passed and this is the context.

其中url是传递的字符串， this是上下文。

Setting Toolbar Color

设置工具栏颜色

CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
// set toolbar color
builder.setToolbarColor(ContextCompat.getColor(this, R.color.colorAccent));

The toolbar of the Chrome Custom Tab UI contains an overflow menu icon which is similar to the Chrome one.

Chrome“自定义标签”用户界面的工具栏包含一个溢出菜单图标，与Chrome浏览器类似。

You cannot remove it. But you can add more options in that icon.

您无法删除它。但是您可以在该图标中添加更多选项。

builder.addDefaultShareMenuItem();

This would add the Share.. option.

这将添加Share ..选项。

To add a custom menu item:

要添加自定义菜单项：

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

Adding menu icons in the Toolbar

在工具栏中添加菜单图标

builder.setActionButton(bitmap, "Android", pendingIntent, true);

The above action button would add the bitmap image onto the toolbar and the pending intent would trigger the intent attached with it.

上面的操作按钮会将位图图像添加到工具栏上，而挂起的意图将触发与之关联的意图。

To show the title of the webpage do:

要显示网页标题，请执行以下操作：

builder.setShowTitle(true);

By default to go back you need to press the cross icon. But you can change this to any other by passing the bitmap:

默认情况下要返回，您需要按叉形图标。但是您可以通过传递位图将其更改为其他任何值：

builder.setCloseButtonIcon(bitmap);

To add animations on the custom chrome tab launch do:

要在自定义镶边选项卡启动中添加动画，请执行以下操作：

builder.setStartAnimations(this, android.R.anim.fade_in, android.R.anim.fade_out);
builder.setExitAnimations(this, android.R.anim.fade_in, android.R.anim.fade_out);

Now let’s get onto the business end of this tutorial where we will implement Chrome Custom Tabs in our app.

现在，让我们进入本教程的业务端，我们将在应用程序中实现Chrome自定义标签。

项目结构 (Project Structure)

We’ve created an image asset of the type ActionBar icon by right-clicking res | new | Image Asset.

我们通过右键单击res |创建了ActionBar图标类型的图像资产。新图像资产。

Add the Internet Permission in the Manifest and the dependency for the chrome custom tabs in the build.gradle file.

在清单中添加Internet许可，并在build.gradle文件中添加chrome自定义选项卡的依赖项。

码 (Code)

The code for the activity_main.xml layout is given below:

下面给出了activity_main.xml布局的代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="LAUNCH URL"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

The code for the MainActivity.java class is given below:

MainActivity.java类的代码如下：

package com.journaldev.androidcustomchrometabs;

import android.app.PendingIntent;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.support.customtabs.CustomTabsIntent;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                String url = "https://www.journaldev.com";
                CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
                builder.setToolbarColor(ContextCompat.getColor(MainActivity.this, R.color.colorAccent));
                builder.addDefaultShareMenuItem();

                CustomTabsIntent anotherCustomTab = new CustomTabsIntent.Builder().build();


                Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_android);
                int requestCode = 100;
                Intent intent = anotherCustomTab.intent;
                intent.setData(Uri.parse("https://www.journaldev.com/author/anupam"));

                PendingIntent pendingIntent = PendingIntent.getActivity(MainActivity.this,
                        requestCode,
                        intent,
                        PendingIntent.FLAG_UPDATE_CURRENT);

                builder.setActionButton(bitmap, "Android", pendingIntent, true);
                builder.setShowTitle(true);


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

anotherCustomTab invokes another url in a new Chrome Custom Tab.

anotherCustomTab在新的Chrome自定义标签中调用另一个网址。

The output of the above application in action is given below:

上面应用程序的输出如下：

This brings an end to this tutorial. You can download the final project from the link below:

本教程到此结束。您可以从下面的链接下载最终项目：

AndroidCustomChromeTabs Android自定义Chrome标签

Github Project Github项目