android 微信主界面切换微信安卓聊天界面

转载

mob6454cc77db30 2023-07-23 17:10:17

文章标签 android 微信主界面切换 android xml xml文件 文章分类 Android 移动开发

1.实验环境：

Windows系统，Android Studio

2.界面分析：

android 微信主界面切换微信安卓聊天界面_xml文件

为了实现微信的界面转换功能，我们设置中间的组件为Fragment，在我们进行接下来的代码操作后，点击底部的按钮会进行界面的转换。

以下是点击通讯录后的界面。

android 微信主界面切换微信安卓聊天界面_android_02

我们可以清晰的看到图标和文字也发生了变化

3.界面的代码实现：

3.1顶部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="wrap_content"
    android:background="@color/topColor">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="MyWeChat"
        android:textColor="@color/white"
        android:textSize="24sp" />
</LinearLayout>

这个文件中我们主要设置了LinearLayout的背景颜色(android:background)，文本的颜色(android:textColor),文本的文字(android:text)

3.2中间4个fragment.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_chat"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView6"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是微信聊天界面"
        android:textSize="50sp" />
</LinearLayout>

这个文件是聊天界面的fragment设计，其他三个和该xml文件相似，只用修改其中的文本属性

(android:text)

3.3底部bottom.xml文件

<?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:id="@+id/tab_bottom"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:background="@color/white"
    android:gravity="center">

    <LinearLayout
        android:id="@+id/tab_chat"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView_chat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/chat" />

        <TextView
            android:id="@+id/textView_chat"
            android:layout_width="match_parent"
            android:layout_height="60sp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/pressViewColor"
            android:textSize="24sp" />
    </LinearLayout>
</LinearLayout>

本xml文件展示了底部整体的LinearLayout以及其中4个小LinearLayout中间的第一个LinearLayout，即聊天按钮的区域。其中TextView对应文字，ImageView对应了图标。其中的图标必须使用android:src属性才能在实际运行环境中显示出来，而android:orientation属性可以定义布局内控件的排列方式，有垂直排列（vertical）和水平排列（horizontal）。

3.4窗体总布局的activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity" >

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

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

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

这个文件中我们使用了include来导入我们设置的top和bottom的xml文件，而且设置了Fragment对应的区域。

3.5四个fragment.xml对应的.java文件

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import android.app.Fragment;

public class ChatFragment extends Fragment {



    public ChatFragment() {
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_chat,container,false);
//        return null;
    }
}

自定义的Fragment类需要继承Fragment类，并且重写其中的onCreateView方法，用于返回我们所创建的关于聊天的fragment_chat.xml文件。

这里只展示ChatFragment.java文件，其他三个和这个类似，只需要修改其中所需layout属性的id值即可。

3.6主函数MainActivity.java文件

import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.app.Fragment;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity
//        implements View.OnClickListener
{
    private ListView listView;

    //创建Fragment对象
    private Fragment weixinFragment = new ChatFragment();
    private Fragment xinwenFragment = new DiscoverFragment();
    private Fragment lianxirenFragment = new ContactsFragment();
    private Fragment shezhiFragment = new MeFragment();

    //底端菜单栏LinearLayout
    private LinearLayout linear_chat;
    private LinearLayout linear_contacts;
    private LinearLayout linear_discover;
    private LinearLayout linear_me;

    //底端菜单栏中的Imageview
    private ImageView imageView_chat;
    private ImageView imageView_contacts;
    private ImageView imageView_discover;
    private ImageView imageView_me;

    //底端菜单栏中的TextView
    private TextView textView_chat;
    private TextView textView_contacts;
    private TextView textView_discover;
    private TextView textView_me;

    //初始化fragment
    public void initFragment(){
        fm = getFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(R.id.id_contet,weixinFragment);
        transaction.add(R.id.id_contet,lianxirenFragment);
        transaction.add(R.id.id_contet,xinwenFragment);
        transaction.add(R.id.id_contet,shezhiFragment);

        transaction.commit();
    }

    public void initView(){
        //初始化底端菜单栏中的LinearLayout
        linear_chat = findViewById(R.id.tab_chat);
        linear_contacts = findViewById(R.id.tab_contacts);
        linear_discover = findViewById(R.id.tab_discover);
        linear_me = findViewById(R.id.tab_me);

        //初始化底端菜单栏中的Imageview
        imageView_chat = findViewById(R.id.imageView_chat);
        imageView_contacts = findViewById(R.id.imageView_contacts);
        imageView_discover = findViewById(R.id.imageView_discover);
        imageView_me = findViewById(R.id.imageView_me);

        //初始化底端菜单栏中的TextView
        textView_chat = findViewById(R.id.textView_chat);
        textView_contacts = findViewById(R.id.textView_contacts);
        textView_discover = findViewById(R.id.textView_discover);
        textView_me = findViewById(R.id.textView_me);
    }



    private FragmentManager fm;

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

        initFragment();
        initView();

        //默认开启的时候展示微信聊天的界面
        showFragment(0);
        //将聊天界面的图标和文字进行相应的修改(变绿)
        imageView_chat.setImageResource(R.drawable.chat_changed);
        textView_chat.setTextColor(getResources().getColor(R.color.pressViewColor));

        //设置底部第一个LinearLayout的click事件监听器
        imageView_chat.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {
                //复原底部的TextView和ImageView
                restartButton();
                //展示第一个fragment界面
                showFragment(0);
                //修改图表为对应的变绿的图标
                imageView_chat.setImageResource(R.drawable.chat_changed);
                //修改文字变绿
                textView_chat.setTextColor(getResources().getColor(R.color.pressViewColor));
            }
        });
        //设置底部第二个LinearLayout的click事件监听器
        linear_contacts.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                restartButton();
                showFragment(1);
                imageView_contacts.setImageResource(R.drawable.contacts_changed);
                textView_contacts.setTextColor(getResources().getColor(R.color.pressViewColor));
            }
        });
        //设置底部第三个LinearLayout的click事件监听器
        linear_discover.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                restartButton();
                showFragment(2);
                imageView_discover.setImageResource(R.drawable.discover_changed);
                textView_discover.setTextColor(getResources().getColor(R.color.pressViewColor));
            }
        });
        //设置底部第四个LinearLayout的click事件监听器
        linear_me.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                restartButton();
                showFragment(3);
                imageView_me.setImageResource(R.drawable.me_changed);
                textView_me.setTextColor(getResources().getColor(R.color.pressViewColor));
            }
        });

    }

    private void restartButton(){
        //复原底部第一个LinearLayout的TextView和ImageView的状态
        imageView_chat.setImageResource(R.drawable.chat);
        textView_chat.setTextColor(getResources().getColor(R.color.black));
        //复原底部第二个LinearLayout的TextView和ImageView的状态
        imageView_contacts.setImageResource(R.drawable.contacts);
        textView_contacts.setTextColor(getResources().getColor(R.color.black));
        //复原底部第三个LinearLayout的TextView和ImageView的状态
        imageView_discover.setImageResource(R.drawable.discover);
        textView_discover.setTextColor(getResources().getColor(R.color.black));
        //复原底部第四个LinearLayout的TextView和ImageView的状态
        imageView_me.setImageResource(R.drawable.me);
        textView_me.setTextColor(getResources().getColor(R.color.black));
    }

    private void hideFragment(FragmentTransaction transaction){
        //用于隐藏四个fragment界面
        transaction.hide(weixinFragment);
        transaction.hide(lianxirenFragment);
        transaction.hide(xinwenFragment);
        transaction.hide(shezhiFragment);
    }

    private void showFragment(int i) {
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        //点击不同的区域就会对应不同的显示
        switch (i){
            case 0:
                transaction.show(weixinFragment);
                break;
            case 1:
                transaction.show(lianxirenFragment);
                break;
            case 2:
                transaction.show(xinwenFragment);
                break;
            case 3:
                transaction.show(shezhiFragment);
                break;
            default:
                break;
        }
        //提交本次操作
        transaction.commit();
    }

}

在这个java文件中，我们设置了有关四个fragment片段的变化代码，底部的click事件，以及底部图标和文字的变化代码。通过这些代码实现底部点击后界面的各种变化。

4.小结

本次实验，我们通过导入top和bottom实现了布局中顶层和底部的实现，而且通过中间的fragment片段实现了对应界面的展示以及隐藏。通过onclick的监听器实现了点击事件的完成，熟悉了几个基础的组件例如LinearLayout，ImageView等的使用。

点击查看我的源码

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：gui在实际中很少用 java gui和java

下一篇：神经网络静态剪枝神经网络状态估计

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯