Wechat界面设计交互实现-ZTY

2024-02-04 17:22:34

Wechat界面-AS开发

一、界面设计

观察微信的界面，可以将微信的界面概括成以下的样子

Wechat界面设计交互实现-ZTY

可以知道微信主要的布局是上、中、下三个部分的平行的LinerLayout

而最下的bottom部分的布局又分成了四个上面图片，下面文字的竖直的LinerLayout

Top部分

这个部分是最简单的，就是一个居中的TextView,设置为黑底白字

代码如下

<?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:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        android:gravity="center_horizontal"
        android:text="wechat-zty"
        android:textColor="#FAFAFA"
        android:textSize="40sp" />
</LinearLayout>

Bottom部分

在这一部分中将该部分的平行的LinerLayout分为四等分，然后每一份都分为上下两个竖直布局的LinerLayout，上面是一个ImageView，下面是一个TextView,更改他们的比例， 使他们看起来协调，将他们的权重设为1。

注意事项

在设计的过程中出现了，Preview中图片显示正常，而在模拟机中运行的时候不显示图片的问题，解决方法为使用本地的图片，并且将图片拖入res下的drawable文件夹内，将原来的图片替换成本地的图片，并且在xml文件

中输入

android:src="@drawable/message"

message替换成图片在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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:baselineAligned="false">

    <LinearLayout
        android:id="@+id/LinearLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:baselineAligned="false"
        android:orientation="vertical">

        <ImageView
            android:src="@drawable/message"
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="31dp"
            android:layout_weight="1"
            android:background="@color/black"
            tools:srcCompat="@drawable/message"
            android:contentDescription="TODO" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="27dp"
            android:layout_weight="1"
            android:background="@color/black"
            android:gravity="center_horizontal"
            android:text="信息"
            android:textColor="#FAFAFA"
            android:textSize="30sp" />

    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView1"
            android:src="@drawable/people"
            android:layout_width="match_parent"
            android:layout_height="43dp"
            android:layout_weight="1"
            android:background="@color/black"
            tools:srcCompat="@drawable/people"
            android:contentDescription="TODO" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/black"
            android:gravity="center_horizontal"
            android:text="联系人"
            android:textColor="#FAFAFA"
            android:textSize="30sp" />

    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView3"
            android:src="@drawable/discover"
            android:layout_width="match_parent"
            android:layout_height="44dp"
            android:layout_weight="1"
            android:background="@color/black"
            tools:srcCompat="@drawable/discover"
            android:contentDescription="TODO" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/black"
            android:gravity="center_horizontal"
            android:text="动态"
            android:textColor="#FAFAFA"
            android:textSize="30sp" />

    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="43dp"
            android:layout_weight="1"
            android:src="@drawable/settings"
            android:background="@color/black"
            tools:srcCompat="@drawable/settings"
            android:contentDescription="TODO" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/black"
            android:gravity="center_horizontal"
            android:text="设置"
            android:textColor="#FAFAFA"
            android:textSize="30sp" />

    </LinearLayout>

</LinearLayout>

Fragment部分

微信在点击完bottom部分的四个部分后，中间的显示区域会分别显示点击部分对应的界面，这个是通过Fragment实现的，即在点击完bottom部分后，对应的界面覆盖到中间显示区域的上分，把之前的界面覆盖住，从而显示

出正确的结果

  • 创建方法：在top和bottom部分中间添加一个FragmentContainerView组件，然后根据提词器的提示，需要我们创建一个关于Fragment的java文件，通过提词器的解决方法，我们能一键创建出这个Java文件，我们将其

    复制4份，分别命名对应微信的4个界面。其中比较重要的函数是onCreate（）和onCreateView（）函数，其余的函数在本例中无关紧要，可以删除。

我们在创建4个Fragment的xml文件，即外观的显示，我们这里比较简单，将android：text设置为我们想要的值，将android:gravity设置为"center_horizontal"即可。

一键创建的Fragment的java文件代码如下：

package com.example.mywork_zty;

import android.os.Bundle;

import android.app.Fragment;

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

/**
 * A simple {@link Fragment} subclass.
 * Use the {@link WechatFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class WechatFragment extends Fragment {

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    // TODO: Rename and change types of parameters
    private String mParam1;
    private String mParam2;

    public WechatFragment() {
        // Required empty public constructor
    }

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @param param2 Parameter 2.
     * @return A new instance of fragment BlankFragment.
     */
    // TODO: Rename and change types and number of parameters
    public static WechatFragment newInstance(String param1, String param2) {
        WechatFragment fragment = new WechatFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_blank, container, false);
    }
}

Fragment信息界面的代码示例：

<?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=".WechatFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="这是消息界面"
        android:gravity="center_horizontal"
        android:textSize="30dp"/>

</FrameLayout>

点击交互监听的实现

按照先创建对象变量，再对变量进行操作的原则，我们先把4个Fragment变量定义出来：

    private Fragment wechatfragment=new WechatFragment();
    private Fragment wechatFragment1=new WechatFragment1();
    private Fragment wechatFragment2=new WechatFragment2();
    private Fragment wechatFragment3=new WechatFragment3();

为了实现Fragment的交互，我们还需要一个fragmentmanager变量和fragmentTransaction变量：

private FragmentManager fragmentManager;
FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();

为了显示Fragment，我们要使用add方法将4个Fragment放入到一个容器之中去，在我们想要显示这些Fragment的时候，先将4个Fragment使用hide的方法隐藏起来，之后再使用show的方法展示出来我们想要的哪一个

Fragment，而hide，show和add方法都是属于fragmentransaction类型的。

从而我们可以创建出以下几个函数：

    private void newFragment(){
        fragmentManager=getFragmentManager();
        FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();
        fragmentTransaction.add(R.id.id_content,wechatfragment);
        fragmentTransaction.add(R.id.id_content,wechatFragment1);
        fragmentTransaction.add(R.id.id_content,wechatFragment2);
        fragmentTransaction.add(R.id.id_content,wechatFragment3);
        fragmentTransaction.commit();
        hideFragment(fragmentTransaction);
    }

    private void hideFragment(FragmentTransaction fragmentTransaction){
        fragmentTransaction.hide(wechatfragment);
        fragmentTransaction.hide(wechatFragment1);
        fragmentTransaction.hide(wechatFragment2);
        fragmentTransaction.hide(wechatFragment3);
    }

    private void showfragment(int i){
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(wechatfragment);
                break;
            case 1:
                transaction.show(wechatFragment1);
                break;
            case 2:
                transaction.show(wechatFragment2);
                break;
            case 3:
                transaction.show(wechatFragment3);
                break;
            default:
                break;
        }
        transaction.commit();
    }
}

  • 注意事项：

    • 在switch中，每个case的最后一定要加入break，否则会出现问题，而且在showfragment()的最后一定要加上一个transaction.commit()

    • 如果在创建fragmentTransaction和fragmentManager时出现问题，记得去检查一下开头，看看是否出现了androidx的这两者的库，如果有，应该改为

      import android.app.FragmentManager;
import android.app.FragmentTransaction;

最后我们来解决设置监听的方法

先要给我们的MainActivity设置点击的监听接口，在MainActivity函数的后面加上 implements View.OnClickListener

public class MainActivity extends AppCompatActivity implements View.OnClickListener {...}

然后是创建Linerlayout的变量

private LinearLayout linerlayout,linerlayout1,linerlayout2,linearlayout3;

之后在onCreate()函数中用findViewById()的方法定位到bottom中的4个Linerlayout，将OnClickListener()给4个Linerlayout设置上，最后调用newFragment()函数来把4个Fragment放入容器之中

最后的onCreate函数为：

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

        linerlayout=findViewById(R.id.LinearLayout);
        linerlayout1=findViewById(R.id.LinearLayout1);
        linerlayout2=findViewById(R.id.LinearLayout2);
        linearlayout3=findViewById(R.id.LinearLayout3);
        linerlayout.setOnClickListener(this);
        linerlayout1.setOnClickListener(this);
        linerlayout2.setOnClickListener(this);
        linearlayout3.setOnClickListener(this);
        newFragment();
    }

我们在设置onClick()函数

@Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.LinearLayout:
                showfragment(0);
                break;
            case R.id.LinearLayout1:
                showfragment(1);
                break;
            case R.id.LinearLayout2:
                showfragment(2);
                break;
            case R.id.LinearLayout3:
                showfragment(3);
                break;
            default:
                break;
        }
    }

运行结果展示

空白界面
Wechat界面设计交互实现-ZTY

联系人界面
Wechat界面设计交互实现-ZTY

设置界面
Wechat界面设计交互实现-ZTY

信息界面
Wechat界面设计交互实现-ZTY

动态界面
Wechat界面设计交互实现-ZTY

源代码

源代码地址：

https://github.com/Nanne1ess/Mywork-zty.git

上一篇：Android 开发必备知识点及面试题汇总（Android+Java，Android基础开发与实践


下一篇：Android：Fragment + Activity 二合一