一、实验目的
掌握碎片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
1. package com.example.myapplication02; 2. 3. import android.app.Fragment; 4. import android.os.Bundle; 5. import android.view.LayoutInflater; 6. import android.view.View; 7. import android.view.ViewGroup; 8. 9. import androidx.annotation.Nullable; 10. 11. public class Fragment01 extends Fragment { 12. @Nullable 13. @Override 14. public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { 15. //解析碎片对应的布局文件 16. View view= inflater.inflate(R.layout.fragment01,null); 17. return view; 18. } 19. }
Fragment02.java
1. package com.example.myapplication02; 2. 3. import android.app.Fragment; 4. import android.os.Bundle; 5. import android.view.LayoutInflater; 6. import android.view.View; 7. import android.view.ViewGroup; 8. 9. import androidx.annotation.Nullable; 10. 11. public class Fragment02 extends Fragment { 12. @Nullable 13. @Override 14. public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { 15. //解析碎片对应的布局文件 16. View view= inflater.inflate(R.layout.fragment02,null); 17. return view; 18. } 19. }
Fragment02.java
1. package com.example.myapplication02; 2. 3. import android.app.Fragment; 4. import android.os.Bundle; 5. import android.view.LayoutInflater; 6. import android.view.View; 7. import android.view.ViewGroup; 8. 9. import androidx.annotation.Nullable; 10. 11. public class Fragment03 extends Fragment { 12. @Nullable 13. @Override 14. public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { 15. //解析碎片对应的布局文件 16. View view= inflater.inflate(R.layout.fragment03,null); 17. return view; 18. } 19. }
FragPageAdapter.java
1. package com.example.myapplication02; 2. 3. import android.view.View; 4. import android.view.ViewGroup; 5. import androidx.annotation.NonNull; 6. import androidx.annotation.Nullable; 7. import androidx.viewpager.widget.PagerAdapter; 8. import java.util.List; 9. 10. public class FragPageAdapter extends PagerAdapter { 11. List<View> viewList; 12. List<String> titlelist; 13. public FragPageAdapter(List<View> viewList,List<String> titlelist) { 14. this.viewList = viewList; 15. this.titlelist=titlelist; 16. } 17. 18. @Override 19. public int getCount() { 20. return viewList.size(); 21. } 22. 23. @Override 24. public boolean isViewFromObject(@NonNull View view, @NonNull Object o) { 25. return view==o; 26. } 27. 28. @NonNull 29. @Override 30. public Object instantiateItem(@NonNull ViewGroup container, int position) { 31. container.addView(viewList.get(position)); 32. return viewList.get(position); 33. } 34. 35. @Override 36. public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { 37. container.removeView(viewList.get(position)); 38. } 39. 40. @Nullable 41. @Override 42. public CharSequence getPageTitle(int position) { 43. return titlelist.get(position); 44. } 45. }
fragment01.xml
1. <?xml version="1.0" encoding="utf-8"?> 2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3. android:orientation="vertical" 4. android:background="@drawable/p01" 5. android:layout_width="match_parent" 6. android:layout_height="match_parent"> 7. 8. <TextView 9. android:id="@+id/textView" 10. android:layout_width="match_parent" 11. android:layout_height="wrap_content" 12. android:gravity="center" 13. android:layout_marginTop="240dp" 14. android:textSize="26dp" 15. android:textColor="@color/white" 16. android:text="姓名:" /> 17. </LinearLayout>
fragment02.xml
1. <?xml version="1.0" encoding="utf-8"?> 2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3. android:orientation="vertical" 4. android:background="@drawable/p02" 5. android:layout_width="match_parent" 6. android:layout_height="match_parent"> 7. 8. <TextView 9. android:id="@+id/textView" 10. android:layout_width="match_parent" 11. android:layout_height="wrap_content" 12. android:gravity="center" 13. android:layout_marginTop="240dp" 14. android:textSize="26dp" 15. android:textColor="@color/white" 16. android:text="学号:" /> 17. </LinearLayout>
fragment03.xml
1. <?xml version="1.0" encoding="utf-8"?> 2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3. android:orientation="vertical" 4. android:background="@drawable/p03" 5. android:layout_width="match_parent" 6. android:layout_height="match_parent"> 7. 8. <TextView 9. android:id="@+id/textView" 10. android:layout_width="match_parent" 11. android:layout_height="wrap_content" 12. android:gravity="center" 13. android:layout_marginTop="240dp" 14. android:textSize="26dp" 15. android:textColor="@color/white" 16. android:text="好好学习,天天向上" /> 17. </LinearLayout>
实验题目1 Fragment动态加载填充
FragmentWain.java
1. package com.example.myapplication02; 2. 3. import androidx.appcompat.app.AppCompatActivity; 4. 5. import android.app.FragmentManager; 6. import android.app.FragmentTransaction; 7. import android.os.Bundle; 8. import android.view.View; 9. import android.widget.ImageView; 10. import android.widget.Toast; 11. 12. public class FragmentWain extends AppCompatActivity { 13. ImageView rabbit, dragon, snake; 14. FragmentManager manager; 15. FragmentTransaction ft; 16. 17. @Override 18. protected void onCreate(Bundle savedInstanceState) { 19. super.onCreate(savedInstanceState); 20. setContentView(R.layout.fragmentwain); 21. rabbit = findViewById(R.id.rabbit); 22. dragon = findViewById(R.id.dragon); 23. snake = findViewById(R.id.snake); 24. MyListener listener = new MyListener(); 25. rabbit.setOnClickListener(listener); 26. dragon.setOnClickListener(listener); 27. snake.setOnClickListener(listener); 28. 29. manager = getFragmentManager(); 30. ft = manager.beginTransaction(); 31. ft.replace(R.id.frame, new Fragment01()); 32. ft.commit();//每次事务提交一次,把自己销毁 33. rabbit.setImageResource(R.drawable.rabbit); 34. } 35. 36. void initimage() { 37. rabbit.setImageResource(R.drawable.rabbit); 38. dragon.setImageResource(R.drawable.dragon); 39. snake.setImageResource(R.drawable.snake); 40. 41. } 42. 43. class MyListener implements View.OnClickListener { 44. @Override 45. public void onClick(View view) { 46. switch (view.getId()) { 47. case R.id.rabbit: 48. Toast.makeText(FragmentWain.this, "rabbit", Toast.LENGTH_LONG).show(); 49. //加载对应的碎片文件 50. ft = manager.beginTransaction(); 51. ft.replace(R.id.frame, new Fragment01()); 52. ft.commit();//每次事务提交一次,把自己销毁 53. initimage(); 54. rabbit.setImageResource(R.drawable.rabbit); 55. break; 56. case R.id.dragon: 57. Toast.makeText(FragmentWain.this, "dragon", Toast.LENGTH_LONG).show(); 58. ft = manager.beginTransaction(); 59. ft.replace(R.id.frame, new Fragment02()); 60. ft.commit();//每次事务提交一次,把自己销毁 61. initimage(); 62. dragon.setImageResource(R.drawable.dragon); 63. break; 64. case R.id.snake: 65. Toast.makeText(FragmentWain.this, "snake", Toast.LENGTH_LONG).show(); 66. ft = manager.beginTransaction(); 67. ft.replace(R.id.frame, new Fragment03()); 68. ft.commit();//每次事务提交一次,把自己销毁 69. initimage(); 70. snake.setImageResource(R.drawable.snake); 71. break; 72. } 73. } 74. } 75. }
fragmentwain.xml
1. <?xml version="1.0" encoding="utf-8"?> 2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3. xmlns:app="http://schemas.android.com/apk/res-auto" 4. xmlns:tools="http://schemas.android.com/tools" 5. android:layout_width="match_parent" 6. android:layout_height="match_parent" 7. tools:context=".FragmentWain" 8. android:orientation="vertical"> 9. <FrameLayout 10. android:layout_width="match_parent" 11. android:layout_height="wrap_content" 12. android:layout_weight="1" 13. android:id="@+id/frame"/> 14. <View android:layout_width="match_parent" 15. android:layout_height="1dp" 16. android:background="@color/black"/> 17. <LinearLayout 18. android:layout_width="match_parent" 19. android:layout_height="60dp" 20. android:orientation="horizontal"> 21. <ImageView 22. android:id="@+id/rabbit" 23. android:layout_width="wrap_content" 24. android:layout_height="wrap_content" 25. android:layout_weight="1" 26. android:src="@drawable/rabbit"/> 27. <ImageView 28. android:id="@+id/dragon" 29. android:layout_width="wrap_content" 30. android:layout_height="wrap_content" 31. android:layout_weight="1" 32. android:src="@drawable/dragon"/> 33. <ImageView 34. android:id="@+id/snake" 35. android:layout_width="wrap_content" 36. android:layout_height="wrap_content" 37. android:layout_weight="1" 38. android:src="@drawable/snake"/> 39. </LinearLayout> 40. 41. </LinearLayout>
实验题目2 Fragment和ViewPager实现左右滑动界面
FragmentMain.java
1. package com.example.myapplication02; 2. 3. import androidx.appcompat.app.AppCompatActivity; 4. import androidx.viewpager.widget.ViewPager; 5. import android.os.Bundle; 6. import android.view.View; 7. import android.widget.ImageView; 8. import java.util.ArrayList; 9. import java.util.List; 10. 11. public class FragmentMain extends AppCompatActivity { 12. ViewPager viewPager; 13. List<View> viewList; 14. ImageView rabbit, dragon, snake; 15. List<String> titlelist; 16. @Override 17. protected void onCreate(Bundle savedInstanceState) { 18. super.onCreate(savedInstanceState); 19. setContentView(R.layout.fragmentmian); 20. viewPager = findViewById(R.id.viewpager); 21. rabbit = findViewById(R.id.rabbit); 22. dragon = findViewById(R.id.dragon); 23. snake = findViewById(R.id.snake); 24. MyLister lister = new MyLister(); 25. rabbit.setOnClickListener(lister); 26. dragon.setOnClickListener(lister); 27. snake.setOnClickListener(lister); 28. viewList = new ArrayList<>(); 29. View view1 = View.inflate(this, R.layout.fragment01, null); 30. View view2 = View.inflate(this, R.layout.fragment02, null); 31. View view3 = View.inflate(this, R.layout.fragment03, null); 32. titlelist=new ArrayList<>(); 33. titlelist.add("第一页"); 34. titlelist.add("第二页"); 35. titlelist.add("第三页"); 36. viewList.add(view1); 37. viewList.add(view2); 38. viewList.add(view3); 39. FragPageAdapter pageAdapter = new FragPageAdapter(viewList,titlelist); 40. viewPager.setAdapter(pageAdapter); 41. //监听viewpager 42. viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { 43. @Override 44. public void onPageScrolled(int i, float v, int i1) { 45. initimage(); 46. // 第一个参数为当前页面的索引值,第二个参数位置的偏移量,第三个参数是位置偏移量的像素值 47. if (i == 0) { 48. rabbit.setImageResource(R.drawable.rabbit); 49. } else if (i == 1) { 50. dragon.setImageResource(R.drawable.dragon); 51. } else { 52. snake.setImageResource(R.drawable.snake); 53. } 54. } 55. @Override 56. public void onPageSelected(int i) { 57. } 58. @Override 59. public void onPageScrollStateChanged(int i) { 60. } 61. }); 62. } 63. void initimage() { 64. rabbit.setImageResource(R.drawable.rabbit); 65. dragon.setImageResource(R.drawable.dragon); 66. snake.setImageResource(R.drawable.snake); 67. } 68. 69. class MyLister implements View.OnClickListener { 70. @Override 71. public void onClick(View view) { 72. switch (view.getId()) { 73. case R.id.rabbit: 74. viewPager.setCurrentItem(0); 75. break; 76. case R.id.dragon: 77. viewPager.setCurrentItem(1); 78. break; 79. case R.id.snake: 80. viewPager.setCurrentItem(2); 81. break; 82. } 83. } 84. } 85. }
fragmentmian.xml
1. <?xml version="1.0" encoding="utf-8"?> 2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3. xmlns:app="http://schemas.android.com/apk/res-auto" 4. xmlns:tools="http://schemas.android.com/tools" 5. android:layout_width="match_parent" 6. android:layout_height="match_parent" 7. tools:context=".FragmentMain" 8. android:orientation="vertical"> 9. <androidx.viewpager.widget.ViewPager 10. android:layout_width="match_parent" 11. android:layout_height="wrap_content" 12. android:layout_weight="1" 13. android:id="@+id/viewpager"> 14. <androidx.viewpager.widget.PagerTabStrip 15. android:layout_width="match_parent" 16. android:layout_height="40dp" 17. android:id="@+id/pagetitle"/> 18. </androidx.viewpager.widget.ViewPager> 19. <View android:layout_width="match_parent" 20. android:layout_height="1dp" 21. android:background="@color/black"/> 22. <LinearLayout 23. android:layout_width="match_parent" 24. android:layout_height="60dp" 25. android:orientation="horizontal"> 26. <ImageView 27. android:id="@+id/rabbit" 28. android:layout_width="wrap_content" 29. android:layout_height="wrap_content" 30. android:layout_weight="1" 31. android:src="@drawable/rabbit"/> 32. <ImageView 33. android:id="@+id/dragon" 34. android:layout_width="wrap_content" 35. android:layout_height="wrap_content" 36. android:layout_weight="1" 37. android:src="@drawable/dragon"/> 38. <ImageView 39. android:id="@+id/snake" 40. android:layout_width="wrap_content" 41. android:layout_height="wrap_content" 42. android:layout_weight="1" 43. android:src="@drawable/snake"/> 44. </LinearLayout> 45. 46. </LinearLayout>