[译]GuidedStepFragment--Android T

作者: wenju_song | 来源:发表于2017-05-27 17:06 被阅读311次

推荐：
欢迎关注我创建的Android TV 简书专题，会定期给大家分享一些AndroidTv相关的内容：
http://www.jianshu.com/c/37efc6e9799b

FirstStepFragment

GuidedStepFragment显示设置显示

Leanback支持库提供一个Fragment。特别地，在设置显示中使用是有用的。官方文档说，

GuidedStepFragment用于指导用户做出决定或一系列决策。

我也建议你阅读这个主题的这些参考。

在MainFragment中创建GuidedStepActivity和实现onItemClicked

首先，通过右键单击您的包名称创建GuidedStepActivity新建→Java类→在类名称中键入“GuidedStepActivity”。注意，这个GuidedStepActivity不需要res / layout xml文件，所以只能创建Java类是可以的。使这个类的子类Activity（在类声明中写入“extends Activity”）。

然后，让我们按一下按钮来启动GuidedStepActivity。

    private final class ItemViewClickedListener implements OnItemViewClickedListener {
        @Override
        public void onItemClicked(Presenter.ViewHolder itemViewHolder, Object item,
                                  RowPresenter.ViewHolder rowViewHolder, Row row) {
            // each time the item is clicked, code inside here will be executed.
            if (item instanceof Movie) {
                Movie movie = (Movie) item;
                Log.d(TAG, "Item: " + item.toString());
                Intent intent = new Intent(getActivity(), DetailsActivity.class);
                intent.putExtra(DetailsActivity.MOVIE, movie);

                getActivity().startActivity(intent);
            } else if (item instanceof String){
                if (item == "ErrorFragment") {
                    Intent intent = new Intent(getActivity(), ErrorActivity.class);
                    startActivity(intent);
                } else if (item == "GuidedStepFragment") {
                    Intent intent = new Intent(getActivity(), GuidedStepActivity.class);
                    startActivity(intent);
                }
            }
        }

    private void loadRows() {
        mRowsAdapter = new ArrayObjectAdapter(new ListRowPresenter());

        /* GridItemPresenter */
        HeaderItem gridItemPresenterHeader = new HeaderItem(0, "GridItemPresenter");

        GridItemPresenter mGridPresenter = new GridItemPresenter();
        ArrayObjectAdapter gridRowAdapter = new ArrayObjectAdapter(mGridPresenter);
        gridRowAdapter.add("ErrorFragment");
        gridRowAdapter.add("GuidedStepFragment");
        gridRowAdapter.add("ITEM 3");
        mRowsAdapter.add(new ListRow(gridItemPresenterHeader, gridRowAdapter));

        ...
    }

所以我们可以从这里开始实现GuidedStepFragment。在实际实现之前，我将解释一下这个GuidedStepFragment的基本结构。

GuidedStepFragment - 结构

正如官方文档所述，它由左侧的指导意见和右侧的视图组成，其中包含可能的操作列表。

GuidedStepFragment由左侧的Guidance View和右侧的Actions视图组成。

覆盖方法

要使用GuidedStepFragment，我们需要至少覆盖这3个方法。

onCreateGuidance（捆绑）
- 创建指导视图（左侧）。
- 在这里指定指导的属性（标题，描述等）。
onCreateActions（List，Bundle）
- 定义可能的操作列表（右侧）。
- 在这里指定动作的属性。
onGuidedActionClicked（GuidedAction）
- 这是onClick监听器。
- 点击操作按钮之后的行为可以在这里指定。

至少如果你知道这一点，你可以使用GuidedStepFragment。但您可能需要修改本指南的设计布局。您可以使用“Theme”和“Stylist”自定义视觉样式

Theme

GuidedStepFragment必须接收Theme_Leanback_GuidedStep。我们可以通过三种方式之一设置主题，

1.将主题活动的主题设置为GuidedStep主题。

2.现有的活动主题可以为属性LeanbackGuidedStepTheme_guidedStepTheme添加一个条目。

3.GuidedStepFragment的自定义子类可以通过onProvideTheme（）方法提供一个主题。

Stylists

您也可以使用“Stylists”（而不是Presenter，我们目前使用的是自定义视觉样式），有2种Stylist类。

GuidanceStylist：左指导视图
- onCreateGuidanceStylist（）
GuidedActionsStylist：正确的操作视图
- onCreateActionsStylist（）

GuidedStepFragment - 最小化实现（覆盖方法）

要附加GuidedStepFragment的实例，我们可以使用GuidedStepFragment.add函数。这是FirstStepFragment类的实例，它是GuidedStepFragment的一个子类，它被添加在onCreate of GuidedStepActivity中。

还请检查3个重写方法的示例实现，例如onCreateGuidance，onCreateActions和onGuidedActionClicked。

package com.corochann.androidtvapptutorial;

import android.app.Activity;
import android.app.FragmentManager;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v17.leanback.app.GuidedStepFragment;
import android.support.v17.leanback.widget.GuidanceStylist;
import android.support.v17.leanback.widget.GuidedAction;
import android.util.Log;

import java.util.List;

/**
 * Created by corochann on 24/7/2015.
 */
public class GuidedStepActivity extends Activity {

    private static final String TAG = GuidedStepActivity.class.getSimpleName();

    /* Action ID definition */
    private static final int ACTION_CONTINUE = 0;
    private static final int ACTION_BACK = 1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        Log.d(TAG, "onCreate");
        super.onCreate(savedInstanceState);
        if (null == savedInstanceState) {
            GuidedStepFragment.add(getFragmentManager(), new FirstStepFragment());
        }
    }

    private static void addAction(List actions, long id, String title, String desc) {
        actions.add(new GuidedAction.Builder()
                .id(id)
                .title(title)
                .description(desc)
                .build());
    }

    public static class FirstStepFragment extends GuidedStepFragment {
        @NonNull
        @Override
        public GuidanceStylist.Guidance onCreateGuidance(Bundle savedInstanceState) {
            String title = "Title";
            String breadcrumb = "Breadcrumb";
            String description = "Description";
            Drawable icon = getActivity().getDrawable(R.drawable.ic_main_icon);

            return new GuidanceStylist.Guidance(title, description, breadcrumb, icon);
        }

        @Override
        public void onCreateActions(@NonNull List actions, Bundle savedInstanceState) {
            addAction(actions, ACTION_CONTINUE, "Continue", "Go to SecondStepFragment");
            addAction(actions, ACTION_BACK, "Cancel", "Go back");
        }

        @Override
        public void onGuidedActionClicked(GuidedAction action) {

            switch ((int) action.getId()){
                case ACTION_CONTINUE:
                    // FragmentManager fm = getFragmentManager();
                    // GuidedStepFragment.add(fm, new SecondStepFragment());
                    break;
                case ACTION_BACK:
                    getActivity().finish();
                    break;
                default:
                    Log.w(TAG, "Action is not defined");
                    break;
            }
        }
    }
}

构建并运行1

Guidance应该是这样的。

FirstStepFragment1
源码在github上。

GuidedStepFragment – Theme

我从Google示例源代码中复制了res / values / themes.xml。然后，你可以使用onProvideTheme方法来指定自定义的主题。

在AndroidManifest文件中，指定主题。

 <activity android:name="GuidedStepActivity"
            android:theme="@style/Theme.Example.Leanback.GuidedStep"/>

这个主题在Themes.xml定义入下：

    <style name="Theme.Example.Leanback.GuidedStep" parent="Theme.Leanback.GuidedStep">
        <item name="guidanceIconStyle">@style/Widget.Example.Leanback.GuidanceIconStyle</item>
    </style>

官方文档说明。

GuidedStepFragments必须具有访问适当的主题才能使设计师正常运行。具体来说，该片段必须接收Theme_Leanback_GuidedStep或其父设置为该主题的主题。

指定主题的另一种方法是覆盖GuidedStepFragment.onProvideTheme方法。

    public static class FirstStepFragment extends GuidedStepFragment {
        @Override
        public int onProvideTheme() {
            return R.style.Theme_Example_Leanback_GuidedStep_First;
        }

这一切都是为了实现FirstStepFragment，让我们继续介绍SecondStepFragment。

SecondStepFragment

首先让我们实现3个覆盖方法，onCreateGuidance，onCreateActions和onGuidedActionClicked。

    /* Action set ID */
    private static final int OPTION_CHECK_SET_ID = 10;

    /* Options of SecondStepFragment */
    private static final String[] OPTION_NAMES = {"Option A", "Option B", "Option C"};
    private static final String[] OPTION_DESCRIPTIONS = {"Here's one thing you can do",
            "Here's another thing you can do", "Here's one more thing you can do"};
    private static final int[] OPTION_DRAWABLES = {R.drawable.ic_guidedstep_option_a,
            R.drawable.ic_guidedstep_option_b, R.drawable.ic_guidedstep_option_c};
    private static final boolean[] OPTION_CHECKED = {true, false, false};

    ...

    public static class SecondStepFragment extends GuidedStepFragment {
        @NonNull
        @Override
        public GuidanceStylist.Guidance onCreateGuidance(Bundle savedInstanceState) {
            String title = "SecondStepFragment";
            String breadcrumb = "Guided Steps: 2";
            String description ="Showcasing different action configurations";
            Drawable icon = getActivity().getDrawable(R.drawable.ic_main_icon);
            return new GuidanceStylist.Guidance(title, description, breadcrumb, icon);
        }

        @Override
        public void onCreateActions(List<GuidedAction> actions, Bundle savedInstanceState) {
            String title = "infoOnly action";
            String desc = "infoOnly indicates whether this action is for information purposes only and cannot be clicked.\n" +
                    "The description can be long, by set multilineDescription to true";

            actions.add(new GuidedAction.Builder()
                    .title(title)
                    .description(desc)
                    .multilineDescription(true)
                    .infoOnly(true)
                    .enabled(false)
                    .build());
            for (int i = 0; i < OPTION_NAMES.length; i++) {
                addCheckedAction(actions,
                        OPTION_DRAWABLES[i],
                        getActivity(),
                        OPTION_NAMES[i],
                        OPTION_DESCRIPTIONS[i],
                        OPTION_CHECKED[i]);
            }
        }

        @Override
        public void onGuidedActionClicked(GuidedAction action) {
            String text = OPTION_NAMES[getSelectedActionPosition() - 1] + " clicked";
            Toast.makeText(getActivity(), text, Toast.LENGTH_SHORT).show();
        }
    }

单选按钮类型动作

onCreateActions中的addCheckedAction方法将使单选按钮类型操作列表。

    private static void addCheckedAction(List<GuidedAction> actions, int iconResId, Context context,
                                         String title, String desc, boolean checked) {
        GuidedAction guidedAction = new GuidedAction.Builder()
                .title(title)
                .description(desc)
                .checkSetId(OPTION_CHECK_SET_ID)
                .iconResourceId(iconResId, context)
                .build();
        guidedAction.setChecked(checked);
        actions.add(guidedAction);
    }

checkSetId方法是实现这一点的关键。当您使用相同的setId指定操作时，您只能选择其中一个操作。

GuidedStepFragment - Stylist

最后，定制Stylist。要定制左侧指导视图，请调用onCreateGuidanceStylist。

    public static class SecondStepFragment extends GuidedStepFragment {

        ...

        @Override
        public GuidanceStylist onCreateGuidanceStylist() {
            return new GuidanceStylist() {
                @Override
                public int onProvideLayoutId() {
                    return R.layout.guidedstep_second_guidance;
                }
            };
        }
    }

示例布局文件如下所示，因此您可以在此布局文件中指定引导视图的布局。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        style="?attr/guidanceContainerStyle"
        android:id="@+id/relative_layout">

        <ImageView
            android:id="@+id/guidance_icon"
            style="@style/Widget.Example.Leanback.SecondStepGuidanceIconStyle"
            android:layout_width="188dp"
            tools:ignore="ContentDescription" />

        <TextView
            android:id="@+id/guidance_title"
            android:textColor="@color/guidance_title"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            style="?attr/guidanceTitleStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/guidance_breadcrumb"
            android:textColor="@color/guidance_breadcrumb"
            android:textAlignment="center"
            android:gravity="center"
            style="?attr/guidanceBreadcrumbStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/guidance_description"
            android:textColor="@color/guidance_description"
            style="?attr/guidanceDescriptionStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </RelativeLayout>

</FrameLayout>

编译然后运行2

现在通过单选钮类型动作实现定制布局指导视图。

SecondStepFragment
源码在github上.
关注微信公众号，定期为你推荐移动开发相关文章。

songwenju

[译]GuidedStepFragment--Android T

GuidedStepFragment显示设置显示

在MainFragment中创建GuidedStepActivity和实现onItemClicked

GuidedStepFragment - 结构

覆盖方法

Theme

Stylists

GuidedStepFragment - 最小化实现（覆盖方法）

构建并运行1

GuidedStepFragment – Theme

SecondStepFragment

单选按钮类型动作

GuidedStepFragment - Stylist

编译然后运行2

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android TV

AndroidTV开发

Android TV开发

Android知识

Android技术知识

Android开发

Android开发

Android TV