安卓学习笔记5.4—Fragment入门

心已赠人 2024-04-01 18:39 69阅读 0赞

## 零、学习目标 ##

1.  了解Fragment与Activity的关系
2.  掌握Fragment的生命周期
3.  学会编写多Fragment安卓程序

## 一、Fragment概述 ##

Fragment是android3.0引入的新API，它代表Activity的子模板，所以可以把fragment理解为Activity片段。  
Fragment必须被“嵌入”Avtivity中使用，因此Fragment也拥有自己的生命周期，不过Fragment的生命周期受Activity所控制，也就是说Activity停止的时候，Activity中所有的Fragment都会被停止。其他状态也是一样。

## 二、Fragment[生命周期][Link 1] ##

![c3a78df5b3474fb7975bfe188f21f9a6.png][]

### 1、涉及知识点 ###

1.  Activity （活动窗口）
2.  Fragment（碎片、片段） - 碎片化学习（Fragmental Learning）
3.  TextView（标签）
4.  Button（按钮）
5.  GestureDetector（手势侦测器）
6.  GestureListener（手势监听器）

## 三、实现步骤 ##

### 1、创建安卓应用【SwitchFragment】 ###

![1ab91e56bc62490aaef423c4a8b86e99.png][]

单击finish,完成![9b2427b0e26e47e2a181a96a695b5a42.png][]

### 2、将三张背景图片拷贝到drawable目录 ###

![a5315673a0274db78ad882be90cbfc0c.png][]

### 3、字符串资源文件 ###

![79cbd88806e144a8a644af2efdf77135.png][]

<resources>
        <string name="app_name">切换碎片</string>
        <string name="first_fragment">第一个碎片</string>
        <string name="second_fragment">第二个碎片</string>
        <string name="third_fragment">第三个碎片</string>
        <string name="next_fragment">下一个碎片</string>
    </resources>

### 4、主布局资源文件activity\_main.[xml][] ###

![e13051735865476f89bbaa30c1ab54f4.png][]

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

*  主布局现在没有负责具体的界面设计工作，它只是提供一个容器或平台，让碎片们去负责各自的界面设计

### 5、创建碎片 ###

#### （1）创建第一个碎片 ####

*  基于模板创建碎片—FirstFragment

![73984e18a31340419bc1d868617d182a.png][]

![e11410dfae024e38ae6dad050f4061e0.png][] 设置碎片名称—FirstFragment

单击Finish，完成

![e7dc5f6dda024b18ae31bbf88e6b99be.png][]

修改第一个碎片的布局文件—fragment\_first

<?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:background="@drawable/img01"
        android:gravity="center"
        android:orientation="vertical"
        tools:context=".FirstFragment">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:text="@string/first_fragment"
            android:textColor="#ff0000"
            android:textSize="25sp" />
    
        <Button
            android:id="@+id/btnNextFragment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doNextFragment"
            android:text="@string/next_fragment"/>
    </LinearLayout>

#### （2）创建第二个碎片 ####

![791b44973c9943d1ba020aca38263df2.png][]

![43e971f277fb40de9c1465c504239579.png][]

#### 修改二个碎片的布局文件—fragment\_secnd第 ####

<?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:background="@drawable/img02"
        android:gravity="center"
        android:orientation="vertical"
        tools:context=".FirstFragment">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:text="@string/second_fragment"
            android:textColor="#00ff00"
            android:textSize="25sp" />
    
        <Button
            android:id="@+id/btnNextFragment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doNextFragment"
            android:text="@string/next_fragment"/>
    </LinearLayout>

#### （3）创建第三个碎片 ####

![d02aced869934439be26c42633a21b93.png][]

![f0c6750a14e34681b34a3090dcda7944.png][]

修改三个碎片的布局文件—fragment\_third

<?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:background="@drawable/img03"
        android:gravity="center"
        android:orientation="vertical"
        tools:context=".FirstFragment">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:text="@string/third_fragment"
            android:textColor="#0000ff"
            android:textSize="25sp" />
    
        <Button
            android:id="@+id/btnNextFragment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doNextFragment"
            android:text="@string/next_fragment"/>
    </LinearLayout>

### 6、主界面类实现功能 ###

package net.hw.switch_fragment;
    
    import android.os.Bundle;
    
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.fragment.app.FragmentManager;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            // 利用布局资源文件设置用户界面
            setContentView(R.layout.activity_main);
    
            // 获取碎片管理器
            FragmentManager fm = getSupportFragmentManager();
    
            // 在主容器里添加第一个碎片
            fm.beginTransaction().add(R.id.container, new FirstFragment()).commit();
        }
    }

### 7、启动应用，查看代码 ###

还没有出来

### 8、碎片界面实现功能 ###

#### （1）第一个碎片界面类 ####

![56da8293ee704090b1d01f7b68f963f9.png][]

package net.hw.switch_fragment;
    
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.Button;
    
    import androidx.fragment.app.Fragment;
    
    public class FirstFragment extends Fragment {
    
        private Button btnNextFragment;
    
        public FirstFragment() {
        }
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
    
            // 获取碎片视图
            View view = inflater.inflate(R.layout.fragment_first, container, false);
            // 通过资源标识获得控件实例
            btnNextFragment = view.findViewById(R.id.btnNextFragment);
            // 给按钮注册监听器
            btnNextFragment.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    getFragmentManager().beginTransaction()
                            .addToBackStack("next")
                            .replace(R.id.container, new SecondFragment())
                            .commit();
                }
            });        
    
            // 返回视图
            return view;       
        }
    }

#### （2）第二个碎片界面类 ####

package net.hw.switch_fragment;
    
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.Button;
    
    import androidx.fragment.app.Fragment;
    
    public class ThirdFragment extends Fragment {
    
        private Button btnNextFragment;
    
        public ThirdFragment() {
        }
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
    
            // 获取碎片视图
            View view = inflater.inflate(R.layout.fragment_third, container, false);
            // 通过资源标识获得控件实例
            btnNextFragment = view.findViewById(R.id.btnNextFragment);
            // 给按钮注册监听器
            btnNextFragment.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    getFragmentManager().beginTransaction()
                            .addToBackStack("next")
                            .replace(R.id.container, new FirstFragment())
                            .commit();
                }
            });
    
            // 返回视图
            return view;
        }
    }

#### （3）第三个碎片界面类 ####

package net.hw.switch_fragment;
    
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.Button;
    
    import androidx.fragment.app.Fragment;
    
    public class ThirdFragment extends Fragment {
    
        private Button btnNextFragment;
    
        public ThirdFragment() {
        }
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
    
            // 获取碎片视图
            View view = inflater.inflate(R.layout.fragment_third, container, false);
            // 通过资源标识获得控件实例
            btnNextFragment = view.findViewById(R.id.btnNextFragment);
            // 给按钮注册监听器
            btnNextFragment.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    getFragmentManager().beginTransaction()
                            .addToBackStack("next")
                            .replace(R.id.container, new FirstFragment())
                            .commit();
                }
            });
    
            // 返回视图
            return view;
        }
    }

### 9、启动应用，查看效果 ###

还没有出来

### 10、优化代码存在的不足 ###

*  每次切换碎片时，都是利用new来创建新的碎片，这样在不断切换碎片的过程中，就导致资源的浪费
 *  创建碎片列表类 - FragmentList - 用于保存程序要用到的碎片对象
 *  
 *      package net.hw.switch_fragment;
        
        import androidx.fragment.app.Fragment;
        
        import java.util.ArrayList;
        import java.util.List;
        
        public class FragmentList {
            public static List<Fragment> fragments = new ArrayList<>();
        }
 *  修改第一个碎片界面类 - FirstFragment
 *  ![347f43f365eb44779181c96502c42a5e.png][]
 *  修改第二个碎片界面类 - SecondFragment
 *  ![d671964f4d19438ab7d6559e72f2c52d.png][]
 *  修改第三个碎片界面类 - ThirdFragment
 *  ![019822b352ca48b5b3e1b8495f8354ae.png][]

### 11、修改主界面类，实现手势切换碎片 ###

package net.hw.switch_fragment;
    
    import android.os.Bundle;
    import android.view.GestureDetector;
    import android.view.MotionEvent;
    
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.fragment.app.FragmentManager;
    
    public class MainActivity extends AppCompatActivity {
    
        private GestureDetector detector;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            // 利用布局资源文件设置用户界面
            setContentView(R.layout.activity_main);
    
            // 获取碎片管理器
            FragmentManager fm = getSupportFragmentManager();
    
            // 创建三个碎片，添加到碎片列表
            FragmentList.fragments.add(new FirstFragment());
            FragmentList.fragments.add(new SecondFragment());
            FragmentList.fragments.add(new ThirdFragment());
    
            // 在主容器里添加第一个碎片
            fm.beginTransaction().add(R.id.container, FragmentList.fragments.get(0)).commit();
    
            // 实例化手势侦测器
            detector = new GestureDetector(new GestureDetector.OnGestureListener() {
                @Override
                public boolean onDown(MotionEvent motionEvent) {
                    return false;
                }
    
                @Override
                public void onShowPress(MotionEvent motionEvent) {
    
                }
    
                @Override
                public boolean onSingleTapUp(MotionEvent motionEvent) {
                    return false;
                }
    
                @Override
                public boolean onScroll(MotionEvent motionEvent, MotionEvent motionEvent1, float v, float v1) {
                    return false;
                }
    
                @Override
                public void onLongPress(MotionEvent motionEvent) {
    
                }
    
                @Override
                public boolean onFling(MotionEvent e1, MotionEvent e2, float v, float v1) {
                    // 手势往左滑动10个像素，切换到下一个碎片
                    if (e1.getX() - e2.getX() > 10) {
                        // 获取返回栈条目个数
                        int count = getSupportFragmentManager().getBackStackEntryCount();
                        // 获取碎片索引
                        int index = ++count % 3;
                        // 切换碎片
                        getSupportFragmentManager().beginTransaction()
                                .addToBackStack("" + index)
                                .replace(R.id.container, FragmentList.fragments.get(index))
                                .commit();
                    }
                    return true;
                }
            });
        }
    
        /**
         * 将窗口的触摸事件交给收拾侦测器来处理
         * 
         * @param event
         * @return
         */
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            return detector.onTouchEvent(event);
        }
    }

[Link 1]: https://so.csdn.net/so/search?q=%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F&spm=1001.2101.3001.7020
[c3a78df5b3474fb7975bfe188f21f9a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0e4bec3e940a4620bb2e423b61baa1d1.png
[1ab91e56bc62490aaef423c4a8b86e99.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/03004a6675234029a14d26cda92b274e.png
[9b2427b0e26e47e2a181a96a695b5a42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d2ed3be23f04434eb7920bcd4864c6d3.png
[a5315673a0274db78ad882be90cbfc0c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7284f316df4f40f7ac0351b57d2fcad6.png
[79cbd88806e144a8a644af2efdf77135.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/adea9de1c9514433a85b652bd2d7c73f.png
[xml]: https://so.csdn.net/so/search?q=xml&spm=1001.2101.3001.7020
[e13051735865476f89bbaa30c1ab54f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d0922cd5642046af916db0983182d3bc.png
[73984e18a31340419bc1d868617d182a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/94aba470bd2d400aa4f1cca52fc1e72e.png
[e11410dfae024e38ae6dad050f4061e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d6ded46774194fcf8e2905048ec82107.png
[e7dc5f6dda024b18ae31bbf88e6b99be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/36edc73a05f14c2db425a04008b6f81b.png
[791b44973c9943d1ba020aca38263df2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/20e0f64969dc4a389add9ec4e186ffff.png
[43e971f277fb40de9c1465c504239579.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c5ed795af18748df807a698c40bfc4b1.png
[d02aced869934439be26c42633a21b93.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b85fb31e065749d785fa554c8127de97.png
[f0c6750a14e34681b34a3090dcda7944.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e4b084b8c2fc44059ce49beb6d5ac465.png
[56da8293ee704090b1d01f7b68f963f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/00eca782fd994ed8837cb3af8cc42afc.png
[347f43f365eb44779181c96502c42a5e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/403e8b8e6ca04c0997147a0c42ce89c7.png
[d671964f4d19438ab7d6559e72f2c52d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1f2c7f32be69488abdb1e78c3ec6d659.png
[019822b352ca48b5b3e1b8495f8354ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/adb6b56e09b64b629d6188941adeab4c.png