首页 > 分享 > 安卓作业

安卓作业

花匠小妙招
2024-11-14 12:59

此篇综合运用自定义ActionBar、ContextMenu、PopupWindow、Fragment、ViewPager 以及RecyclerView等实现微信页面效果。

同时这也是中国大学慕课移动终端应用开发的网课作业15，我会持续更新我的作业

说明

说明1

这个说小不小的作品花了我两天的时间，时间花费的颇多。如果我的作品对您有所帮助的话，您的关注或是赞，都是对我的莫大支持。如果引用我的作品，请注明出处。

我尽可能符合了作业的题目要求，但是有些内容由于作业要求的组件或是方法达不到微信的界面效果，我进行相应的替换，在此说明。

说明2

内容较多，我准备分成三篇博客进行叙述分别为：
安卓作业----慕课移动应用开发作业15之模仿实现微信界面效果(一)

安卓作业----慕课移动应用开发作业15之模仿实现微信界面效果(二)
安卓作业----慕课移动应用开发作业15之模仿实现微信界面效果(三)

说明3

此篇是第二篇，主要介绍项目的框架搭建，即包括大体的框架，使得界面有个雏形。fragment具体的实现部分我将放在第三篇博客中

注意引用自定义actionbar的时候要修改成自己的包名！！！！！

效果图

废话说了那么多，先上效果图，如果各位看官还满意，那就继续读下去吧。
在这里插入图片描述

代码部分

有些部分会暂时性报错，但是等把第三篇的代码都放进去，就不会报错了。

1.添加项目依赖

implementation 'com.android.support:design:28.0.0' implementation 'com.android.support:recyclerview-v7:28.0.0' 12 2.MainActivity.java

public class MainActivity extends AppCompatActivity { private MyActionBar mActionBar; private TabLayout mTabLayout; private ViewPager mViewPager; private TabLayout.Tab mTab1,mTab2,mTab3,mTab4; private ArrayList<Fragment> mFragments; private MyFragmentAdapter mFragmentAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); getSupportActionBar().hide(); init(); FragmentManager fm = getSupportFragmentManager(); //实力化适配器 mFragmentAdapter = new MyFragmentAdapter(fm,0,mFragments); //设置适配器 mViewPager.setAdapter(mFragmentAdapter); mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { switch (position){ case 0: mActionBar.setVisibility(View.VISIBLE); mActionBar.setTabName("微信"); break; case 1: mActionBar.setVisibility(View.VISIBLE); mActionBar.setTabName("通讯录"); break; case 2: mActionBar.setVisibility(View.VISIBLE); mActionBar.setTabName("发现"); break; case 3: mActionBar.setVisibility(View.GONE); break; } } @Override public void onPageScrollStateChanged(int state) { } }); //设置tab initTab(); } private void initTab(){ mTabLayout.setupWithViewPager(mViewPager); mTabLayout.setSelectedTabIndicator(0); mTab1 = mTabLayout.getTabAt(0); mTab2 = mTabLayout.getTabAt(1); mTab3 = mTabLayout.getTabAt(2); mTab4 = mTabLayout.getTabAt(3); mTab1.setCustomView(R.layout.tab1_item); mTab2.setCustomView(R.layout.tab2_item); mTab3.setCustomView(R.layout.tab3_item); mTab4.setCustomView(R.layout.tab4_item); } private void init(){ mFragments = new ArrayList<>(); mFragments.add(new Tab1Fragment(MainActivity.this)); mFragments.add(new Tab2Fragment(MainActivity.this)); mFragments.add(new Tab3Fragment(MainActivity.this)); mFragments.add(new Tab4Fragment(MainActivity.this)); mActionBar = findViewById(R.id.my_action_bar); mActionBar.setTabName("微信");//初始标题为微信 mViewPager = findViewById(R.id.my_view_page); mTabLayout = findViewById(R.id.my_tab_layout); } }

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:tools="http://schemas.android.com/tools" tools:context="com.example.course15.MainActivity" android:orientation="vertical"> <com.example.course15.layouts.MyActionBar android:id="@+id/my_action_bar" android:layout_width="match_parent" android:layout_height="wrap_content"/> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="#eee" android:orientation="vertical"> <androidx.viewpager.widget.ViewPager android:id="@+id/my_view_page" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="#ccc"/> <com.google.android.material.tabs.TabLayout android:paddingTop="5dp" android:paddingBottom="5dp" android:id="@+id/my_tab_layout" android:background="#eee" android:layout_width="match_parent" android:layout_height="55dp" /> </LinearLayout> </LinearLayout>

12345678910111213141516171819202122232425262728293031323334353637 4.自定义actionBar MyActionBar.java

public class MyActionBar extends RelativeLayout { private View mView;//标题栏 private View mViewMenuWindow;//点击menu后出来的弹窗 private TextView mTextViewTabName; private ImageView mImageViewFind,mImageViewMenu; private Context mContext; private PopupWindow mPopupWindow; private LinearLayout mLayout1,mLayout2,mLayout3,mLayout4,mLayout5; public MyActionBar(Context context) { super(context); this.mContext = context; init(context); } public MyActionBar(Context context, AttributeSet attrs) { super(context, attrs); this.mContext = context; init(context); } private void init(Context context){ LayoutInflater inflater = LayoutInflater.from(context); mView = inflater.inflate(R.layout.my_action_bar_layout, null); addView(mView); initView(); } //初始化页面布局元素 private void initView(){ mTextViewTabName = mView.findViewById(R.id.text_tab_name); mImageViewFind = mView.findViewById(R.id.image_find); mImageViewMenu = mView.findViewById(R.id.image_menu); mImageViewFind.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { closeMenuWindow(); Toast.makeText(mContext,"点击了发现",Toast.LENGTH_SHORT).show(); } }); mImageViewMenu.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { showMenuWindow(); } }); } /** * 暴露出去的方法，设置自定义bar的标题 * */ public void setTabName(String name){ mTextViewTabName.setText(name); } /** * 关闭子菜单 * */ public void closeMenuWindow(){ if (mPopupWindow!=null){ mPopupWindow.dismiss(); } } /** * 显示子菜单 * */ private void showMenuWindow(){ mViewMenuWindow = LayoutInflater.from(mContext).inflate(R.layout.menu_window_layout,null); initLayout(); mPopupWindow = new PopupWindow(mViewMenuWindow); mPopupWindow.setWidth(400); mPopupWindow.setHeight(580); mPopupWindow.showAsDropDown(mImageViewMenu); } /** * 初始化子菜单的布局元素 * */ private void initLayout(){ mLayout1 = mViewMenuWindow.findViewById(R.id.menu_item1); mLayout2 = mViewMenuWindow.findViewById(R.id.menu_item2); mLayout3 = mViewMenuWindow.findViewById(R.id.menu_item3); mLayout4 = mViewMenuWindow.findViewById(R.id.menu_item4); mLayout5 = mViewMenuWindow.findViewById(R.id.menu_item5); mLayout1.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(mContext,"发起群聊",Toast.LENGTH_SHORT).show(); mPopupWindow.dismiss(); } }); mLayout2.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(mContext,"添加朋友",Toast.LENGTH_SHORT).show(); mPopupWindow.dismiss(); } }); mLayout3.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(mContext,"扫一扫",Toast.LENGTH_SHORT).show(); mPopupWindow.dismiss(); } }); mLayout4.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(mContext,"收付款",Toast.LENGTH_SHORT).show(); mPopupWindow.dismiss(); } }); mLayout5.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(mContext,"帮助与反馈",Toast.LENGTH_SHORT).show(); mPopupWindow.dismiss(); } }); } }

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 5.自定义actionBar布局 my_action_bar_layout.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ddd"> <TextView android:id="@+id/text_tab_name" android:text="微信" android:textSize="20dp" android:textColor="#000" android:paddingTop="10dp" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:layout_width="wrap_content" android:layout_height="45dp"/> <ImageView android:id="@+id/image_find" android:src="@drawable/find" android:layout_width="25dp" android:layout_height="25dp" android:layout_centerVertical="true" android:layout_toLeftOf="@id/image_menu" android:layout_marginRight="30dp"/> <ImageView android:id="@+id/image_menu" android:src="@drawable/add" android:layout_width="25dp" android:layout_height="25dp" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="20dp"/> </RelativeLayout>

12345678910111213141516171819202122232425262728293031323334 6.自定义popupwindow布局 menu_window_layout.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="120dp" android:layout_height="300dp" android:background="@drawable/background2"> <LinearLayout android:id="@+id/menu_item1" style="@style/menu_layout1"> <ImageView android:src="@drawable/img1" style="@style/menu_image"/> <TextView android:text="发起群聊" style="@style/menu_text"/> </LinearLayout> <LinearLayout android:id="@+id/menu_item2" style="@style/menu_layout1"> <ImageView android:src="@drawable/img2" style="@style/menu_image"/> <TextView android:text="添加朋友" style="@style/menu_text"/> </LinearLayout> <LinearLayout android:id="@+id/menu_item3" style="@style/menu_layout1"> <ImageView android:src="@drawable/img3" style="@style/menu_image"/> <TextView android:text="扫一扫" style="@style/menu_text"/> </LinearLayout> <LinearLayout android:id="@+id/menu_item4" style="@style/menu_layout1"> <ImageView android:src="@drawable/img4" style="@style/menu_image"/> <TextView android:text="收付款" style="@style/menu_text"/> </LinearLayout> <LinearLayout android:id="@+id/menu_item5" style="@style/menu_layout1" android:paddingBottom="-10dp"> <ImageView android:src="@drawable/img5" style="@style/menu_image"/> <TextView android:text="帮助与反馈" style="@style/menu_text"/> </LinearLayout> </LinearLayout>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 7.Tab1Fragment.java

public class Tab1Fragment extends Fragment { private RecyclerView mRecyclerView; private ChatAdapter mChatAdapter; private ArrayList<ChatMsg> mChatMsgs; private Context mContext; private String TAG = "Tab1FragmentTag"; public Tab1Fragment(Context context) { // Required empty public constructor this.mContext = context; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.tab1_layout,container,false); initChatMsg(); mRecyclerView = v.findViewById(R.id.recycle_view_chat); mRecyclerView.setLayoutManager(new LinearLayoutManager(mContext)); mChatAdapter = new ChatAdapter(mContext,mChatMsgs); mRecyclerView.setAdapter(mChatAdapter); return v; } private void initChatMsg(){ mChatMsgs = new ArrayList<>(); mChatMsgs.add(new ChatMsg("小明1","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明2","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明3","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明4","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明5","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明6","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明7","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明8","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明9","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明10","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明11","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明12","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明13","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明14","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明15","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明16","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明17","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明18","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明19","今晚打老虎")); mChatMsgs.add(new ChatMsg("小明20","今晚打老虎")); } @Override public boolean onContextItemSelected(@NonNull MenuItem item) { switch (item.getItemId()){ case R.id.item1_toFirst: mChatAdapter.toFirstItem(mChatAdapter.getPosition()); case R.id.item2_delete: mChatAdapter.deleteItem(mChatAdapter.getPosition()); } return super.onContextItemSelected(item); } }

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 8.Tab1Fragment 对应布局 tab1_layout.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.recyclerview.widget.RecyclerView android:background="#fff" android:id="@+id/recycle_view_chat" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout> 12345678910 9.Tab2Fragment.java

public class Tab2Fragment extends Fragment { private Context mContext; private RecyclerView mRecyclerView; //定义recycle view private ContactAdapter mContactAdapter; //定义适配器 private ContactItemDecoration mContactItemDecoration; //定义装饰 private ArrayList<ContactMsg> mContactMsgs; //定义数据 public Tab2Fragment(Context context) { // Required empty public constructor mContext = context; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.tab2_layout,container,false); initData(); mRecyclerView = v.findViewById(R.id.recycler_view_contact); mRecyclerView.setLayoutManager(new LinearLayoutManager(mContext)); mContactAdapter = new ContactAdapter(mContext,mContactMsgs); mRecyclerView.setAdapter(mContactAdapter); mContactItemDecoration = new ContactItemDecoration(mContext,mContactMsgs); mRecyclerView.addItemDecoration(mContactItemDecoration); return v; } private void initData(){ mContactMsgs = new ArrayList<>(); mContactMsgs.add(new ContactMsg("0",R.drawable.contact_img1,"新的朋友")); mContactMsgs.add(new ContactMsg("0",R.drawable.contact_img2,"群聊")); mContactMsgs.add(new ContactMsg("0",R.drawable.contact_img3,"标签")); mContactMsgs.add(new ContactMsg("0",R.drawable.contact_img4,"公众号")); mContactMsgs.add(new ContactMsg("A","爱丽丝")); mContactMsgs.add(new ContactMsg("A","爱德华")); mContactMsgs.add(new ContactMsg("A","爱马仕")); mContactMsgs.add(new ContactMsg("B","贝多芬")); mContactMsgs.add(new ContactMsg("C","蔡徐坤")); mContactMsgs.add(new ContactMsg("C","晨光文具店")); mContactMsgs.add(new ContactMsg("D","冬冬")); mContactMsgs.add(new ContactMsg("D","冬兵的机械臂")); mContactMsgs.add(new ContactMsg("D","东北大哥")); mContactMsgs.add(new ContactMsg("D","东北水饺老板")); mContactMsgs.add(new ContactMsg("F","福禄娃")); mContactMsgs.add(new ContactMsg("H","荷马")); mContactMsgs.add(new ContactMsg("H","黄飞鸿")); mContactMsgs.add(new ContactMsg("K","可口可乐")); mContactMsgs.add(new ContactMsg("K","柯南")); mContactMsgs.add(new ContactMsg("M","杭州马爸爸")); mContactMsgs.add(new ContactMsg("M","深圳马爸爸")); mContactMsgs.add(new ContactMsg("Q","擎天柱")); } }

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 10.Tab2Fragment 对应布局 tab2_layout.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.recyclerview.widget.RecyclerView android:background="#fff" android:id="@+id/recycler_view_contact" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout> 12345678910 11.Tab3Fragment.java

public class Tab3Fragment extends Fragment { private Context mContext; private RecyclerView mRecyclerView; //定义recycle view private FindAdapter mFindAdapter; //定义适配器 private FindItemDecoration mFindItemDecoration; //定义装饰 private ArrayList<FindMsg> mFindMsgs; //定义数据 public Tab3Fragment(Context context) { // Required empty public constructor mContext = context; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.tab3_layout,container,false); initData(); mRecyclerView = v.findViewById(R.id.recycler_view_find); mRecyclerView.setLayoutManager(new LinearLayoutManager(mContext)); mFindAdapter = new FindAdapter(mContext,mFindMsgs); mRecyclerView.setAdapter(mFindAdapter); mFindItemDecoration = new FindItemDecoration(mContext,mFindMsgs); mRecyclerView.addItemDecoration(mFindItemDecoration); return v; } private void initData(){ mFindMsgs = new ArrayList<>(); mFindMsgs.add(new FindMsg(0,R.drawable.find_img1,"朋友圈")); mFindMsgs.add(new FindMsg(1,R.drawable.find_img2,"扫一扫")); mFindMsgs.add(new FindMsg(1,R.drawable.find_img3,"摇一摇")); mFindMsgs.add(new FindMsg(2,R.drawable.find_img4,"看一看")); mFindMsgs.add(new FindMsg(2,R.drawable.find_img5,"搜一搜")); mFindMsgs.add(new FindMsg(3,R.drawable.find_img6,"附近的人")); mFindMsgs.add(new FindMsg(4,R.drawable.find_img7,"购物")); mFindMsgs.add(new FindMsg(4,R.drawable.find_img8,"游戏")); mFindMsgs.add(new FindMsg(5,R.drawable.find_img9,"小程序")); } }

12345678910111213141516171819202122232425262728293031323334353637383940414243 12.Tab3Fragment 对应布局 tab3_layout.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#eee"> <androidx.recyclerview.widget.RecyclerView android:background="#fff" android:id="@+id/recycler_view_find" android:layout_width="match_parent" android:layout_height="wrap_content"/> </RelativeLayout> 1234567891011 13.Tab4Fragment.java

public class Tab4Fragment extends Fragment { private Context mContext; private RecyclerView mRecyclerView; //定义recycle view private FindAdapter mFindAdapter; //定义适配器 private FindItemDecoration mFindItemDecoration; //定义装饰 private ArrayList<FindMsg> mFindMsgs; //定义数据 public Tab4Fragment(Context context) { // Required empty public constructor mContext = context; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.tab4_layout,container,false); initData(); mRecyclerView = v.findViewById(R.id.recycle_view_me); mRecyclerView.setLayoutManager(new LinearLayoutManager(mContext)); mFindAdapter = new FindAdapter(mContext,mFindMsgs); mRecyclerView.setAdapter(mFindAdapter); mFindItemDecoration = new FindItemDecoration(mContext,mFindMsgs); mRecyclerView.addItemDecoration(mFindItemDecoration); return v; } private void initData(){ mFindMsgs = new ArrayList<>(); mFindMsgs.add(new FindMsg(1,R.drawable.me_img1,"支付")); mFindMsgs.add(new FindMsg(2,R.drawable.me_img2,"收藏")); mFindMsgs.add(new FindMsg(2,R.drawable.me_img3,"相册")); mFindMsgs.add(new FindMsg(2,R.drawable.me_img4,"卡包")); mFindMsgs.add(new FindMsg(2,R.drawable.me_img5,"表情")); mFindMsgs.add(new FindMsg(3,R.drawable.me_img6,"设置")); } }

12345678910111213141516171819202122232425262728293031323334353637383940414243 14.Tab4Fragment 对应布局 tab4_layout.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#eee"> <RelativeLayout android:background="#fff" android:layout_width="match_parent" android:layout_height="25dp"> <ImageView android:layout_alignParentRight="true" android:layout_marginTop="5dp" android:layout_marginRight="10dp" android:src="@drawable/me_camera" android:layout_width="25dp" android:layout_height="25dp"/> </RelativeLayout> <LinearLayout android:background="#fff" android:layout_width="match_parent" android:layout_height="120dp" android:orientation="horizontal"> <RelativeLayout android:layout_marginLeft="10dp" android:layout_width="100dp" android:layout_height="100dp"> <ImageView android:src="@drawable/me_head" android:layout_centerInParent="true" android:layout_width="65dp" android:layout_height="65dp"> </ImageView> </RelativeLayout> <RelativeLayout android:layout_marginLeft="5dp" android:layout_width="0dp" android:layout_height="100dp" android:layout_weight="1"> <TextView android:id="@+id/text_chat_title" android:layout_width="wrap_content" android:layout_marginTop="20dp" android:text="Hobwards" android:textSize="22dp" android:textColor="#000" android:layout_height="wrap_content"/> <TextView android:id="@+id/text_chat_content" android:layout_marginTop="10dp" android:layout_below="@id/text_chat_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信号：000000x" android:textSize="12dp" android:textColor="#999"/> <ImageView android:layout_alignParentRight="true" android:layout_marginTop="60dp" android:layout_marginRight="40dp" android:src="@drawable/me_2d" android:layout_width="15dp" android:layout_height="15dp"/> <ImageView android:layout_marginRight="10dp" android:layout_alignParentRight="true" android:layout_marginTop="60dp" android:src="@drawable/right" android:layout_width="15dp" android:layout_height="15dp"/> </RelativeLayout> </LinearLayout> <androidx.recyclerview.widget.RecyclerView android:background="#fff" android:id="@+id/recycle_view_me" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 15.在res目录下新建color目录

tab_text_color_selector.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:color="#4CAF50" /> <item android:color="#333"/> </selector> 123456 16.在res目录下的drawable目录下新建四个图片选择文件tab1_selector.xml,tab2_selector.xml,tab3_selector.xml,tab4_selector.xml

内容都是差不多的，只写一个

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@drawable/tab1_2"/> <item android:drawable="@drawable/tab1_1"/> </selector> 1234567 17.写tab的布局文件

也是四个，命名格式也是一样的，只写其中一个
tab1_item.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:src="@drawable/tab1_selector" android:layout_width="25dp" android:layout_height="25dp" android:layout_centerHorizontal="true" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:text="微信" android:textSize="12dp" android:textColor="@color/tab_text_color_selector"/> </RelativeLayout>

123456789101112131415161718 18.Fragment适配器 MyFragmentAdapter.java

public class MyFragmentAdapter extends FragmentPagerAdapter { ArrayList<Fragment> mFragments; public MyFragmentAdapter(@NonNull FragmentManager fm, int behavior) { super(fm, behavior); } public MyFragmentAdapter(@NonNull FragmentManager fm, int behavior, ArrayList<Fragment> fragments) { super(fm, behavior); mFragments = fragments; } @NonNull @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } }

12345678910111213141516171819202122232425 总结

如果有什么问题，请私信联系我或者在评论区留言
码字不易，若有帮助，给个关注和赞呗

在这里插入图片描述