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

此篇综合运用自定义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'

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);
    }

}

3.主布局文件 activity_main.xml

<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>

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();
            }
        });
    }
}

5.自定义actionBar布局 my_action_bar_layout.xml

<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>

6.自定义popupwindow布局 menu_window_layout.xml

<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>

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);
    }
}

8.Tab1Fragment 对应布局 tab1_layout.xml

<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>

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","擎天柱"));

    }

}

10.Tab2Fragment 对应布局 tab2_layout.xml

<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>

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,"小程序"));
    }
}

12.Tab3Fragment 对应布局 tab3_layout.xml

<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>

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,"设置"));
    }

}

14.Tab4Fragment 对应布局 tab4_layout.xml

<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>

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

tab_text_color_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true" android:color="#4CAF50" />
    <item android:color="#333"/>
selector>

16.在res目录下的drawable目录下新建四个图片选择文件tab1_selector.xml,tab2_selector.xml,tab3_selector.xml,tab4_selector.xml

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

<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>

17.写tab的布局文件

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

<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>

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();
    }
}

总结

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