类微信界面设计 v1.0
一、程序运行效果及界面
程序的界面包括上边框、下边框和中间的内容，上边框显示软件名“微信”，下边框内有四个部分，分别为“消息”、“好友”、“通讯录”和“设置”，四个部分可以随意点击，点击不同的部分中间的内容也会随之变化。
二、实现代码
1.xml文件界面设计
创建top.xml文件，制作顶部的边框。边框的宽度选择65dp，背景颜色选择"#000000"（纯黑），center居中，使用一个TextView来显示文字“微信”，字体大小为30sp，颜色选择"#ffffff"（纯白）
<?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="65dp"
android:gravity="center"
android:background="#000000"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="微信"
android:textColor="#ffffff"
android:textSize="30sp" />
</LinearLayout>
创建bottom.xml文件，制作底部的部分。宽度选择100dp，背景选择事先准备好的图片文件“bottom_bar.9.png”，使用LinearLayout（选择垂直样式vertical）；在LinearLayout中建立图片按钮控件ImageButton和文字控件TextView，图片选择事先准备好的相应图标，TextView中文字对应图标，例如消息（其他三个同理，并为每一个LinearLayout、ImageButton和TextView取好相应的id）：
<?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"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@drawable/bottom_bar"
android:orientation="horizontal"
android:baselineAligned="false">
<LinearLayout
android:id="@+id/id_tab_news"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_news_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:background="#000000"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/tab_weixin_pressed" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text=" 消息"
android:clickable="false"
android:textColor="#ffffff"
android:textSize="30sp" />
</LinearLayout>
</LinearLayout>
创建tab01.xml、tab02.xml、tab03.xml、tab04.xml文件，分别制作中间的四个不同界面。由于这四个界面都只有一行文字，因此只需分别使用一个TextView，“bold”加粗字体，例如tab01：
<?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="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="这是微信聊天界面"
android:textSize="30sp"
android:textStyle="bold" />
</LinearLayout>
最后activity_main.xml文件中，将刚刚的top和bottom加入进来，top在最上面，中间用FrameLayout留出空白，bottom在最下面：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/top"></include>
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom"></include>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
2.class类文件控制
创建四个Fragment，将刚刚创建的四个tab页面通过Fragment传递到主类，例如newsFragment返回tab01：
package com.example.mywechat;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
/**
* A simple {@link Fragment} subclass.
*/
public class newsFragment extends Fragment {
public newsFragment() {
// 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.tab01, container, false);
}
}
3.主类
相应模块以及变量声明：
package com.example.mywechat;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import androidx.appcompat.app.AppCompatActivity;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private LinearLayout mTabweixin;
private LinearLayout mTabfriend;
private LinearLayout mTabaddress;
private LinearLayout mTabsetting;
private ImageButton mImgweixin;
private ImageButton mImgfriend;
private ImageButton mImgaddress;
private ImageButton mImgsetting;
private final Fragment mTab01=new newsFragment();//将Tab01传递给fragment类型的变量mTab01
private final Fragment mTab02=new friendFragment();
private final Fragment mTab03=new addressFragment();
private final Fragment mTab04=new settingFragment();
private FragmentManager fragmentManager;
调整页面的显示，requestWindowFeature去掉界面上多余的部分，调用四个相关的功能函数：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvent();
initFragment();
setSelect(0);
}
initView( )将bottom中设计的四个部分中的图标和文字绑定，让用户不管是点击图标还是点击文字都能跳转到相应页面
private void initView(){
mTabweixin=(LinearLayout)findViewById(R.id.id_tab_news);
mTabfriend=(LinearLayout)findViewById(R.id.id_tab_friend);
mTabaddress=(LinearLayout)findViewById(R.id.id_tab_address);
mTabsetting=(LinearLayout)findViewById(R.id.id_tab_setting);
mImgweixin=(ImageButton)findViewById(R.id.id_tab_news_img);
mImgfriend=(ImageButton)findViewById(R.id.id_tab_friend_img);
mImgaddress=(ImageButton)findViewById(R.id.id_tab_address_img);
mImgsetting=(ImageButton)findViewById(R.id.id_tab_setting_img);
}
initEvent( )控制监听范围，只监听屏幕下方四个部分的点击行为
private void initEvent(){
mTabweixin.setOnClickListener(this);
mTabfriend.setOnClickListener(this);
mTabaddress.setOnClickListener(this);
mTabsetting.setOnClickListener(this);
}
initFragment( )将Fragment初始化，将四个Fragment放入id_content
private void initFragment(){
fragmentManager=getSupportFragmentManager();
FragmentTransaction transaction=fragmentManager.beginTransaction();
transaction.add(R.id.id_content,mTab01);
transaction.add(R.id.id_content,mTab02);
transaction.add(R.id.id_content,mTab03);
transaction.add(R.id.id_content,mTab04);
transaction.commit();
}
将消息、好友、通讯录和设置四个模块分别标号0、1、2、3，setSelect(int i)在收到 i 的值为0时，显示mTab01界面，并且将图标改成tab_news_pressed（图标未点击时是灰色，点击后是绿色），同理，当 i 的值为1、2、3时，也会做相应的改变：
private void setSelect(int i){
FragmentTransaction transaction =fragmentManager.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(mTab01);
mImgweixin.setImageResource(R.drawable.tab_news_pressed);
break;
case 1:
transaction.show(mTab02);
mImgfriend.setImageResource(R.drawable.tab_friend_pressed);
break;
case 2:
transaction.show(mTab03);
mImgaddress.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.show(mTab04);
mImgsetting.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
transaction.commit();
}
hideFragment( )在显示一个tab界面时，将其他几个界面隐藏起来
private void hideFragment(FragmentTransaction transaction){
transaction.hide(mTab01);
transaction.hide(mTab02);
transaction.hide(mTab03);
transaction.hide(mTab04);
}
onClick( )对用户的行为传递不同的参数，当用户点击消息部分时，将 0 传递给setSelect( )，其他部分同以此类推：
@SuppressLint("NonConstantResourceId")
@Override
public void onClick(View v) {
resetImgs();
switch(v.getId()){
case R.id.id_tab_news:
setSelect(0);
break;
case R.id.id_tab_friend:
setSelect(1);
break;
case R.id.id_tab_address:
setSelect(2);
break;
case R.id.id_tab_setting:
setSelect(3);
break;
default:
break;
}
}
点击其他图标后，将之前的图标变为灰色
private void resetImgs(){
mImgweixin.setImageResource(R.drawable.tab_news_normal);
mImgfriend.setImageResource(R.drawable.tab_friend_normal);
mImgaddress.setImageResource(R.drawable.tab_address_normal);
mImgsetting.setImageResource(R.drawable.tab_settings_normal);
}
}