iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
0
Mobile Development

Andriod Studio 菜鳥的學習分享系列 第 22

[Android Studio菜鳥的學習分享]Fragment介紹

  • 分享至 

  • xImage
  •  

我們在製作APP時,
常常需要讓使用者在不跳頁的情況,
配合一些按鈕或選單讓頁面切換,
而同頁面切換就可以使用Fragment容器。
Fragment讓我們可以將我們所需的介面都放在裡面顯示,
切換頁面就直接切換內容即可,
非常方便~~


結果預覽:

紅色框框為Fragment容器,內容為fragment_test01_bmi.xml

https://ithelp.ithome.com.tw/upload/images/20200924/20129524HVpOqqYgTG.jpg


Gradle Scripts

加入androidx.fragment套件

implementation 'androidx.fragment:fragment:1.3.0-alpha08'

製作分頁(Fragment內容)FragmentTest01Bmi

Step01-新增Fragment Activity:

我這邊選擇空的樣板
https://ithelp.ithome.com.tw/upload/images/20200924/20129524WxDzzhTmoZ.jpg

Step02-頁面設計 fragment_test01_bmi.xml

https://ithelp.ithome.com.tw/upload/images/20200924/201295241uiK6TNTB2.jpg

<?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"
    tools:context=".FragmentTest01Bmi">

    <!-- TODO: Update blank fragment layout -->

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello to BMI"
        android:textAlignment="center"
        android:textSize="30sp"/>

</FrameLayout>

Step03-程式設計 FragmentTest01Bmi.java

我這邊先沒有製作,
但這邊要注意的大重點是:
(1)平常我的使用的this,
這邊需要改為this.getActivity()或this.getContext(),
這樣才抓的到目前的Activity或Context。

(2)起始程式需撰寫在onCreateView,
而不是onCreate。

詳細Fragment生命週期請見官方文件:
Fragment生命週期


activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.fragment.app.FragmentContainerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/fragment_test"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            >

        </androidx.fragment.app.FragmentContainerView>

    </androidx.constraintlayout.widget.ConstraintLayout>
    

</LinearLayout>

Step01-使用ConstraintLayout版面配置:

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

</androidx.constraintlayout.widget.ConstraintLayout>

Step02-加入Fragment容器:

<androidx.fragment.app.FragmentContainerView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:id="@+id/fragment_test"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent"
   >

</androidx.fragment.app.FragmentContainerView>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private FragmentTest01Bmi fragmentTest01Bmi;

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

        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTest01Bmi = new FragmentTest01Bmi();
        fragmentTransaction.add(R.id.fragment_test,fragmentTest01Bmi,"BMI");
        fragmentTransaction.show(fragmentTest01Bmi);
        fragmentTransaction.commit();

    }


}

Step01-新建Fragment管理員:

FragmentManager fragmentManager = getSupportFragmentManager();

Step02-新建Fragment指令器:

FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

Step03-將FragmentTest01Bmi使用add指令加入Fragment管理員:

fragmentTest01Bmi = new FragmentTest01Bmi();
fragmentTransaction.add(R.id.fragment_test,fragmentTest01Bmi,"BMI");

Step04-將FragmentTest01Bmi顯示:

fragmentTransaction.show(fragmentTest01Bmi);

Step05-將Fragment指令器內的指令們全部執行:

fragmentTransaction.commit();

FragmentTransaction常用指令補充:

(1) .add()

加入指定的Fragment頁面。

(2) .remove()

刪除指定的Fragment頁面。

(3) .replace()

它其實就是先進行.remove(),
再執行.add()。
注意:
replace()因為會使Fragment的生命週期重置,
所以依照不同情況可以選擇使用add() + show() + hide()來取代replace()

(4) .hide()

將已存在的Fragment隱藏。

(5) .show()

將已隱藏的Fragment顯示。

(6) .addToBackStack()

讓內容堆疊,
使用者可以使用返回鍵回上一個Fragment。

(7) .commit()

一定放在最後下這個指令,
它將執行FragmentTransaction內剛剛所下的所有指令。


上一篇
[Android Studio菜鳥的學習分享]UI分享(二) - BottomNavigationView
下一篇
[Android Studio菜鳥的學習分享]ViewPaper 可滑動介面分享
系列文
Andriod Studio 菜鳥的學習分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言