类微信界面

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

类微信界面

---

---

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

一、界面功能展示

页面顶部显示微信界面下方有四个按钮分别为消息，好友，通讯录，设置，每个正在运行的界面按钮以绿色显示其他以灰色显示。

二、实现方法

顶上方的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

---