Andriod Studio编写仿微信界面
实验要求
请根据课堂展示结果设计APP门户界面，包含4个tab切换效果。
实验内容
最终页面显示
需要创建的文件
样式文件的内容
这里只写主要的三个文件的内容，分别是top，bottom，layout_main
top.xml
- 只需要修改字体样式
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
- 以及整个的LinearLayout的高度设置
android:layout_height="80dp"
layout_main.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"
android:orientation="vertical"
>
<include layout="@layout/top"></include>
<FrameLayout
android:id="@+id/td_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
></FrameLayout>
<include layout="@layout/bottom"></include>
</LinearLayout>
bottom.xml
- 该页面设置了四个按钮的样式
- 这是其中一个按钮的样式
<LinearLayout
android:id="@+id/td_tab_wexin"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:onClick="onClick"
android:gravity="center"
>
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:layout_weight="1"
app:srcCompat="@drawable/message_open" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="消息"
android:textColor="#0A0A0A" />
且页面样式也得自己设置
主要的Java代码
这本次实验中，需要我们控制的功能事件并不多，只要点击底部，中间的fragment能够相应的进行变换即可
做到两点
- 监听我们对底部控件的点击
- 将监听到的底部点击事件，相应的传递给fragment的事件控制
MainActivity
package com.example.wechat;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.util.Log;
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 Fragment tab01=new weixinFragment();
private Fragment tab02=new friendFragment();
private Fragment tab03=new txlFragment();
private Fragment tab04=new settingFragment();
private LinearLayout weixin;
private LinearLayout friend;
private LinearLayout txl;
private LinearLayout setting;
private ImageButton ImgWeiXin;
private ImageButton ImgFriend;
private ImageButton ImgTxl;
private ImageButton ImgSetting;
private FragmentManager fm;
//主活动事件
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.layout_main);
connect();
addFragment();
Listen();
SelectFragment(0);
}
//连接LinearLayout和imagebutton
private void connect(){
weixin = findViewById(R.id.td_tab_wexin);
friend = findViewById(R.id.td_tab_friend);
txl = findViewById(R.id.td_tab_txl);
setting = findViewById(R.id.td_tab_setting);
ImgWeiXin = findViewById(R.id.imageButton1);
ImgFriend = findViewById(R.id.imageButton2);
ImgTxl = findViewById(R.id.imageButton3);
ImgSetting = findViewById(R.id.imageButton4);
}
//通讯，添加
private void addFragment(){
fm = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fm.beginTransaction();
fragmentTransaction.add(R.id.td_content,tab01);
fragmentTransaction.add(R.id.td_content,tab02);
fragmentTransaction.add(R.id.td_content,tab03);
fragmentTransaction.add(R.id.td_content,tab04);
fragmentTransaction.commit();//提交
}
//将tab全部隐藏
private void hideFragment(FragmentTransaction fragmentTransaction){
fragmentTransaction.hide(tab01);
fragmentTransaction.hide(tab02);
fragmentTransaction.hide(tab03);
fragmentTransaction.hide(tab04);
}
//将img全部变成灰色
private void hideImg(){
ImgWeiXin.setImageResource(R.drawable.message_close);
ImgFriend.setImageResource(R.drawable.friend_close);
ImgTxl.setImageResource(R.drawable.txl_close);
ImgSetting.setImageResource(R.drawable.setting_close);
}
//监听
private void Listen(){
weixin.setOnClickListener(this);
friend.setOnClickListener(this);
txl.setOnClickListener(this);
setting.setOnClickListener(this);
}
//用选择语句，将tab的内容选择显示出来
private void SelectFragment(int i){
fm = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fm.beginTransaction();
hideFragment(fragmentTransaction);
switch (i){
case 0:
fragmentTransaction.show(tab01);
ImgWeiXin.setImageResource(R.drawable.message_open);
break;
case 1:
fragmentTransaction.show(tab02);
ImgFriend.setImageResource(R.drawable.friend_open);
break;
case 2:
fragmentTransaction.show(tab03);
ImgTxl.setImageResource(R.drawable.txl_open);
break;
case 3:
fragmentTransaction.show(tab04);
ImgSetting.setImageResource(R.drawable.setting_open);
break;
default:
break;
}
fragmentTransaction.commit();
}
@Override
public void onClick(View v) {
hideImg();
switch (v.getId()){
case R.id.td_tab_wexin:
Log.v("hzf","第1个tab被点击");
SelectFragment(0);
break;
case R.id.td_tab_friend:
Log.v("hzf","第2个tab被点击");
SelectFragment(1);
break;
case R.id.td_tab_txl:
Log.v("hzf","第3个tab被点击");
SelectFragment(2);
break;
case R.id.td_tab_setting:
Log.v("hzf","第4个tab被点击");
SelectFragment(3);
break;
default:
break;
}
}
}