Wechat界面设计交互实现-ZTY
作者：互联网
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