使用SharedElement切換Fragment頁(yè)面

歡迎Follow我的GitHub, 關(guān)注我的簡(jiǎn)書(shū). 其余參考Android目錄.

效果

本文的合集已經(jīng)編著成書(shū)，高級(jí)Android開(kāi)發(fā)強(qiáng)化實(shí)戰(zhàn)，歡迎各位讀友的建議和指導(dǎo)。在京東即可購(gòu)買(mǎi)：https://item.jd.com/12385680.html

Android

又是一個(gè)Android的動(dòng)畫(huà)效果, Material提出的. Fragment切換時(shí), 有一些元素(element)會(huì)保持不變, 如何使這些元素切換時(shí), 賦予動(dòng)畫(huà)效果呢? 需要設(shè)置addSharedElement()方法, 目前只支持api21+. 那么我們就來(lái)看一下吧.

本文源碼的GitHub下載地址

1. 準(zhǔn)備

還是從一個(gè)HelloWorld工程開(kāi)始.
build.gradle添加兩個(gè)常用庫(kù), recyclerview和butterknife.

    compile 'com.jakewharton:butterknife:7.0.1'
    compile 'com.android.support:recyclerview-v7:23.1.0'

修改主題顏色

    <color name="colorPrimary">#FF1493</color>
    <color name="colorPrimaryDark">#FF1493</color>

去掉狀態(tài)條(status bar)的透明顏色, 在style中, 刪除statusBarColor.

<item name="android:statusBarColor">@android:color/transparent</item>

2. 主頁(yè)面

在Activity中添加Fragment, 內(nèi)容在Fragment中添加

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 替換Fragment
        if (savedInstanceState == null) {
            getSupportFragmentManager().beginTransaction()
                    .add(R.id.main_cl_container, new GridFragment())
                    .commit();
        }
    }

Fragment中使用RecyclerView創(chuàng)建一個(gè)網(wǎng)格(Grid)頁(yè)面, 為Item添加點(diǎn)擊監(jiān)聽(tīng), 這個(gè)下一步再完成. Item顯示一個(gè)圖片和一行文字.

public class GridFragment extends Fragment {

    private ArrayList<Pair<Integer, Integer>> mData;

    @Bind(R.id.grid_rv_recycler)
    RecyclerView mRvRecycler;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_grid, container, false);
        ButterKnife.bind(this, view);
        return view;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        initData();

        mRvRecycler.setAdapter(new MyGridAdapter(mData, mListener));
        mRvRecycler.setLayoutManager(new GridLayoutManager(getContext(), 2)); // 一行兩個(gè)
    }

    private MyViewOnClickListener mListener = new MyViewOnClickListener() {
        @Override
        public void onClickedView(MyGridViewHolder holder, int position) {

        }
    };

    // 初始化數(shù)據(jù)
    private void initData() {
        mData = new ArrayList<>();

        mData.add(Pair.create(R.string.taeyeon, R.drawable.taeyeon));
        mData.add(Pair.create(R.string.jessica, R.drawable.jessica));
        mData.add(Pair.create(R.string.sunny, R.drawable.sunny));
        mData.add(Pair.create(R.string.tiffany, R.drawable.tiffany));
        mData.add(Pair.create(R.string.yuri, R.drawable.yuri));
        mData.add(Pair.create(R.string.yoona, R.drawable.yoona));
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        ButterKnife.unbind(this);
    }
}

RecyclerView的Adapter

/**
 * Fragment的網(wǎng)格適配器
 * <p/>
 * Created by wangchenlong on 15/11/5.
 */
public class MyGridAdapter extends RecyclerView.Adapter<MyGridViewHolder> {

    private ArrayList<Pair<Integer, Integer>> mData; // 名字和圖片
    private MyViewOnClickListener mListener; // 點(diǎn)擊事件

    public MyGridAdapter(ArrayList<Pair<Integer, Integer>> data,
                         MyViewOnClickListener listener) {
        mData = data;
        mListener = listener;
    }

    @Override
    public MyGridViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.grid_item, parent, false);
        return new MyGridViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final MyGridViewHolder holder, final int position) {
        holder.getTextView().setText(mData.get(position).first);
        holder.getImageView().setImageResource(mData.get(position).second);

        // 把每個(gè)圖片視圖設(shè)置不同的Transition名稱(chēng), 防止在一個(gè)視圖內(nèi)有多個(gè)相同的名稱(chēng), 在變換的時(shí)候造成混亂
        // Fragment支持多個(gè)View進(jìn)行變換, 使用適配器時(shí), 需要加以區(qū)分
        ViewCompat.setTransitionName(holder.getImageView(), String.valueOf(position) + "_image");

        holder.getImageView().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mListener.onClickedView(holder, position);
            }
        });
    }

    @Override
    public int getItemCount() {
        return mData.size();
    }
}

注意ViewCompat.setTransitionName();, 把不同的視圖設(shè)置不同的變換名稱(chēng), 防止造成混亂, 同時(shí)支持多個(gè)視圖同時(shí)變換.

ViewHolder

/**
 * 提供了Grid的ImageView
 * <p/>
 * Created by wangchenlong on 15/11/5.
 */
public class MyGridViewHolder extends RecyclerView.ViewHolder {

    private ImageView mImageView;
    private TextView mTextView;

    public MyGridViewHolder(View itemView) {
        super(itemView);
        mImageView = (ImageView) itemView.findViewById(R.id.grid_image);
        mTextView = (TextView) itemView.findViewById(R.id.grid_text);
    }

    public ImageView getImageView() {
        return mImageView;
    }

    public TextView getTextView() {
        return mTextView;
    }
}

點(diǎn)擊接口, 提供ViewHolder和點(diǎn)擊的位置position.

public interface MyViewOnClickListener {
    void onClickedView(MyGridViewHolder holder, int position);
}

效果


Grid

3. 詳情頁(yè)面

主頁(yè)面跳轉(zhuǎn)之后的詳情頁(yè)面, 根據(jù)選擇的ID, 創(chuàng)建不同內(nèi)容的Fragment, 點(diǎn)擊圖片返回上一個(gè)Fragment, 和主頁(yè)面聯(lián)動(dòng)執(zhí)行動(dòng)畫(huà), 動(dòng)畫(huà)邏輯在主頁(yè)面的FragmentManager中添加的.

/**
 * 詳情頁(yè)面
 * <p/>
 * Created by wangchenlong on 15/11/5.
 */
public class DetailFragment extends Fragment {

    private static final String ARG_NUMBER = "arg_number";
    private ArrayList<DetailData> mDetailDatas;

    @Bind(R.id.detail_image)
    ImageView mImage;

    @Bind(R.id.detail_head)
    TextView mHead;

    @Bind(R.id.detail_body)
    TextView mBody;

    /**
     * 根據(jù)選擇的number, 選擇展示的數(shù)據(jù)
     *
     * @param number 數(shù)字
     * @return 詳情頁(yè)面
     */
    public static DetailFragment newInstance(@IntRange(from = 0, to = 5) int number) {
        Bundle bundle = new Bundle();
        bundle.putInt(ARG_NUMBER, number);

        DetailFragment detailFragment = new DetailFragment();
        detailFragment.setArguments(bundle);

        return detailFragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_detail, container, false);
        ButterKnife.bind(this, view);
        return view;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        initData();

        int number = getArguments().getInt(ARG_NUMBER);
        mImage.setImageResource(mDetailDatas.get(number).getImage());
        mHead.setText(mDetailDatas.get(number).getHead());
        mBody.setText(mDetailDatas.get(number).getBody());

        mImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getActivity().getSupportFragmentManager().popBackStack();
            }
        });
    }



    // 初始化數(shù)據(jù)
    private void initData() {
        mDetailDatas = new ArrayList<>();
        mDetailDatas.add(new DetailData(R.drawable.taeyeon, R.string.taeyeon, R.string.taeyeon_detail));
        mDetailDatas.add(new DetailData(R.drawable.jessica, R.string.jessica, R.string.jessica_detail));
        mDetailDatas.add(new DetailData(R.drawable.sunny, R.string.sunny, R.string.sunny_detail));
        mDetailDatas.add(new DetailData(R.drawable.tiffany, R.string.tiffany, R.string.tiffany_detail));
        mDetailDatas.add(new DetailData(R.drawable.yuri, R.string.yuri, R.string.yuri_detail));
        mDetailDatas.add(new DetailData(R.drawable.yoona, R.string.yoona, R.string.yoona_detail));
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        ButterKnife.unbind(this);
    }

    // 定義類(lèi)
    private class DetailData {
        private int mImage;
        private int mHead;
        private int mBody;

        public DetailData(int image, int head, int body) {
            mImage = image;
            mHead = head;
            mBody = body;
        }

        public int getImage() {
            return mImage;
        }

        public int getHead() {
            return mHead;
        }

        public int getBody() {
            return mBody;
        }
    }
}

關(guān)鍵的資源文件, 有一條重要的屬性, android:transitionName=""表明需要轉(zhuǎn)換對(duì)象的名稱(chēng), 在點(diǎn)擊事件中使用.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
              android:gravity="center"
              android:orientation="vertical"
              android:padding="16dp">

    <ImageView
        android:id="@+id/detail_image"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:scaleType="centerCrop"
        android:src="@drawable/tiffany"
        android:transitionName="@string/image_transition"
        tools:ignore="UnusedAttribute"/>

    <TextView
        android:id="@+id/detail_head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tiffany"
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"/>

    <TextView
        android:id="@+id/detail_body"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tiffany_detail"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"/>

</LinearLayout>

效果


Detail

重寫(xiě)GridFragment的點(diǎn)擊事件

    /**
     * 點(diǎn)擊事件, 轉(zhuǎn)換元素的動(dòng)畫(huà),
     * 關(guān)鍵addSharedElement(holder.getImageView(), getResources().getString(R.string.image_transition))
     * 綁定ViewHolder的圖片和DetailFragment的跳轉(zhuǎn).
     */
    private MyViewOnClickListener mListener = new MyViewOnClickListener() {
        @Override
        public void onClickedView(MyGridViewHolder holder, int position) {
            DetailFragment detailFragment = DetailFragment.newInstance(position);

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                detailFragment.setSharedElementEnterTransition(new DetailTransition());
                setExitTransition(new Fade());
                detailFragment.setEnterTransition(new Fade());
                detailFragment.setSharedElementReturnTransition(new DetailTransition());
            }

            getActivity().getSupportFragmentManager().beginTransaction()
                    .addSharedElement(holder.getImageView(), getResources().getString(R.string.image_transition))
                    .replace(R.id.main_cl_container, detailFragment)
                    .addToBackStack(null)
                    .commit();
        }
    };

關(guān)鍵addSharedElement(), 確定轉(zhuǎn)換的元素View.
Fade是淡出動(dòng)畫(huà); DetailTransition是自定義動(dòng)畫(huà).

填寫(xiě)動(dòng)畫(huà)屬性

/**
 * 轉(zhuǎn)換動(dòng)畫(huà)
 * Created by wangchenlong on 15/11/5.
 */
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public class DetailTransition extends TransitionSet {
    public DetailTransition() {
        init();
    }

    // 允許資源文件使用
    public DetailTransition(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        setOrdering(ORDERING_TOGETHER);
        addTransition(new ChangeBounds()).
                addTransition(new ChangeTransform()).
                addTransition(new ChangeImageTransform());
    }
}

動(dòng)畫(huà)效果, 添加屬性即可.
ChangeBounds: 視圖的位置和大小;
ChangeTransform: 視圖的比例(scale);
ChangeImageTransform: 圖像的比例;

都完成了, 當(dāng)切換Fragment時(shí), 關(guān)聯(lián)視圖就會(huì)使用動(dòng)畫(huà)進(jìn)行播放!

OK, that's all ! Enjoy it!

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,872評(píng)論 25贊 709
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 47,144評(píng)論 22贊 665
  • 最近做了一個(gè)Android UI相關(guān)開(kāi)源項(xiàng)目庫(kù)匯總，里面集合了OpenDigg 上的優(yōu)質(zhì)的Android開(kāi)源項(xiàng)目庫(kù)...
    OpenDigg閱讀 17,611評(píng)論 6贊 222
  • 10多個(gè)人的團(tuán)隊(duì)，1個(gè)多月的努力，新的電商購(gòu)物網(wǎng)站2.0版上線(xiàn)。昨天晚上同事都在熬夜遷移數(shù)據(jù)，今天中午遷移完畢，我...
    BenPro閱讀 254評(píng)論 0贊 0
  • 文 / 樸玄 當(dāng)初高考后選志愿時(shí)，沒(méi)有仔細(xì)思考，胡亂填了一個(gè)志愿，就這樣與建筑結(jié)緣。大學(xué)畢業(yè)之時(shí)，恰好又簽了施工單...
    樸玄閱讀 773評(píng)論 7贊 8

友情鏈接更多精彩內(nèi)容