类微信界面编写（一）

功能界面分析

页面顶部为微信微信字样
下方4个按钮，微信聊天，朋友，联系人，设置

点击按钮时，切换到相应界面，同时将下方图标变绿。

实现

将页面分为三部分分析，首先，最上方WeChat字样使用top.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="65dp"
    android:background="@drawable/bottom_bar"
    android:gravity="center"
    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="@string/wechat"
        android:textColor="#ffffff"
        android:textSize="20sp" />
</LinearLayout>

下方用一个大的LinearLayout嵌套四个小LinearLayout实现

<!--一个小的LinearLayout-->
<LinearLayout
        android:id="@+id/weixin"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            android:src="@drawable/tab_weixin_pressed" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/weixin"
            android:gravity="center"
            android:clickable="false"
            android:textColor="#ffffff"
            android:textSize="15sp" />
    </LinearLayout>

主体采用include和FrameLayout实现

<?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:baselineAligned="false"
    android:orientation="vertical">

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

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

    </FrameLayout>

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

中间部分使用Fragment实现，Fragment可以在一个 Activity 中组合多个片段，从而构建多窗格界面，并在多个 Activity 中重复使用某个片段。

private void initFragmant(){
        fragmentManager=getSupportFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.contant,weixin_fragment);
        transaction.add(R.id.contant,frd_fragment);
        transaction.add(R.id.contant,contact_fragment);
        transaction.add(R.id.contant,seting_fragment);
        transaction.commit();
    }
    
  

页面切换定义一个hideFragment函数，使用hide函数将中间字样全部初始化，再定义pageSwitch函数根据参数改变页面内容并让图标变绿。

private void pageSwitch(int i){
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(weixin_fragment);
                weixinIMB.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(frd_fragment);
                frdIMB.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(contact_fragment);
                contactIMB.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(seting_fragment);
                setingIMB.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }

    private void hideFragment(FragmentTransaction transaction) {
        transaction.hide(weixin_fragment);
        transaction.hide(frd_fragment);
        transaction.hide(contact_fragment);
        transaction.hide(seting_fragment);
    }

对于按钮监听，定义initEvent函数设置监听4个小的LinearLayout，并在监听到反应时将下方图片重设为灰色，同时根据id号调用pageSwitch函数改变页面情况。

  @Override
    public void onClick(View v) {
        resetImg();
        switch (v.getId()){
            case R.id.weixin:
                pageSwitch(0);
                break;
            case R.id.frd:
                pageSwitch(1);
                break;
            case R.id.contact:
                pageSwitch(2);
                break;
            case R.id.seting:
                pageSwitch(3);
                break;
            default:
                break;
        }
    }

    public void resetImg(){
        weixinIMB.setImageResource(R.drawable.tab_weixin_normal);
        frdIMB.setImageResource(R.drawable.tab_find_frd_normal);
        contactIMB.setImageResource(R.drawable.tab_address_normal);
        setingIMB.setImageResource(R.drawable.tab_settings_normal);
    }

    private void initEvent(){
        weixin.setOnClickListener(this);
        frd.setOnClickListener(this);
        contact.setOnClickListener(this);
        seting.setOnClickListener(this);
    }
}

部分细节分析

对于下方按钮图片，为了展现效果统一，在最外层LinearLayout中设置背景为bottom_bar图片，在ImageButton中，设置图片背景为@null。

在TextView中添加gravity并设置center属性，让文字居中。

并且由于监听设置为小的LinearLayout，所以在ImageButton，TextView中添加clickable属性，并设置为false。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ......
    android:background="@drawable/bottom_bar"
    ......

    <LinearLayout
        ......
        <ImageButton
            ......
            android:background="@null"
            android:clickable="false"
            ......
        <TextView
            ......
            android:gravity="center"
            android:clickable="false"
            ......

在fragmentManager设置中，我发现无法使用getFragmentManager函数实现，于是使用了getSupportFragmentManager();

通过查看源码可知，Acrivity中getFragmentManager( )用的是
package android.app包下的代码，而Fragment是package androidx.fragment.app下的，产生了冲突。

因此，有另一个解决思路，将生成的weixin_Fragment.java等几个Java文件中的import全部改为android.app.Fragment，同样可以解决该问题。

源代码地址：https://gitee.com/dwtaiden/work1.0