提示：文章寫完後，目錄可以自動生成，如何生成可參考右邊的幫助文件

類微信介面

---

---

提示：以下是本篇文章正文內容，下面案例可供參考

一、介面功能展示

頁面頂部顯示微信介面下方有四個按鈕分別為訊息，好友，通訊錄，設定，每個正在執行的介面按鈕以綠色顯示其他以灰色顯示。

二、實現方法

頂上方的htwechat用一個top.xml檔案實現將背景設定為黑色，字型設定為白色

<?xml version="1.0" encoding="utf-8"?>

<LinnearLaout xmlns:android=“http://schemas.android.com/apk/res/android”

android:layout_width="match_parent"
android:layout_height="65dp"
android:gravity="center"
android:background="#000000"
android:orientation="vertical">

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="htwechat"
    android:textColor="#ffffff"
    android:textSize="30sp" />

下方四個按鈕的佈局使用用一個大的LinearLayout巢狀四個小LinearLayout實現，四個按鈕使用事先準備好的圖片放入drawble資料夾即可

程式碼：
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:app=“http://schemas.android.com/apk/res-auto”
android:layout_width=“match_parent”
android:layout_height=“100dp”
android:background="@drawable/bottom_bar"
android:orientation=“horizontal”
android:baselineAligned=“false”>

<LinearLayout
    android:id="@+id/id_tab_news"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="vertical">


    <ImageButton
        android:id="@+id/id_tab_news_img"
        android:layout_width="226dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:background="#000000"
        android:clickable="false"
        app:srcCompat="@drawable/tab_weixin_pressed" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="    訊息"
        android:textColor="#ffffff"
        android:textSize="30sp" />
</LinearLayout>

頁面中部分採用Fragment實現，Fragment可以在一個 Activity 中組合多個片段，從而構建多窗格介面。.
程式碼：
private void initFragment(){
fragmentManager=getSupportFragmentManager();
FragmentTransaction transaction=fragmentManager.beginTransaction();
transaction.add(R.id.id_content,mTab01);
transaction.add(R.id.id_content,mTab02);
transaction.add(R.id.id_content,mTab03);
transaction.add(R.id.id_content,mTab04);
transaction.commit();
}

頁面的跳轉功能定義一個hideFragment函式，使用hide函式將中間字樣初始化，再定義setselect函式根據引數使底部灰色圖示變為綠色圖示。中間的文字內容則定義了四個xml，和四個fragment用相對應的fragment來顯示xml裡的內容實現頁面的同步轉換

private final Fragment mTab01=new weixinFragment();
private final Fragment mTab02=new friendFragment();
private final Fragment mTab03=new contactFragment();
private final Fragment mTab04=new settingFragment();
private void setSelect(int i){
    FragmentTransaction transaction =fragmentManager.beginTransaction();
    hideFragment(transaction);
    switch (i){
        case 0:
            transaction.show(mTab01);
            mImgweixin.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);
            mImgsetting.setImageResource(R.drawable.tab_settings_pressed);
            break;
        default:
            break;
    }
    transaction.commit();
}

private void hideFragment(FragmentTransaction transaction){
    transaction.hide(mTab01);
    transaction.hide(mTab02);
    transaction.hide(mTab03);
    transaction.hide(mTab04);
}

按鈕監聽，定義initEvent函式設定監聽4個小LinearLayout，並在監聽到反應時將下方圖片重設為灰色圖片，同時根據id號使用setSelect函式改變頁面的顯示。

public void onClick(View v) {
resetimg();
switch(v.getId()){
case R.id.id_tab_news:
setSelect(0);
break;
case R.id.id_tab_friend:
setSelect(1);
break;
case R.id.id_tab_address:
setSelect(2);
break;
case R.id.id_tab_setting:
setSelect(3);
break;
default:
break;
}
}
private void initEvent(){ //控制監聽範圍
mTabweixin.setOnClickListener(this);
mTabfriend.setOnClickListener(this);
mTabcontact.setOnClickListener(this);
mTabsetting.setOnClickListener(this);
}
程式碼倉庫：https://gitee.com/nekopalaa/wechat-page

---