一、设计目标
1.1 设计要求
完成类微信的门户页面框架设计，APP最少必须包含4个tab页面。框架设计需要使用 fragment，activity，不得使用UNIAPP技术进行开发（H5或者小程序）；
1.2 设计功能介绍
（1）顶部显“微信“”
（2）底部有四个按钮，分别为聊天、好友、通讯录、设置。
（3）点击按钮，按钮图标变化且点击不同按钮，中间显示界面显示对应的内容。
二、界面设计
2.1 UI布局设计
2.1.1 准备图片
2.1.2 顶端top.xml
代码：
<?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">
<TextView
android:id="@+id/textView"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:layout_weight="1"
android:gravity="center"
android:textColor="#4ab4a5"
android:text="微信" />
</LinearLayout>
2.1.3 底端button.xml
代码：
<?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="70dp"
android:background="#FFFFFF"
android:orientation="horizontal"
android:baselineAligned="false">
<LinearLayout
android:id="@+id/linear_char"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:onClick="onClick">
<TextView
android:id="@+id/textView6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="聊天"
android:textColor="#4ab4a5"
android:textSize="20dp" />
<ImageButton
android:id="@+id/聊天"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:contentDescription="微信"
android:clickable="false"
app:srcCompat="@drawable/chat"
android:scaleType="centerInside"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linear_friend"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:onClick="onClick"
android:orientation="vertical">
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="好友"
android:textColor="#4ab4a5"
android:textSize="20dp" />
<ImageButton
android:id="@+id/朋友"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:contentDescription="微信"
android:clickable="false"
app:srcCompat="@drawable/friend"
android:scaleType="centerInside"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linear_contact"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:onClick="onClick">
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="通讯录"
android:textColor="#4ab4a5"
android:textSize="20dp" />
<ImageButton
android:id="@+id/通讯录"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:clickable="false"
android:contentDescription="微信"
app:srcCompat="@drawable/contect"
android:scaleType="centerInside"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linear_setting"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:onClick="onClick">
<TextView
android:id="@+id/textView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="设置"
android:textColor="#4ab4a5"
android:textSize="20dp" />
<ImageButton
android:id="@+id/设置"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:clickable="false"
android:contentDescription="微信"
app:srcCompat="@drawable/setting"
android:scaleType="centerInside"/>
</LinearLayout>
</LinearLayout>
2.1.4 Layout_Main.xml
代码：
<?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="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<include
layout="@layout/top"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_weight="0" />
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="553dp"
android:layout_weight="1">
</FrameLayout>
<include
layout="@layout/bottom"
android:layout_width="match_parent"
android:layout_height="119dp"
android:layout_weight="0" />
</LinearLayout>
2.2 MainActivity代码配置
2.2.1新建四个fragment：将fragment与对应的layout文件相关联
fragment1：
public class Fragment1 extends Fragment {
//private String context;//用于获取textview的值
//private TextView mTextView;//用于获取textview控件
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment1, container, false);
//mTextView = (TextView) view.findViewById(R.id.txt_connect);
//mTextView.setText(context);
return view;
// return inflater.inflate(R.layout.fragment_connect, container, false);
}
}
fragment2：
public class Fragment2 extends Fragment {
//private String context;//用于获取textview的值
//private TextView mTextView;//用于获取textview控件
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment2, container, false);
//mTextView = (TextView) view.findViewById(R.id.txt_connect);
//mTextView.setText(context);
return view;
// return inflater.inflate(R.layout.fragment_connect, container, false);
}
}
fragment3：
public class Fragment3 extends Fragment {
//private String context;//用于获取textview的值
//private TextView mTextView;//用于获取textview控件
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment3, container, false);
//mTextView = (TextView) view.findViewById(R.id.txt_connect);
//mTextView.setText(context);
return view;
// return inflater.inflate(R.layout.fragment_connect, container, false);
}
}
fragment4：
public class Fragment4 extends Fragment {
//private String context;//用于获取textview的值
//private TextView mTextView;//用于获取textview控件
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment4, container, false);
//mTextView = (TextView) view.findViewById(R.id.txt_connect);
//mTextView.setText(context);
return view;
// return inflater.inflate(R.layout.fragment_connect, container, false);
}
}
2.2.2完善相应的四个fragment.xml
代码：
<?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=".Fragment1">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/txt_message"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="这是聊天界面"
android:textSize="35sp"
android:gravity="center"/>
</FrameLayout>
剩余三个同理
2.2.3编写MainActivity文件的Java代码
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private final Fragment fragment1=new Fragment1();
private final Fragment fragment2=new Fragment2();
private final Fragment fragment3=new Fragment3();
private final Fragment fragment4=new Fragment4();
private FragmentManager fm;
private FragmentTransaction transaction;
private LinearLayout tabChat;
private LinearLayout tabFriend;
private LinearLayout tabContect;
private LinearLayout tabSetting;
private ImageButton imgChat;
private ImageButton imgFriend;
private ImageButton imgContact;
private ImageButton imgSetting;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.layout_main);
//去掉它自带的标题框
if (getSupportActionBar() != null)
{
getSupportActionBar().hide();
}
initView();//关联对象
initFragment();//添加界面
transaction=fm.beginTransaction();
hidefragment(transaction);
//局部监听
tabChat.setOnClickListener(this);
tabFriend.setOnClickListener(this);
tabContect.setOnClickListener(this);
tabSetting.setOnClickListener(this);
}
//Fragment初始化函数
private void initFragment(){
fm=getSupportFragmentManager();
transaction=fm.beginTransaction()
.add(R.id.content,fragment1)
.add(R.id.content,fragment2)
.add(R.id.content,fragment3)
.add(R.id.content,fragment4);
transaction.commit();
}
// 找到所有的控件
private void initView() {
tabChat = findViewById(R.id.linear_char);
tabFriend = findViewById(R.id.linear_friend);
tabContect = findViewById(R.id.linear_contact);
tabSetting = findViewById(R.id.linear_setting);
imgChat = findViewById(R.id.聊天);
imgFriend = findViewById(R.id.朋友);
imgContact = findViewById(R.id.通讯录);
imgSetting = findViewById(R.id.设置);
}
//控制图片变换
private void setSelect(int i){
FragmentTransaction transaction=fm.beginTransaction();
hidefragment(transaction);
switch (i){
case 1:
transaction.show(fragment1);
imgChat.setImageResource(R.drawable.chat1);
break;
case 2:
transaction.show(fragment2);
imgFriend.setImageResource(R.drawable.friend1);
break;
case 3:
transaction.show(fragment3);
imgContact.setImageResource(R.drawable.contect1);
break;
case 4:
transaction.show(fragment4);
imgSetting.setImageResource(R.drawable.setting1);
break;
default:
break;
}
// transaction.commit();
}
//隐藏所有tab
private void hidefragment(@NonNull FragmentTransaction transaction){
transaction.hide(fragment1);
transaction.hide(fragment2);
transaction.hide(fragment3);
transaction.hide(fragment4);
transaction.commit();
}
//重写onClick方法
//用户点击哪个tab，就设置i值
public void onClick(@NonNull View v) {
resetimg();
switch (v.getId()){
case R.id.linear_char:
setSelect(1);
break;
case R.id.linear_friend:
setSelect(2);
break;
case R.id.linear_contact:
setSelect(3);
break;
case R.id.linear_setting:
setSelect(4);
break;
default:
break;
}
}
//将未点击的图片按钮还原成原来的颜色
private void resetimg(){
imgChat.setImageResource(R.drawable.chat);
imgFriend.setImageResource(R.drawable.friend);
imgContact.setImageResource(R.drawable.contect);
imgSetting.setImageResource(R.drawable.setting);
}
//最后调用函数
}
三、运行界面展示
3.1初始界面
3.2 点击聊天按钮
3.3 点击好友按钮
3.4 点击通讯录按钮
3.5 点击设置按钮
四、源码仓库地址
仓库 - 流年 (liuniantyy) - Gitee.com
