首页 > 其他分享> 文章详细

Wechat界面设计交互实现-ZTY

2021-10-06 15:32:29 阅读：252 来源： 互联网

标签：界面设计 Fragment private break ZTY Wechat android fragmentTransaction id

Wechat界面-AS开发

一、界面设计

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

可以知道微信主要的布局是上、中、下三个部分的平行的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;
        }
    }

运行结果展示

空白界面

联系人界面

设置界面

信息界面

动态界面

源代码

源代码地址：

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

标签：界面设计,Fragment,private,break,ZTY,Wechat,android,fragmentTransaction,id
来源： https://www.cnblogs.com/nanne1ess/p/15371388.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9