AndroidStudio实现微信界面设计

更新时间：2021年10月09日 08:45:33 作者：咕噜gl_

这篇文章带你通过Androidstudio来实现微信的基础界面，微信的界面主要包含了主页、通讯录、发现以及我的账号功能区，下文包含了整个开发过程，以及解决该问题的过程及思路并提供了源码

一、内容

实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换

二、技术

使用布局（layouts）和分段（fragment），对控件进行点击监听

三、xml代码

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="55dp"
    android:background="@color/black">
 
    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="55dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="应用"
        android:textColor="@color/white"
        android:textSize="30sp" />
</LinearLayout>

界面居中上方写标题，背景是黑色，字体是白色

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:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@color/black"
 
 
    >
 
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/p1"
 
            />
 
        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/white"
            android:textSize="24sp" />
 
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/p2" />
 
        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="通讯录"
            android:textColor="@color/white"
            android:textSize="24sp" />
 
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/p3" />
 
        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现"
            android:textColor="@color/white"
            android:textSize="24sp" />
 
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/linearLayout4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/p4" />
 
        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我"
            android:textColor="@color/white"
            android:textSize="24sp" />
 
    </LinearLayout>
</LinearLayout>

界面下方分成四个模板，由图片和文字组成，正在使用的界面图标为绿色，不在使用的界面图标为黑色

fragment_config.xml/fragment_wechat/fragment_friend/fragment_contact

<?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"
    tools:context=".Fragment_config">
 
    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是微信聊天界面"
        android:textSize="35sp" />
 
</LinearLayout>

显示界面中间内容

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

将top.xml和bottom.xml放在一个界面中

四、Java代码

MainActivity.java

package com.example.cyxapp;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
 
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
 
 
    private Fragment Fragment_config=new Fragment_config();
    private Fragment Fragment_contact=new Fragment_contact();
    private Fragment Fragment_wechat=new Fragment_wechat();
    private Fragment Fragment_friend=new Fragment_friend();
    private FragmentManager fragmentManager;
    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        linearLayout1=findViewById(R.id.linearLayout1);
        linearLayout2=findViewById(R.id.linearLayout2);
        linearLayout3=findViewById(R.id.linearLayout3);
        linearLayout4=findViewById(R.id.linearLayout4);
 
        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
 
        initFragment();
    }
 
    private void initFragment(){
        fragmentManager=getFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.id_content,Fragment_wechat);
        transaction.add(R.id.id_content,Fragment_contact);
        transaction.add(R.id.id_content,Fragment_config);
        transaction.add(R.id.id_content,Fragment_friend);
        transaction.commit();
    }
 
 
    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(Fragment_wechat);
        transaction.hide(Fragment_contact);
        transaction.hide(Fragment_config);
        transaction.hide(Fragment_friend);
    }
    private void background(View v) {
        switch (v.getId()) {
            case R.id.linearLayout1:
                linearLayout1.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            case R.id.linearLayout2:
                linearLayout2.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            case R.id.linearLayout3:
                linearLayout3.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            case R.id.linearLayout4:
                linearLayout4.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            default:
                break;
        }
    }
 
    private void backgroundreturn(View v) {
        switch (v.getId()) {
            case R.id.linearLayout1:
                linearLayout1.setBackgroundColor(Color.parseColor("#000000"));
                break;
            case R.id.linearLayout2:
                linearLayout2.setBackgroundColor(Color.parseColor("#000000"));
                break;
            case R.id.linearLayout3:
                linearLayout3.setBackgroundColor(Color.parseColor("#000000"));
                break;
            case R.id.linearLayout4:
                linearLayout4.setBackgroundColor(Color.parseColor("#000000"));
                break;
            default:
                break;
        }
    }
 
    private void showfragmnet(int i) {
 
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(Fragment_wechat);
                background(linearLayout1);
                backgroundreturn(linearLayout3);
                backgroundreturn(linearLayout2);
                backgroundreturn(linearLayout4);
                break;
            case 1:
                transaction.show(Fragment_friend);
                background(linearLayout2);
                backgroundreturn(linearLayout4);
                backgroundreturn(linearLayout1);
                backgroundreturn(linearLayout3);
                break;
            case 2:
                transaction.show(Fragment_contact);
                background(linearLayout3);
                backgroundreturn(linearLayout4);
                backgroundreturn(linearLayout2);
                backgroundreturn(linearLayout1);
                break;
            case 3:
                transaction.show(Fragment_config);
                background(linearLayout4);
                backgroundreturn(linearLayout1);
                backgroundreturn(linearLayout2);
                backgroundreturn(linearLayout3);
                break;
            default:
                break;
        }
        transaction.commit();
    }
 
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.linearLayout1:
                showfragmnet(0);
                break;
            case R.id.linearLayout2:
                showfragmnet(1);
                break;
            case R.id.linearLayout3:
                showfragmnet(2);
                break;
            case R.id.linearLayout4:
                showfragmnet(3);
                break;
            default:
                break;
        }
    }
 
 
 
}

initFragment函数中利用transaction来实现fragment的切换

hideFragment把没有使用的界面的fragment的内容隐藏起来

background使图标点击后变绿色

backgroundreturn让图标恢复黑色

showfragmnet显示正在使用界面的fragment的内容

onClick监听函数，监听到底是哪一个图标被击中从而显示哪一个界面的内容

Fragment_config.java

package com.example.cyxapp;
 
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
 
public class Fragment_config extends Fragment {
 
    public Fragment_config() {
        // Required empty public constructor
    }
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_config, container, false);
    }
}

Fragment_contact、Fragment_friend、Fragment_wechat类似

五、界面展示

代码仓库地址：cccyuxuan/cyxApp1 (github.com)

到此这篇关于AndroidStudio实现微信界面设计的文章就介绍到这了,更多相关AndroidStudio 微信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

android RecyclerView添加footerview详解
大家好，本篇文章主要讲的是android RecyclerView添加footerview详解，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下
2022-01-01
Android开发Jetpack组件LiveData使用讲解
LiveData是Jetpack组件的一部分，更多的时候是搭配ViewModel来使用，相对于Observable，LiveData的最大优势是其具有生命感知的，换句话说，LiveData可以保证只有在组件（ Activity、Fragment、Service）处于活动生命周期状态的时候才会更新数据
2022-08-08
Android转场动画深入分析探究
对于一个动画而言，它是由多个分镜头组成的，而转场就是分镜之间衔接方式。转场的主要目的，就是为了让镜头与镜头之间过渡的更加自然，让动画更加连贯，例如两个页面切换之间的衔接动画
2022-10-10
Android省市区三级联动控件使用方法实例讲解
最近有需求需要实现省市区三级联动，但是发现之前的实现不够灵活，自己做了一些优化。下面通过实例代码给大家介绍下Android省市区三级联动控件使用方法
2017-01-01
Android Studio3.6.3 当前最新版本数据库查找与导出方法(图文详解)
这篇文章主要介绍了Android Studio3.6.3 当前最新版本数据库查找与导出方法,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
Android 游戏开发入门简单示例
本文主要介绍Android 游戏开发，这里整理了详细的开发游戏的资料，并提供简单的游戏示例代码，有兴趣的同学可以参考下
2016-08-08
Android 中 android.view.WindowLeaked的解决办法
这篇文章主要介绍了Android 中 android.view.WindowLeaked的解决办法的相关资料,需要的朋友可以参考下
2017-05-05
Android中SharedPreferences简单使用实例
这篇文章主要介绍了Android中SharedPreferences简单使用案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
Kotlin类型系统竟如此简单
这篇文章主要给大家介绍了关于Kotlin类型系统的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Kotlin具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-09-09
Android创建文件时出现java.io.IOException: Operation not permitte
最近使用android10创建文件失败,并抛出权限异常,这篇文章主要给大家介绍了Android创建文件时出现java.io.IOException: Operation not permitted异常的解决方法,需要的朋友可以参考下
2023-05-05