第三天 学生端初步fragment布局加下导航栏
首先看看工程目录
Step 1：实现底部选项的一些资源文件
图片Drawable资源：tab_menu_deal.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/icon_shou2" android:state_selected="true"/> <item android:drawable="@drawable/icon_shou"/> </selector>
其他三个类似
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/icon_message2" android:state_selected="true"/> <item android:drawable="@drawable/icon_message"/> </selector>
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/icon_shezhi2" android:state_selected="true"/> <item android:drawable="@drawable/icon_shezhi"/> </selector>
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/icon_wo2" android:state_selected="true"/> <item android:drawable="@drawable/icon_wo"/> </selector>
文字资源：tab_menu_deal_text.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="#0489B1" android:state_selected="true"/> <item android:color="#000000" /> </selector>
背景资源 tab_menu_bg.xml：
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true"> <shape> <solid android:color="#FFFFFF"/> </shape> </item> <item> <shape> <solid android:color="#EFFBFB" /> </shape> </item> </selector>
Step 2：编写我们的Activity布局
activity_student
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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" > <LinearLayout android:id="@+id/tab_menu" android:layout_width="match_parent" android:layout_height="70dp" android:orientation="horizontal" android:layout_alignParentBottom="true"> <TextView android:id="@+id/txt_deal" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/tab_menu_bg" android:drawableTop="@drawable/tab_menu_deal" android:gravity="center" android:textColor="@drawable/tab_menu_deal_text" android:text="课程"/> <TextView android:id="@+id/txt_poi" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/tab_menu_bg" android:drawableTop="@drawable/tab_menu_poi" android:gravity="center" android:textColor="@drawable/tab_menu_deal_text" android:text="消息"/> <TextView android:id="@+id/txt_user" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/tab_menu_bg" android:drawableTop="@drawable/tab_menu_user" android:gravity="center" android:textColor="@drawable/tab_menu_deal_text" android:text="我的"/> <TextView android:id="@+id/txt_more" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/tab_menu_bg" android:drawableTop="@drawable/tab_menu_shezhi" android:gravity="center" android:textColor="@drawable/tab_menu_deal_text" android:text="设置"/> </LinearLayout> <View android:id="@+id/div_tab_bar" android:layout_width="match_parent" android:layout_height="2px" android:background="#000000" android:layout_above="@id/tab_menu"/> <FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/tab_menu" android:background="#F2FBEF"> </FrameLayout> </RelativeLayout>
效果
Step 3：创建一个Fragment的简单布局与类：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="#FFFFFF" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/txt_content" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="呵呵" android:textColor="#58ACFA" android:textSize="20sp"/> </LinearLayout>
package com.example.homework; import android.os.Bundle; import androidx.fragment.app.Fragment; import androidx.recyclerview.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; /** * A simple {@link Fragment} subclass. * Use the factory method to * create an instance of this fragment. */ public class BlankFragment extends Fragment { private String context; private TextView mTextView; // TODO: Rename parameter arguments, choose names that match // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER private static final String ARG_PARAM1 = "param1"; private static final String ARG_PARAM2 = "param2"; // TODO: Rename and change types of parameters private String mParam1; private String mParam2; public BlankFragment(String context) { // Required empty public constructor this.context = context; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getArguments() != null) { mParam1 = getArguments().getString(ARG_PARAM1); mParam2 = getArguments().getString(ARG_PARAM2); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment View view= inflater.inflate(R.layout.fragment_blank, container, false); mTextView = (TextView)view.findViewById(R.id.txt_content); //mTextView = (TextView)getActivity().findViewById(R.id.txt_content); mTextView.setText(context); return view; } }
StudentActivity.java
package com.example.homework; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.FragmentManager; import android.app.FragmentTransaction; import android.os.Bundle; import android.view.View; import android.view.Window; import android.widget.FrameLayout; import android.widget.TextView; public class StudentActivity extends AppCompatActivity { private TextView topBar; private TextView tabDeal; private TextView tabPoi; private TextView tabMore; private TextView tabUser; private FrameLayout ly_content; private BlankFragment f1,f2,f3,f4; private FragmentManager fragmentManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_student); tabDeal = findViewById(R.id.txt_deal); tabPoi = findViewById(R.id.txt_poi); tabUser = findViewById(R.id.txt_user); tabMore =findViewById(R.id.txt_more); ly_content = findViewById(R.id.fragment_container); setListeners(); } //UI组件初始化与事件绑定 public void setListeners(){ OnClick onClick=new OnClick(); tabDeal.setOnClickListener(onClick); tabMore.setOnClickListener(onClick); tabUser.setOnClickListener(onClick); tabPoi.setOnClickListener(onClick); } //重置所有文本的选中状态 public void selected(){ tabDeal.setSelected(false); tabMore.setSelected(false); tabPoi.setSelected(false); tabUser.setSelected(false); } //隐藏所有Fragment public void hideAllFragment( androidx.fragment.app.FragmentTransaction transaction){ if(f1!=null){ transaction.hide(f1); } if(f2!=null){ transaction.hide(f2); } if(f3!=null){ transaction.hide(f3); } if(f4!=null){ transaction.hide(f4); } } private class OnClick implements View.OnClickListener { public void onClick(View v) { androidx.fragment.app.FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); hideAllFragment(transaction); switch (v.getId()) { case R.id.txt_deal: selected(); tabDeal.setSelected(true); if (f1 == null) { f1 = new BlankFragment("第一个Fragment"); transaction.add(R.id.fragment_container, f1); } else { transaction.show(f1); } break; case R.id.txt_more: selected(); tabMore.setSelected(true); if (f2 == null) { f2 = new BlankFragment("第二个Fragment"); transaction.add(R.id.fragment_container, f2); } else { transaction.show(f2); } break; case R.id.txt_poi: selected(); tabPoi.setSelected(true); if (f3 == null) { f3 = new BlankFragment("第三个Fragment"); transaction.add(R.id.fragment_container, f3); } else { transaction.show(f3); } break; case R.id.txt_user: selected(); tabUser.setSelected(true); if (f4 == null) { f4 = new BlankFragment("第四个Fragment"); transaction.add(R.id.fragment_container, f4); } else { transaction.show(f4); } break; } transaction.commit(); } } }
