功能要求
1.页面具有标题
2.具有四个页面，页面具有底部选择框，同时具有选择事件，当点击选择事件的时候进行页面切换
3.页面内容不超出边界且清晰
思路分析
该微信界面由三部分组成
- 页面顶部标题栏（top.xml）
- 中间内容页面
- 底部导航栏（bottom.xml）
所以我们需要编写上述几个xml布局页面，分别分析每部分的布局内容及要求： 顶部标题栏：此栏需有app的标题，标题大小颜色自定义且居中显示，背景色自选 中间内容页面：由于本app是仿微信界面，所以设置了四个页面，分别显示不同的内容 底部导航栏：四个图标，单击可以切换中间内容页面，故该布局文件中包含四个ImageButton，界面切换部分需要用Fragment实现
设计思路
编写bottom.xml实现底部四个按钮，下面只展示其中一个控件的实现，剩下三个类似。
代码语言：javascript复制<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="@ id/tab01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@ id/tab01_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="@drawable/weixin_pressed" />
<TextView
android:id="@ id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="微信" />
</LinearLayout>顶部布局实现
编写top.xml，实现顶部控件。
代码语言：javascript复制<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/black"
>
<TextView
android:id="@ id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="My WeChat"
android:textColor="@color/white"
android:textSize="30sp" />
</LinearLayout>四个分段代码代码
编写包括weixinFragment在内的四个分段的代码，其中一个如下
代码语言：javascript复制package com.example.myapplication;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* A simple {@link Fragment} subclass.
* Use the {@link weixinFragment#newInstance} factory method to
* create an instance of this fragment.
*/
public class weixinFragment 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 weixinFragment() {
// 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 weixinFragment.
*/
// TODO: Rename and change types and number of parameters
public static weixinFragment newInstance(String param1, String param2) {
weixinFragment fragment = new weixinFragment();
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_weixin, container, false);
}
}四个分段页面布局代码
其中fragment_wechat.xml如下：
代码语言：javascript复制<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="horizontal"
tools:context=".weixinFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="50sp"
android:gravity="center"
android:text="这是微信界面" />
</LinearLayout>
分段初始化Oncreate()实现
包括对ImageButton、LinearLayout、Fragment的初始化
代码语言：javascript复制public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private Fragment weixinFragment = new weixinFragment();
private Fragment friendFragment = new friendFragment();
private Fragment contactFragment = new contactFragment();
private Fragment settingFragment = new settingFragment();
private FragmentManager fm;
private LinearLayout tab01,tab02,tab03,tab04;
private ImageView tab01_img;
private ImageView tab02_img;
private ImageView tab03_img;
private ImageView tab04_img;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
weixinFragment = new weixinFragment();
friendFragment = new friendFragment();
contactFragment = new contactFragment();
settingFragment = new settingFragment();
tab01 = findViewById(R.id.tab01);
tab02 = findViewById(R.id.tab02);
tab03 = findViewById(R.id.tab03);
tab04 = findViewById(R.id.tab04);
fm = getSupportFragmentManager();
initialfragment();
tab01_img = findViewById(R.id.tab01_img);
tab02_img = findViewById(R.id.tab02_img);
tab03_img = findViewById(R.id.tab03_img);
tab04_img = findViewById(R.id.tab04_img);
tab01.setOnClickListener(this);
tab02.setOnClickListener(this);
tab03.setOnClickListener(this);
tab04.setOnClickListener(this);
}页面切换实现
实现页面切换首先要实现对底部四个按钮的监听，当监听到点击时，进行切换页面。利用OnClickListener()实现监听，利用重写OnClick()实现点击时的操作，编写show()函数实现四个页面中的切换。
MainActivity.java中的关键代码：
代码语言：javascript复制private void show(int i) {
FragmentTransaction transaction = fm.beginTransaction();
Hide(transaction);
switch (i){
case 1:transaction.show(weixinFragment);break;
case 2:transaction.show(friendFragment);break;
case 3:transaction.show(contactFragment);break;
case 4:transaction.show(settingFragment);break;
default:break;
}
transaction.commit();
}效果图
简易微信整体包括四个页面：聊天、发现、通讯录、设置页面。
下面是实现的四个效果图：
张浪浪的仓库: ......dfafa (gitee.com)
