Fragment跳轉的騷操作

筆墨Android發表於2019-01-18
Fragment

你還在為Fragment之間的跳轉感到疑惑嗎？你還在為Fragement的返回而苦惱嗎？

那麼你的春天來了。。。

Google在2018年I/O大會上推出了一個新的元件Navigation，我是最近才發現的。真的有一種相見恨晚的感覺！

本文知識點

  • Navigation的說明
  • Navigation的簡單使用
  • Navigation的注意事項

1. Navigation的說明

Navation提供了單Activity多Fragment之間的轉場和棧管理，幫助我們輕鬆的解決Fragment之間的跳轉問題；再也不用add和replace的一些列操作了！使用它之後，你會有一種相見恨晚的感腳的。相信我。。。

2. Navigation的簡單使用

首先Navigation是在Android Student 3.2以上才可以使用的。你說你懶，好我給你個地址下載地址 還有一個問題，預設Android Student 是沒有開啟Navigation的，你可以將Settings->Experimental介面中最下面Enable Navigation Editor勾上即可(要重啟才會生效的)。

做好上面的準備之後，我們就可以開始了！！！

盤他

2.1 引入相應的類庫

    implementation 'android.arch.navigation:navigation-fragment:1.0.0-alpha09'
    implementation 'android.arch.navigation:navigation-ui:1.0.0-alpha09'
複製程式碼

這個是Navigation所需要的類庫，直接引入就好了！！！

2.2 建立相應的導航圖

這裡直接res->New->Android Resource File然後直接進行相應的選擇就可以了！

圖片展示
把上面的名稱換成你想要的名稱就可以，別用中文啊。你老大發現了會打你的！ 這裡為了演示Demo方便，建議你先建立兩個Fragment。我這裡建立了一個FirstFragment和SecondFragment兩個Fragment，方便後面的演示！

圖片展示
這裡為了方便演示，我就直接先建立了一個Destination相當於建立了一個開始的目標，也就是上面展示的那個頁面，其實這種視覺化真的是很方便。一會兒我在說程式碼該怎麼寫！但是這裡有一個點需要注意，因為Navigation 是處理Fragment之前的跳轉，所以這裡只能以Fragment作為開始的目標，進行跳轉！上圖目標的右邊有一個小圈圈，是可以為了實現跳轉的。

展示圖片
當你又選擇了一個Fragment並且連線了之後，會變成上面的樣子。這裡有個小技巧說明一下，你可以點選中間的連線線，是可以設定相應的跳轉動畫。

展示圖片
畫紅框的地方是新增動畫的。這裡預設的動畫，就是一個漸變動畫。其實我覺得應該更換一下，這個動畫實在是太難看了。。。

上面的步驟都完成了之後我們看一下相應的xml檔案，並且進行一下說明：

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.lon.angle.myapplication.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first">
        <action
            android:id="@+id/action_firstFragment_to_secondFragment"
            app:destination="@id/secondFragment"
            app:enterAnim="@anim/nav_default_enter_anim"
            app:exitAnim="@anim/nav_default_exit_anim"
            app:popEnterAnim="@anim/nav_default_pop_enter_anim"
            app:popExitAnim="@anim/nav_default_pop_exit_anim" />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.lon.angle.myapplication.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second">
        <action
            android:id="@+id/action_secondFragment_to_firstFragment"
            app:destination="@id/firstFragment" />
    </fragment>
</navigation>
複製程式碼

說下上面的xml程式碼：

  • fragment 可以指定一個Fragment你可以理解成在正常的佈局檔案中的那個fragment
  • tools:layout 這個是指定相應的佈局檔案的，用於顯示。
  • action 這個標籤代表一個目標，其實你可以理解成那條線
    • id 那條線的標識，之後會根據這個標識進行跳轉的
    • destination 目標id也就是你要跳轉的fragment（這裡其實也可以是Activity）
    • enterAnim/exitAnim/popEnterAnim/popExitAnim 這幾個就是動畫了。

基本上就這麼多了，剩下的就是處理相應的跳轉了。接下來我們看看Activity中的佈局是怎麼寫的！

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


    <fragment
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/fragment"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_test"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
複製程式碼

說下這裡的幾個引數

  • name 這裡面是寫死的“androidx.navigation.fragment.NavHostFragment”你只要寫上這個就可以了
  • defaultNavHost 這個寫上true就可以了
  • navGraph 這個是你建立的navigation的xml的名稱
  • id 就不說了

這些都完成了，那我們就看一下Fragment怎麼實現跳轉吧！！！

public class Main3Activity extends AppCompatActivity {

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

    @Override
    public boolean onSupportNavigateUp() {
        Fragment fragment = getSupportFragmentManager().findFragmentById(R.id.fragment);
        if(fragment==null){
            return false;
        }
        return NavHostFragment.findNavController(fragment).navigateUp();
    }
}
複製程式碼

沒錯，就直接覆寫onSupportNavigateUp這個方法，直接把id填進去就可以了，這裡**NavHostFragment.findNavController(fragment).navigateUp();**是初始化的方法。

之後就是相應Fragment中的操作了，我麼看一下Fragment的中的內容吧！

public class FirstFragment extends Fragment {


    public FirstFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_first, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        Button btnNext = view.findViewById(R.id.btn_next);
        btnNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Navigation.findNavController(v).navigate(R.id.action_firstFragment_to_secondFragment);
            }
        });
    }
}
複製程式碼

就是一個常規的Fragment，其實最主要的就是Navigation.findNavController(v).navigate(R.id.action_firstFragment_to_secondFragment); 還記得之前action的id吧！這裡就是根據那個id進行跳轉的！！！可以根據action直接就跳轉過去了！

然後我們來看一下第二個Fragment中的程式碼：

public class SecondFragment extends Fragment {


    public SecondFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_second, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        Button btnBack = view.findViewById(R.id.btn_back);
        btnBack.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                Navigation.findNavController(v).navigate(R.id.action_secondFragment_to_firstFragment);

//                Navigation.findNavController(v).navigateUp();
            }
        });
    }
}
複製程式碼

這裡在onClick中我寫了兩行程式碼，第一行是根據action直接跳轉的，和前面的一樣我就不說了，第二個是直接跳轉到初始狀態，因為只涉及到兩個Fragment之間的跳轉，所以你可以這麼寫，但是如果過了的話，還是根據action進行跳轉比較好！！！

這裡給你一張效果圖給你演示一下相應的效果：

展示效果圖
效果還是比較簡單的！！！

基本上通過以上的騷操作就可以進行相應的跳轉了。。。

3. Navigation的注意事項

  • 關於傳值的問題
  • 關於跳轉的問題
  • 待發現的問題。。。

3.1 關於傳值的問題

其實很多場景之間Fragment都是有相應傳值的問題的，那麼怎麼進行相應的傳值呢？其實就是通過Bundle進行傳遞的。

		Bundle bundle = new Bundle();
        bundle.putString("aaa","aaa");
        Navigation.findNavController(v).navigate(R.id.action_firstFragment_to_mainActivity,bundle);
複製程式碼

就是在你跳轉的時候多傳入一個Bundle就可以了。

在Fragment接收的話,按照下面的程式碼進行就可以了。判空自己判斷吧！

		Bundle bundle = getArguments();
複製程式碼

如果在Activiy中接收的話，按照如下程式碼進行接收可以了。

		Bundle bundle = getIntent().getExtras();
複製程式碼

3.2 關於跳轉的問題

其實跳轉你要確保相應的action存在，只要action存在根據id進行跳轉就可以了，其實有視覺化工具的話，這個比較好處理的。

關於Navigation的內容就這麼多，可能還有很多不到位的地方，目前我沒有發現什麼坑，如果有的話可以給我留言，大家一起討論下。

好了今天就到這裡吧！！！

相關文章