移动开发第一次作业——Android Studio微信页面搭建
程序员文章站
2022-04-26 08:06:17
...
Android Studio搭建微信页面
项目总体要求：
1、页面具有标题
2、页面有中间显示框
3、页面具有底部选择框，并且具有选择事件
4、在页面底部选择框进行改变的时候，中间显示框的页面同步改变
布局设计：
1、一个顶部的LinearLayOut 显示顶部内容
2、底部的4个标签，使用4个LinearLayOut 并且是横向布局
3、四个Fragment 分别对应4个页面的内容，即微信、朋友、通讯录、设置
一、布局文件
1、需新建一个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="65dp"
android:gravity="center"
android:background="#000000"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="@string/app_name"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
意为在顶部中间添加一个文本MyWeChat，背景采用黑色
2、需新建一个bottom.xml文件来进行底部布局
<LinearLayout
android:id="@+id/id_tab_weixin"
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_weixin_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:clickable="false"
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:text="微信"
android:textColor="#ffffff"
android:gravity="center"
android:clickable="false"
android:textSize="15sp" />
</LinearLayout>
此为底部一个按钮的布局，其余三个类似，主要设置文本名，背景颜色，按钮图标。四个按钮呈横向布局。
3、中部文字部分
<?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="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:text="这是微信聊天界面"
android:textSize="30sp"
android:textStyle="bold"/>
</LinearLayout>
以微信界面的中部文字为例，其他三个类似，中部添加需要显示的文本。
4、activity_main.xml文件
<?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" />
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
微信界面其实是由三个大的layout拼接而成的，我们已经写了一个top，一个bottom。我们需要将这三个layout连接起来，FrameLayout就是微信界面中的中间部分，也就是我们需要输出文字的部分。
5、在与MainActivity.java相同的目录下新建四个Fragment
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.tab01, container, false);
}
}
以其中一个为例，将Fragment文件底部的函数改成R.layout.tab01用来将tab_01.xml文件与bottom.xml和top.xml连接起来。其他三个类似。
二、核心代码
MainActivity.java部分
首先定义四个Fragment类对象，对象名可自取，然后建立一个FragmentManager 类对象fm
private Fragment mTab01 = new weixinFragment();
private Fragment mTab02 = new frdFragment();
private Fragment mTab03 = new contactFragment();
private Fragment mTab04 = new settingFragment();
private FragmentManager fm;
initFragment()函数用来添加刚才定义好的对象，用来传递中间界面的文字
private void initFragment() {
fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.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();
}
initView()函数，其中上面四个参数用来存储四个bottom图片底下的文字，下面四个参数用来存储四个图片
private void initView(){
mTabWeixin = (LinearLayout)findViewById(R.id.id_tab_weixin);
mTabFrd = (LinearLayout)findViewById(R.id.id_tab_frd);
mTabAddress = (LinearLayout)findViewById(R.id.id_tab_contact);
mTabSettings = (LinearLayout)findViewById(R.id.id_tab_settings);
mImgWeixin = (ImageButton)findViewById(R.id.id_tab_weixin_img);
mImgFrd = (ImageButton)findViewById(R.id.id_tab_frd_img);
mImgAddress = (ImageButton)findViewById(R.id.id_tab_contact_img);
mImgSettings = (ImageButton)findViewById(R.id.id_tab_settings_img);
}
hideFragment()函数，用于隐藏四个Fragement，避免运行时文字挤在一起
private void hidefragment(FragmentTransaction transaction){
transaction.hide(mTab01);
transaction.hide(mTab02);
transaction.hide(mTab03);
transaction.hide(mTab04);
}
initEvent() 函数，将监听范围从全屏减小至底部四个LinearLayout，减少内存消耗
private void initEvent(){
mImgWeixin.setOnClickListener(this);
mImgFrd.setOnClickListener(this);
mImgAddress.setOnClickListener(this);
mImgSettings.setOnClickListener(this);
}
setSelect(int i)函数，用于使第i个LinearLayout的图表变亮
private void setSelect(int i){
FragmentTransaction transaction=fm.beginTransaction();
hidefragment(transaction);
switch (i){
case 0:
transaction.show(mTab01);
mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.show(mTab02);
mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
transaction.show(mTab03);
mImgAddress.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.show(mTab04);
mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
transaction.commit();
}
对四个按钮进行监听
@Override
public void onClick(View v) {
resetimg();
switch (v.getId()){
case id.id_tab_weixin_img:
setSelect(0);
break;
case id.id_tab_frd_img:
setSelect(1);
break;
case id.id_tab_contact_img:
setSelect(2);
break;
case id.id_tab_settings_img:
setSelect(3);
break;
default:
break;
}
}
resetimg() 函数，将未点击的图片按钮还原成原来的颜色
private void resetimg(){
mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
mImgAddress.setImageResource(R.drawable.tab_address_normal);
mImgSettings.setImageResource(R.drawable.tab_settings_normal);
}
最后，调用函数
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initFragment();
initEvent();
setSelect(0);
}
三、运行结果展示
微信界面
朋友界面
通讯录界面
设置界面
至此，Android Studio微信页面搭建完毕
附上源码链接
https://gitee.com/CieloSs/mobile-development/tree/master/app
上一篇： 爬取QQ好友列表或定位QQ好友秘密
下一篇： Scrapy爬虫笔记——1