团队冲刺博客(二)
这次是实现了首页的三个底部导航栏,方便后续添加相对应的功能。
效果如下:
部分代码如下(省略了一些后端代码):
fragment_home.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 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 android:orientation="vertical" 7 xmlns:tools="http://schemas.android.com/tools"> 8 9 <FrameLayout 10 android:id="@+id/home_fragment_container" 11 android:layout_width="match_parent" 12 android:layout_height="0dp" 13 android:layout_weight="1"> 14 </FrameLayout> 15 16 <include layout="@layout/home_tab_view_navigation"/> 17 18 </LinearLayout>
home_tab_view_navigation.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:orientation="horizontal" 4 android:layout_width="match_parent" 5 android:layout_height="50dp" 6 android:layout_gravity="bottom"> 7 8 <RadioGroup 9 android:id="@+id/home_tb" 10 android:layout_width="match_parent" 11 android:layout_height="match_parent" 12 android:layout_alignParentBottom="true" 13 android:background="@color/colorTab" 14 android:orientation="horizontal"> 15 16 <RadioButton 17 android:id="@+id/photo_album" 18 style="@style/Custom.TabRadioButton" 19 android:layout_width="100dp" 20 android:checked="true" 21 android:text="相册" /> 22 23 <!-- <View style="@style/Custom.TabRadioButton" />--> 24 25 <ImageView 26 android:id="@+id/take_a_picture" 27 style="@style/Custom.TabRadioButton" 28 android:background="@drawable/background_camera" 29 android:src="@drawable/ic_menu_camera" /> 30 31 <RadioButton 32 android:id="@+id/photo_editing" 33 style="@style/Custom.TabRadioButton" 34 android:layout_width="100dp" 35 android:text="剪辑" /> 36 37 </RadioGroup> 38 39 </LinearLayout>
activity_photo_album.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 android:orientation="vertical"> 8 9 <TextView 10 android:layout_width="wrap_content" 11 android:layout_height="wrap_content" 12 android:text="This is photo album fragment" /> 13 14 </LinearLayout>
activity_photo_editing.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 android:orientation="vertical"> 8 9 <TextView 10 android:layout_width="wrap_content" 11 android:layout_height="wrap_content" 12 android:text="This is photo editing fragment" /> 13 14 </LinearLayout>
activity_take_a_picture.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 android:orientation="vertical"> 8 9 <TextView 10 android:layout_width="wrap_content" 11 android:layout_height="wrap_content" 12 android:text="This is take a picture fragment" /> 13 14 </LinearLayout>
HomeFragment.java
1 package com.michael.cloudphotos; 2 3 import android.os.Bundle; 4 import android.view.LayoutInflater; 5 import android.view.View; 6 import android.view.ViewGroup; 7 import android.widget.ImageView; 8 import android.widget.RadioButton; 9 import androidx.annotation.NonNull; 10 import androidx.fragment.app.Fragment; 11 import androidx.fragment.app.FragmentManager; 12 import androidx.fragment.app.FragmentTransaction; 13 14 import com.michael.cloudphotos.Home_Fragment.Photo_Album_Fragment; 15 import com.michael.cloudphotos.Home_Fragment.Photo_Editing_Fragment; 16 import com.michael.cloudphotos.Home_Fragment.Take_A_Picture_Fragment; 17 18 19 public class HomeFragment extends Fragment { 20 21 private RadioButton mphoto_album; 22 private RadioButton mphoto_editing; 23 private ImageView mpicture; 24 25 private Photo_Album_Fragment photo_album_fragment; 26 private Photo_Editing_Fragment photo_editing_fragment; 27 private Take_A_Picture_Fragment take_a_picture_fragment; 28 29 public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 30 View root = inflater.inflate(R.layout.fragment_home, container, false); 31 32 //初始化,各种View 33 mphoto_album=root.findViewById(R.id.photo_album); 34 mphoto_editing=root.findViewById(R.id.photo_editing); 35 mpicture=root.findViewById(R.id.take_a_picture); 36 37 //进入首页,直接选择第一个“相册”页面 38 select(0); 39 40 mphoto_album.setOnClickListener(new View.OnClickListener() { 41 @Override 42 public void onClick(View v) { 43 select(0); 44 } 45 }); 46 47 mphoto_editing.setOnClickListener(new View.OnClickListener() { 48 @Override 49 public void onClick(View v) { 50 select(1); 51 } 52 }); 53 54 mpicture.setOnClickListener(new View.OnClickListener() { 55 @Override 56 public void onClick(View v) { 57 select(2); 58 } 59 }); 60 61 return root; 62 } 63 64 private void select(int i){ 65 FragmentManager fm = getFragmentManager(); //获得Fragment管理器 66 FragmentTransaction ft = fm.beginTransaction(); //开启一个事务 67 68 hideFragment(ft); //先隐藏 Fragment 69 70 switch (i){ 71 case 0: 72 if (photo_album_fragment == null){ 73 photo_album_fragment = new Photo_Album_Fragment(); 74 ft.add(R.id.home_fragment_container,photo_album_fragment); 75 }else{ 76 ft.show(photo_album_fragment); 77 } 78 break; 79 case 1: 80 if (photo_editing_fragment == null){ 81 photo_editing_fragment = new Photo_Editing_Fragment(); 82 ft.add(R.id.home_fragment_container,photo_editing_fragment); 83 }else { 84 ft.show(photo_editing_fragment); 85 } 86 break; 87 case 2: 88 if (take_a_picture_fragment == null){ 89 take_a_picture_fragment = new Take_A_Picture_Fragment(); 90 ft.add(R.id.home_fragment_container,take_a_picture_fragment); 91 }else { 92 ft.show(take_a_picture_fragment); 93 } 94 break; 95 } 96 ft.commit(); //提交事务 97 } 98 99 //隐藏所有Fragment 100 private void hideFragment(FragmentTransaction fragmentTransaction){ 101 if (photo_album_fragment != null){ 102 fragmentTransaction.hide(photo_album_fragment); 103 } 104 if (photo_editing_fragment != null){ 105 fragmentTransaction.hide(photo_editing_fragment); 106 } 107 if (take_a_picture_fragment != null){ 108 fragmentTransaction.hide(take_a_picture_fragment); 109 } 110 } 111 112 113 }