Android Studio微信頁面提交

這次實驗主要要求是微信基本頁面的搭建

實驗要求

1. 頁面具有頭部“WeChat”
2. 頁面具有中間顯示框
3. 頁面具有底部選擇框，並且具有選擇事件（選擇底部不同按鈕時，圖示、中間顯示框都發生相應改變）

最終頁面展示

在這裡插入圖片描述

注意中間顯示框以及圖示顏色的改變

實驗步驟

很明顯，微信介面分為上中下三個部分，因而至少需要三個xml檔案。又因為有微信，朋友，通訊錄，設定四個介面，所以中間部分需要四個xml檔案。最終，除去activity_main.xml外共有6個xml檔案。

準備工作
將需要用到的圖示匯入到工程的/app/res/drawble 目錄下

top.xml
top中主要只是加入一個textview，並使其居中
需要注意的是，設定text時，如果直接設定

android:text="WeChat"

會出現警告
通常在/res/values資料夾下的string.xml檔案裡事先設定好將會用到的字串

<string name="app_name">WeChat</string>

然後設定text為

android:text="@string/app_name"

bottom.xml
bottom首先要加入一個黑色bar

android:background="@drawable/bottom_bar_9"

為使四個LinearLayout平鋪需設定

android:layout_width="0dp"
android:layout_weight="1"

activity_main.xml

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

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

<!--  
	  高度為0，為了讓bottom顯示出來
	  android:layout_height="0dp"
	  android:layout_weight="1"
-->

        </FrameLayout>

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

include 在當前xml中新增一個新的xml檔案

重點！MainActivity.java

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

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

    //監聽只針對4個linerlayout
    private void initEvent(){
        mImgMessage.setOnClickListener(this);
        mImgFriend.setOnClickListener(this);
        mImgContact.setOnClickListener(this);
        mImgSettings.setOnClickListener(this);
    }
    
	//fragment獲取監聽並且返回相應
	private void selectFragment(int i){
        FragmentTransaction transaction = fm.beginTransaction();    //再次發生fragment控制
        hideFragment(transaction);
        //設定圖示顏色轉換，頁面內容轉換
        switch (i) {
            case 0:
                transaction.show(mTab01);
                mImgMessage.setImageResource(R.drawable.tab_weixin_pressed);
                break;

            case 1:
                transaction.show(mTab02);
                mImgFriend.setImageResource(R.drawable.tab_find_frd_pressed);
                break;

            case 2:
                transaction.show(mTab03);
                mImgContact.setImageResource(R.drawable.tab_address_pressed);
                break;

            case 3:
                transaction.show(mTab04);
                mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }

程式碼連結: link.

踩雷：忘記換倉庫連結了（直接使用了test倉庫），導致出錯