如何在Android studio 上开发微信界面，并实现切换效果

最新推荐文章于 2024-04-29 16:47:35 发布

yangwenguangywg

最新推荐文章于 2024-04-29 16:47:35 发布

阅读量3.8k

点赞数 9

文章标签： android 微信 java

本文链接：https://blog.csdn.net/m0_55905001/article/details/120669923

版权

文章目录

1.思路

首先，需要明白明白，我们的目的是做微信界面，并实现切换效果，在切换时，对应的图标要变成绿色
下面是效果图
其中，微信界面，由上部分的导航栏，下部分的分区栏，以及中间的展示栏组成，上部分和下部分是静态的，用LinearLayout控件，中间的展示栏是动态的，由4张页面重叠在一起，我们用FrameLayout控件，我们要做的就是点击下面相应的图标，显示对应的页面。

2.页面制作

提示

这里放一张全局图，用来展示目录和标出一些重点地方
请添加图片描述
写的还累我凎，这里用到的就是java文件、还有res里面的Layout里的xml页面文件、以及res里面的drawable里的图标，这个里面的图标我在后面做下部分分区栏时会降到。

上部分导航栏

效果：
在这里插入图片描述

代码：

<?xml version="1.0" encoding="utf-8"?>
<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="65dp"
    android:background="#000000"
    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:gravity="center_horizontal"
        android:text="微信"
        android:textColor="#ffffff"

        android:textSize="20sp" />
</LinearLayout>

下部分分区栏

注意：这里需要用到微信的各个图标，这里我推荐iconfont阿里巴巴矢量图标库，里面用微博或者Github登录即可免费下载所需要的的图标。
这里，我们需要下载8张png文件的图标，4张灰色的，4张绿色的。
效果：
请添加图片描述
代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="80dp"
    android:layout_gravity="bottom"
    android:background="#F1F1F1"

    tools:context=".bottom">

    <LinearLayout
        android:id="@+id/weixin"
        android:layout_width="270px"
        android:layout_height="200px"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/weixinImg"
            android:layout_width="100px"
            android:layout_height="100px"
            android:src="@drawable/wc"
            tools:srcCompat="@drawable/wc" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/friend"
        android:layout_width="270px"
        android:layout_height="200px"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/friendImg"
            android:layout_width="100px"
            android:layout_height="100px"
            android:src="@drawable/cont"
            tools:srcCompat="@drawable/cont" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/contact"
        android:layout_width="270px"
        android:layout_height="200px"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/contactImg"
            android:layout_width="100px"
            android:layout_height="100px"
            android:src="@drawable/find"
            tools:srcCompat="@drawable/find" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发现" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/setting"
        android:layout_width="270px"
        android:layout_height="200px"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/settingImg"
            android:layout_width="100px"
            android:layout_height="100px"
            android:src="@drawable/my"
            tools:srcCompat="@drawable/my" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我" />
    </LinearLayout>
</LinearLayout>

中间的展示部分

这里只展示4张中的一张，剩下的三张以此类推
注意，这里我们用的是系统给的FrameLayout,创建方式如下图：
请添加图片描述

第一张效果图：
请添加图片描述
第一张的代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".tab1">

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="这是微信聊天界面"
        android:textSize="25dp" />
</FrameLayout>

3.最后合并各栏

效果：
请添加图片描述
代码：

<?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/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

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

</LinearLayout>

4.最后就是java文件中的MainActicity文件

代码部分如下图：
注意，所有的函数都在调用时写了注释，方便理解

package com.example.mywechat;

import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.app.FragmentManager;


import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;

import org.chromium.base.Log;

public class MainActivity extends AppCompatActivity implements  View.OnClickListener{

    //开始获取各个控件

    private LinearLayout weixin;
    private LinearLayout friend;
    private LinearLayout contact;
    private LinearLayout setting;

    private ImageView weixinImg;
    private ImageView friendImg;
    private ImageView contactImg;
    private ImageView settingImg;

    private Fragment tab1 = new tab1();
    private Fragment tab2 = new tab2();
    private Fragment tab3 = new tab3();
    private Fragment tab4 = new tab4();
    private FragmentManager fm;



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


        //初始化下部分分区栏，获取到各个栏，为下面的点击事件做准备，获取各个图片控件，为下面点击更换图片做准备
        initView();
        //初始化Fragment
        initFragment();
        //为下部分各个栏添加监听器，
        initEvent();
        //选择函数，选中下部分的哪个栏，就隐藏FrameLayout中重叠的其他三个栏，并将图标换成绿色的
        selectFragment(0);
    }



    private void initView(){
        weixin=(LinearLayout)findViewById(R.id.weixin);
        friend=(LinearLayout)findViewById(R.id.friend);
        contact=(LinearLayout)findViewById(R.id.contact);
        setting=(LinearLayout)findViewById(R.id.setting);

        weixinImg=(ImageView) findViewById(R.id.weixinImg);
        friendImg=(ImageView) findViewById(R.id.friendImg);
        contactImg=(ImageView) findViewById(R.id.contactImg);
        settingImg=(ImageView) findViewById(R.id.settingImg);
    }


    private void initFragment(){
        fm = getFragmentManager();
        FragmentTransaction transaction=fm.beginTransaction();
        transaction.add(R.id.content,tab1);
        transaction.add(R.id.content,tab2);
        transaction.add(R.id.content,tab3);
        transaction.add(R.id.content,tab4);
        transaction.commit();
    }

    private void initEvent(){
        weixin.setOnClickListener((View.OnClickListener) this);
        friend.setOnClickListener((View.OnClickListener) this);
        contact.setOnClickListener((View.OnClickListener) this);
        setting.setOnClickListener((View.OnClickListener) this);
    }


    private void selectFragment(int i){
        FragmentTransaction transaction=fm.beginTransaction();
        //隐藏除选中的其他三个栏，显示当前选中的这个栏
        hideFragment(transaction);
        //把图片设置为亮的
        //设置内容区域
        switch (i){
            case 0:
                transaction.show(tab1);
                weixinImg.setImageResource(R.drawable.new_wc);
                break;
            case 1:
                transaction.show(tab2);
                friendImg.setImageResource(R.drawable.new_cont);
                break;
            case 2:
                transaction.show(tab3);
                contactImg.setImageResource(R.drawable.new_find);
                break;
            case 3:
                transaction.show(tab4);
                settingImg.setImageResource(R.drawable.new_my);
                break;
            default:break;
        }
        transaction.commit();
    }

    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(tab1);
        transaction.hide(tab2);
        transaction.hide(tab3);
        transaction.hide(tab4);
    }

    @Override
    public void onClick(View v){
        //每次点击事，将上次变绿的图标重置为灰色的
        resetImgs();
        switch (v.getId()){
            case R.id.weixin:
                selectFragment(0);
                break;
            case R.id.friend:
                selectFragment(1);
                break;
            case R.id.contact:
                selectFragment(2);
                break;
            case R.id.setting:
                selectFragment(3);
                break;
            default:
                break;
        }
    }

    public void resetImgs(){
        weixinImg.setImageResource(R.drawable.wc);
        friendImg.setImageResource(R.drawable.cont);
        contactImg.setImageResource(R.drawable.find);
        settingImg.setImageResource(R.drawable.my);

    }
}

5.可能出现的问题（小结）

在这次试验中，出现的问题就是FrameLayout导入错误，
创建FrameLayout的时候，各个FrameLayout中用到的是
import androidx.app.Fragment;而在MainActivity中的是
import android.app.Fragment;导入错误了，这里需要把各个FrameLayout中的哪个多出来的‘’’x‘’去掉，就ok了。

源码GitHub的地址：
链接: https://github.com/GODFF556/MyWechat.