實驗要求

請根據課堂展示結果設計APP門戶界面，包含4個tab切換效果，

實驗內容

最終頁面顯示

需要創建的檔案

樣式檔案的內容

這里只寫主要的三個檔案的內容，分別是top，bottom，layout_main

top.xml

• 只需要修改字體樣式

android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"

• 以及整個的LinearLayout的高度設定

android:layout_height="80dp"

layout_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"
    android:orientation="vertical"
    >

    <include layout="@layout/top"></include>

    <FrameLayout
        android:id="@+id/td_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        ></FrameLayout>

    <include layout="@layout/bottom"></include>
</LinearLayout>

bottom.xml

• 該頁面設定了四個按鈕的樣式
• 這是其中一個按鈕的樣式

 <LinearLayout
        android:id="@+id/td_tab_wexin"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1"
        android:onClick="onClick"
        android:gravity="center"
        >


        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:layout_weight="1"
            app:srcCompat="@drawable/message_open" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="訊息"
            android:textColor="#0A0A0A" />

且頁面樣式也得自己設定

主要的Java代碼

這本次實驗中，需要我們控制的功能事件并不多，只要點擊底部，中間的fragment能夠相應的進行變換即可
做到兩點

1. 監聽我們對底部控制元件的點擊
2. 將監聽到的底部點擊事件，相應的傳遞給fragment的事件控制

MainActivity

package com.example.wechat;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{


    private Fragment tab01=new weixinFragment();
    private Fragment tab02=new friendFragment();
    private Fragment tab03=new txlFragment();
    private Fragment tab04=new settingFragment();

    private LinearLayout weixin;
    private LinearLayout friend;
    private LinearLayout txl;
    private LinearLayout setting;

    private ImageButton ImgWeiXin;
    private ImageButton ImgFriend;
    private ImageButton ImgTxl;
    private ImageButton ImgSetting;


    private FragmentManager fm;


    //主活動事件
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.layout_main);

        connect();
        addFragment();
        Listen();
        SelectFragment(0);


    }

    //連接LinearLayout和imagebutton
    private void connect(){

        weixin = findViewById(R.id.td_tab_wexin);
        friend = findViewById(R.id.td_tab_friend);
        txl = findViewById(R.id.td_tab_txl);
        setting = findViewById(R.id.td_tab_setting);

        ImgWeiXin = findViewById(R.id.imageButton1);
        ImgFriend = findViewById(R.id.imageButton2);
        ImgTxl = findViewById(R.id.imageButton3);
        ImgSetting = findViewById(R.id.imageButton4);


    }

    //通訊，添加
    private void addFragment(){
        fm = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fm.beginTransaction();
        fragmentTransaction.add(R.id.td_content,tab01);
        fragmentTransaction.add(R.id.td_content,tab02);
        fragmentTransaction.add(R.id.td_content,tab03);
        fragmentTransaction.add(R.id.td_content,tab04);
        fragmentTransaction.commit();//提交
    }


    //將tab全部隱藏
    private void hideFragment(FragmentTransaction fragmentTransaction){
        fragmentTransaction.hide(tab01);
        fragmentTransaction.hide(tab02);
        fragmentTransaction.hide(tab03);
        fragmentTransaction.hide(tab04);
    }

    //將img全部變成灰色
    private void hideImg(){
        ImgWeiXin.setImageResource(R.drawable.message_close);
        ImgFriend.setImageResource(R.drawable.friend_close);
        ImgTxl.setImageResource(R.drawable.txl_close);
        ImgSetting.setImageResource(R.drawable.setting_close);
    }


    //監聽
    private void Listen(){
        weixin.setOnClickListener(this);
        friend.setOnClickListener(this);
        txl.setOnClickListener(this);
        setting.setOnClickListener(this);
    }

    //用選擇陳述句，將tab的內容選擇顯示出來
    private void SelectFragment(int i){
        fm = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fm.beginTransaction();
        hideFragment(fragmentTransaction);
        switch (i){
            case 0:
                fragmentTransaction.show(tab01);
                ImgWeiXin.setImageResource(R.drawable.message_open);
                break;
            case 1:
                fragmentTransaction.show(tab02);
                ImgFriend.setImageResource(R.drawable.friend_open);
                break;
            case 2:
                fragmentTransaction.show(tab03);
                ImgTxl.setImageResource(R.drawable.txl_open);
                break;
            case 3:
                fragmentTransaction.show(tab04);
                ImgSetting.setImageResource(R.drawable.setting_open);
                break;
            default:
                break;
        }
        fragmentTransaction.commit();
    }

    @Override
    public void onClick(View v) {
        hideImg();
        switch (v.getId()){
            case R.id.td_tab_wexin:
                Log.v("hzf","第1個tab被點擊");
                SelectFragment(0);
                break;
            case R.id.td_tab_friend:
                Log.v("hzf","第2個tab被點擊");
                SelectFragment(1);
                break;
            case R.id.td_tab_txl:
                Log.v("hzf","第3個tab被點擊");
                SelectFragment(2);
                break;
            case R.id.td_tab_setting:
                Log.v("hzf","第4個tab被點擊");
                SelectFragment(3);
                break;
            default:
                break;
        }

    }
}

代碼鏈接

代碼倉庫原始碼位置