类微信界面设计

类微信界面设计

---

前言

5G推动安卓开发与物联网的结合。随着5G标准的逐渐落地，未来安卓开发将与物联网有紧密的联系，这在一定程度上提升了安卓开发的活力，但是也对安卓开发人员提出了新的要求，就是需要了解一定的物联网知识。物联网的应用领域非常广泛，包括车联网、农业物联网、工业物联网、智能家居以及个人可穿戴设备等等，未来安卓开发必然会与这些领域形成紧密的联系

---

一、结果截图

二、项目结构截图

三、主要代码

1.MainActivity.java

代码如下：
package com.example.mywechat;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabcontact;
private LinearLayout mTabsetting;

private ImageButton imageWeixin;
private ImageButton imageFrd;
private ImageButton imagecontact; //这是注释
private ImageButton imagesetting;


private Fragment mTab01 =new weixinFragment();
private Fragment mTab02 =new frdFragment();
private Fragment mTab03 =new contactFragment();
private Fragment mTab04 =new settingFragment();
private FragmentManager fm;

public void onClick(View v){
    Log.d("onClick","1");
    resetImgs();
    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_contect:
            setSelect(2);
            break;
        case R.id.id_tab_settings:
            setSelect(3);
            break;
        default:
            break;
    }

}
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);

    initFragment();
    initView();
    setSelect(0);
    initEvent();
}
private void initEvent(){
    mTabWeixin.setOnClickListener(this);
    mTabFrd.setOnClickListener(this);
    mTabcontact.setOnClickListener(this);
    mTabsetting.setOnClickListener(this);
}
private void setSelect(int i){
    FragmentTransaction transaction = fm.beginTransaction();
    hideFragment(transaction);
    switch (i){
        case 0:
            Log.d("setSelect","1");
            transaction.show(mTab01);
            imageWeixin.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case 1:
            transaction.show(mTab02);
            imageFrd.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case 2:
            transaction.show(mTab03);
            imagecontact.setImageResource(R.drawable.tab_address_pressed);
            break;
        case 3:
            transaction.show(mTab04);
            imagesetting.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);
}
private void resetImgs(){
    imageWeixin.setImageResource(R.drawable.tab_weixin_normal);
    imageFrd.setImageResource(R.drawable.tab_find_frd_normal);
    imagecontact.setImageResource(R.drawable.tab_address_normal);
    imagesetting.setImageResource(R.drawable.tab_settings_normal);
}


private void initFragment(){
    fm=getSupportFragmentManager();
    FragmentTransaction transaction = fm.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();
}
private void initView(){
    mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
    mTabFrd =(LinearLayout) findViewById(R.id.id_tab_frd);
    mTabcontact =(LinearLayout) findViewById(R.id.id_tab_contect);
    mTabsetting =(LinearLayout) findViewById(R.id.id_tab_settings);

    imageWeixin =(ImageButton) findViewById(R.id.id_tab_weixin_img);
    imageFrd =(ImageButton) findViewById(R.id.id_tab_frd_img);
    imagecontact =(ImageButton) findViewById(R.id.id_tab_contect_img);
    imagesetting =(ImageButton) findViewById(R.id.id_tab_settings_img);
}

}

2.bottom.xml

代码如下：

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

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

    <ImageButton
        android:id="@+id/id_tab_weixin_img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:contentDescription="@string/app_name"
        app:srcCompat="@drawable/tab_weixin_pressed" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</LinearLayout>

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

    <ImageButton
        android:id="@+id/id_tab_frd_img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:contentDescription="@string/app_name"
        app:srcCompat="@drawable/tab_find_frd_normal" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="朋友"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</LinearLayout>

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

    <ImageButton
        android:id="@+id/id_tab_contect_img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:contentDescription="@string/app_name"
        app:srcCompat="@drawable/tab_address_normal" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="通讯录"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</LinearLayout>

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

    <ImageButton
        android:id="@+id/id_tab_settings_img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:contentDescription="@string/app_name"
        app:srcCompat="@drawable/tab_settings_normal" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="设置"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</LinearLayout>

---

四、实验心得

根据老师课程内容完成了代码的复现，理解了后台代码利用fragment进行切换以及根据点击事件更改图片样式的思路，但是对于布局的xml代码有些地方比较模糊，在布局方面耗费了一些时间，例如设置weight=1，height=0来调节布局的技巧就不能很好的理解。还是需要更多的项目进行锻炼，不断摸索。

五、Github仓库

代码仓库