Android上机实验-6 Fragment的使用

一、实验目的

掌握碎片Fragment的创建。

掌握Fragment和Activity相互传值。

掌握碎片Fragment结合ViewPager实现左右滑屏效果。

二、实验内容

实验题目1 Fragment动态加载填充

任务要求：参考常用APP自行设计导航界面（如学习强国、微信等），页面内容部分使用碎片进行填充，点击实现内容切换。页面内容中显示学号、姓名。

实验题目2 Fragment和ViewPager实现左右滑动界面

任务要求：参考常用APP，使用ViewPager控件结合碎片实现碎片的左右滑动，类似滚动图效果。

三、实验指导

1、写一个类继承Fragment类，重写onCreateView，解析碎片对应的资源文件转换成View视图对象。

2、在activity中获取碎片管理器的对象。

3、开启事务。

4、替换容器中的碎片显示内容（fragment）。

5、使用事务进行提交。

6、将模拟器运行结果截图到word文档中，并将核心代码复制到word文档中。

四、模拟器效果截图

实验题目1 Fragment动态加载填充

实验题目2 Fragment和ViewPager实现左右滑动界面

 五、实验源代码

 Fragment01.java

package com.example.myapplication02;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.Nullable;

public class Fragment01 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        //解析碎片对应的布局文件
        View view= inflater.inflate(R.layout.fragment01,null);
        return view;
    }
}

 Fragment02.java

package com.example.myapplication02;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.Nullable;

public class Fragment02 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        //解析碎片对应的布局文件
        View view= inflater.inflate(R.layout.fragment02,null);
        return view;
    }
}

 Fragment02.java

package com.example.myapplication02;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.Nullable;

public class Fragment03 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        //解析碎片对应的布局文件
        View view= inflater.inflate(R.layout.fragment03,null);
        return view;
    }
}

FragPageAdapter.java

package com.example.myapplication02;

import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.viewpager.widget.PagerAdapter;
import java.util.List;

public class FragPageAdapter extends PagerAdapter {
    List<View> viewList;
    List<String> titlelist;
    public FragPageAdapter(List<View> viewList,List<String> titlelist) {
        this.viewList = viewList;
        this.titlelist=titlelist;
    }

    @Override
    public int getCount() {
        return viewList.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return view==o;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        container.addView(viewList.get(position));
        return viewList.get(position);
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(viewList.get(position));
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titlelist.get(position);
    }
}

fragment01.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@drawable/p01"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="240dp"
        android:textSize="26dp"
        android:textColor="@color/white"
        android:text="姓名：" />
</LinearLayout>

fragment02.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@drawable/p02"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="240dp"
        android:textSize="26dp"
        android:textColor="@color/white"
        android:text="学号：" />
</LinearLayout>

fragment03.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@drawable/p03"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="240dp"
        android:textSize="26dp"
        android:textColor="@color/white"
        android:text="好好学习，天天向上" />
</LinearLayout>

 实验题目1 Fragment动态加载填充

 FragmentWain.java

package com.example.myapplication02;

import androidx.appcompat.app.AppCompatActivity;

import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class FragmentWain extends AppCompatActivity {
    ImageView rabbit, dragon, snake;
    FragmentManager manager;
    FragmentTransaction ft;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fragmentwain);
        rabbit = findViewById(R.id.rabbit);
        dragon = findViewById(R.id.dragon);
        snake = findViewById(R.id.snake);
        MyListener listener = new MyListener();
        rabbit.setOnClickListener(listener);
        dragon.setOnClickListener(listener);
        snake.setOnClickListener(listener);

        manager = getFragmentManager();
        ft = manager.beginTransaction();
        ft.replace(R.id.frame, new Fragment01());
        ft.commit();//每次事务提交一次，把自己销毁
        rabbit.setImageResource(R.drawable.rabbit);
    }

    void initimage() {
        rabbit.setImageResource(R.drawable.rabbit);
        dragon.setImageResource(R.drawable.dragon);
        snake.setImageResource(R.drawable.snake);

    }

    class MyListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.rabbit:
                    Toast.makeText(FragmentWain.this, "rabbit", Toast.LENGTH_LONG).show();
                    //加载对应的碎片文件
                    ft = manager.beginTransaction();
                    ft.replace(R.id.frame, new Fragment01());
                    ft.commit();//每次事务提交一次，把自己销毁
                    initimage();
                    rabbit.setImageResource(R.drawable.rabbit);
                    break;
                case R.id.dragon:
                    Toast.makeText(FragmentWain.this, "dragon", Toast.LENGTH_LONG).show();
                    ft = manager.beginTransaction();
                    ft.replace(R.id.frame, new Fragment02());
                    ft.commit();//每次事务提交一次，把自己销毁
                    initimage();
                    dragon.setImageResource(R.drawable.dragon);
                    break;
                case R.id.snake:
                    Toast.makeText(FragmentWain.this, "snake", Toast.LENGTH_LONG).show();
                    ft = manager.beginTransaction();
                    ft.replace(R.id.frame, new Fragment03());
                    ft.commit();//每次事务提交一次，把自己销毁
                    initimage();
                    snake.setImageResource(R.drawable.snake);
                    break;
            }
        }
    }
}

 fragmentwain.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"
    tools:context=".FragmentWain"
    android:orientation="vertical">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/frame"/>
    <View android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/black"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/rabbit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/rabbit"/>
        <ImageView
            android:id="@+id/dragon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/dragon"/>
        <ImageView
            android:id="@+id/snake"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/snake"/>
    </LinearLayout>

</LinearLayout>

实验题目2 Fragment和ViewPager实现左右滑动界面

FragmentMain.java

package com.example.myapplication02;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import java.util.ArrayList;
import java.util.List;

public class FragmentMain extends AppCompatActivity {
    ViewPager viewPager;
    List<View> viewList;
    ImageView rabbit, dragon, snake;
    List<String> titlelist;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fragmentmian);
        viewPager = findViewById(R.id.viewpager);
        rabbit = findViewById(R.id.rabbit);
        dragon = findViewById(R.id.dragon);
        snake = findViewById(R.id.snake);
        MyLister lister = new MyLister();
        rabbit.setOnClickListener(lister);
        dragon.setOnClickListener(lister);
        snake.setOnClickListener(lister);
        viewList = new ArrayList<>();
        View view1 = View.inflate(this, R.layout.fragment01, null);
        View view2 = View.inflate(this, R.layout.fragment02, null);
        View view3 = View.inflate(this, R.layout.fragment03, null);
        titlelist=new ArrayList<>();
        titlelist.add("第一页");
        titlelist.add("第二页");
        titlelist.add("第三页");
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);
        FragPageAdapter pageAdapter = new FragPageAdapter(viewList,titlelist);
        viewPager.setAdapter(pageAdapter);
        //监听viewpager
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {
                initimage();
//                第一个参数为当前页面的索引值，第二个参数位置的偏移量，第三个参数是位置偏移量的像素值
                if (i == 0) {
                    rabbit.setImageResource(R.drawable.rabbit);
                } else if (i == 1) {
                    dragon.setImageResource(R.drawable.dragon);
                } else {
                    snake.setImageResource(R.drawable.snake);
                }
            }
            @Override
            public void onPageSelected(int i) {
            }
            @Override
            public void onPageScrollStateChanged(int i) {
            }
        });
    }
    void initimage() {
        rabbit.setImageResource(R.drawable.rabbit);
        dragon.setImageResource(R.drawable.dragon);
        snake.setImageResource(R.drawable.snake);
    }

    class MyLister implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.rabbit:
                    viewPager.setCurrentItem(0);
                    break;
                case R.id.dragon:
                    viewPager.setCurrentItem(1);
                    break;
                case R.id.snake:
                    viewPager.setCurrentItem(2);
                    break;
            }
        }
    }
}

fragmentmian.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"
    tools:context=".FragmentMain"
    android:orientation="vertical">
    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/viewpager">
        <androidx.viewpager.widget.PagerTabStrip
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:id="@+id/pagetitle"/>
    </androidx.viewpager.widget.ViewPager>
    <View android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/black"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/rabbit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/rabbit"/>
        <ImageView
            android:id="@+id/dragon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/dragon"/>
        <ImageView
            android:id="@+id/snake"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/snake"/>
    </LinearLayout>

</LinearLayout>