Android Studio微信頁面

qq_44722971發表於2020-10-14

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倉庫),導致出錯

相關文章