微信页面的简单模拟

本篇博客用于记录移动互联网开发的第一次作业完成过程中所遇到的问题以及解决方案

一、任务需求

本次作业要求对微信界面实现简单模拟，具体需求如下：

模拟微信界面布局 ，做到美观大方；
实现内部数据联动，即当点击不同按钮后展示不同的内容。
掌握监听的基本使用方法。

二、遇到的问题与解决方案

1. AndroidX引发出的错误

授课内容是基于Android展开，而AndroidX是对 android.support.xxx 包的整理后产物，其中的一些方法和授课过程中使用的基于Android中的方法不能通用，这为后续工作的开展带来了一些不便。
对此，网上现存的解决方案有很多，如：

在SDK Manager中取消勾选Android Q（29）；
在gradle.properties中将下述代码改为false后重新编译

android.useAndroidX=trueandroid.enableJetifier=true

重新安装AS

对于以上几种方法我都有所尝试，但是因为AS版本不同的原因，在重新安装了若干次AS之后，这些方法也都没有真正解决AS自动创建AndroidX项目这个问题。对此，我的解决方法是手动导入需要的包，如：import android.app.Activity;。
对于多个不同的java文件，导入的包需要保持一致性。当我在MainActivity.java中使用：import android.app.Fragment;后，由于引用的另一个weixinFragment.java中使用了AndroidX的包：import androidx.fragment.app.Fragment;导致标红。

2. ImageButtion运行后无法显示图片

这个地方其实算是自己手误导致的，在对应的xml中应该使用

android:src="@drawable/tab_weixin_pressed"

我一开始写成了：

app:srcCompat="@drawable/tab_weixin_pressed"

再这里要再次提醒自己，一定要看清楚想好之后在敲键盘！！！XD

3. 内部数据联动，以及相应图标的颜色变化

解决思路: 对ImageButton所在的LinearLayout进行编号，通过点击不同编号的LinearLayout区域来分别切换至不同的内容。对于button，一开始默认焦点在编号为1的button处，此时该button对应图表颜色为绿色，当点击至其他编号位置时，先将所有的图片变为灰色，然后再将选中区域图片变为绿色。

    private void setSelect(int i) {        FragmentTransaction transaction = fm.beginTransaction();        hideFragment(transaction);        switch (i) {            case 0:                Log.d("setSelect","1");                transaction.show(mTab01);                mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);                break;            case 1:                transaction.show(mTab02);                mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);                break;            case 2:                transaction.show(mTab03);                mImgAddress.setImageResource(R.drawable.tab_address_pressed);                break;            case 3:                transaction.show(mTab04);                mImgSettings.setImageResource(R.drawable.tab_settings_pressed);                break;            default:                break;        }        transaction.commit();    }        private void resetImg() {        mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);        mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);        mImgAddress.setImageResource(R.drawable.tab_address_normal);        mImgSettings.setImageResource(R.drawable.tab_settings_normal);    }    @Override    public void onClick(View v) {        Log.d("onClick","1");        resetImg();        switch (v.getId()) {            case R.id.id_tab_weixin:                Log.d("onClick","2");                setSelect(0);                break;            case R.id.id_tab_frd:                setSelect(1);                break;            case R.id.id_tab_contact:                setSelect(2);                break;            case R.id.id_tab_settings:                setSelect(3);                break;        }    }

三、部分代码及最终效果展示

由于上一部分已经展示了部分代码，这里只给出了前端页面的部分代码展示

<?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:orientation="vertical">    <include layout="@layout/top"/>    <FrameLayout        android:id="@+id/id_content"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">    </FrameLayout>    <include layout="@layout/bottom"/></LinearLayout>

最终效果如图：

本文对应源代码

Android(安卓)Studio开发（一）模拟微信页面

Android Studio开发（一）模拟微信页面