安卓作業----慕課移動應用開發作業15之模仿實現微信界面效果(二)

此篇綜合運用自定義ActionBar、ContextMenu、PopupWindow、Fragment、ViewPager 以及RecyclerView等實現微信頁面效果。

同時這也是中國大學慕課移動終端應用開發的網課作業15，我會持續更新我的作業

說明

說明1

這個說小不小的作品花了我兩天的時間，時間花費的頗多。如果我的作品對您有所幫助的話，您的關注或是贊，都是對我的莫大支持。如果引用我的作品，請註明出處。

我儘可能符合了作業的題目要求，但是有些內容由於作業要求的組件或是方法達不到微信的界面效果，我進行相應的替換，在此說明。

說明2

內容較多，我準備分成三篇博客進行敘述分別爲：
安卓作業----慕課移動應用開發作業15之模仿實現微信界面效果(一)

安卓作業----慕課移動應用開發作業15之模仿實現微信界面效果(二)
安卓作業----慕課移動應用開發作業15之模仿實現微信界面效果(三)

說明3

此篇是第二篇，主要介紹項目的框架搭建，即包括大體的框架，使得界面有個雛形。fragment具體的實現部分我將放在第三篇博客中

效果圖

廢話說了那麼多，先上效果圖，如果各位看官還滿意，那就繼續讀下去吧。

代碼部分

有些部分會暫時性報錯，但是等把第三篇的代碼都放進去，就不會報錯了。

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

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

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

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

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>

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

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

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

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

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

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

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

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

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>

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>

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>

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

總結

如果有什麼問題，請私信聯繫我或者在評論區留言
碼字不易，若有幫助，給個關注和讚唄