目录

1.引言

2.实现

1.写出顶部和底部的layout

2.主页面

3.写四个fragment用于显示不同的内容

4.写MainActivity中的代码

 3.总结

---

---

1.引言

这是我第一次接触安卓的开发，因为之前学过c#和java，感觉使用AS开发就像使用java在写winform，同样是放置控件，设置控件属性，同样的获取控件对象，监听事件。当然这样说太肤浅了一些，毕竟也是初学，只是发表初学者的一些小观点。下面是实现过程。

2.实现

1.写出顶部和底部的layout

      顶部和底部分别为bottom.xml和top.xml，样式设置如下，注意bottom不需要放在底部，因为后续放在main.xml中的时候，FrameLayout权重设置为1，会将头顶部撑开。

top.xml没什么难度，自己尝试一下就可以写出来

bottom.xml需要熟练使用LinearLayout布局，同时包括了imageView使用，代码如下：

<?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:id="@+id/bottm_bar"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#D6D6D6"><LinearLayoutandroid:id="@+id/tap01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:id="@+id/imageView1"android:layout_width="match_parent"android:layout_height="match_parent"app:srcCompat="@drawable/message02" /><TextViewandroid:id="@+id/textView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="微信" /></LinearLayout><LinearLayoutandroid:id="@+id/tap02"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView2"android:layout_width="match_parent"android:layout_height="match_parent"app:srcCompat="@drawable/friends" /><TextViewandroid:id="@+id/textView2"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="朋友" /></LinearLayout><LinearLayoutandroid:id="@+id/tap03"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView3"android:layout_width="match_parent"android:layout_height="match_parent"app:srcCompat="@drawable/founding" /><TextViewandroid:id="@+id/textView3"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="发现" /></LinearLayout><LinearLayoutandroid:id="@+id/tap04"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView4"android:layout_width="match_parent"android:layout_height="wrap_content"app:srcCompat="@drawable/mine" /><TextViewandroid:id="@+id/textView4"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="我的" /></LinearLayout>
</LinearLayout>

2.主页面

  主页面main.xml就是将写好的top和bottom引用进来，中间放一个FrameLayout显示内容，如下

<include>在代码中写出，格式如下：

<includelayout="@layout/top"android:layout_width="match_parent"android:layout_height="wrap_content"></include>

3.写四个fragment用于显示不同的内容

  由于微信主页面包括四个大模块，“消息”，“朋友”，“发现”和“我的”，所以需要四个fragment来显示这些内容，格式基本一致，拿消息页面举例，格式如下

  接下来只要在MainActivty中编写代码将这四个页面添加进FrameLayout，并通过监听按钮来点击切换不同页面就可以了。

4.写MainActivity中的代码

  通过代码来将各个组件联系在一起，并实现切换效果，代码如下：（附注释）

package com.example.myapp;import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
/*implements View.OnClickListener 实现点击监听的接口，@override注解*/
public class MainActivity extends AppCompatActivity implements View.OnClickListener {/*创建四个Fragment对象*/private Fragment weixin_Fragment;private Fragment context_Fragment;private Fragment friend_Fragment;private Fragment setting_Fragment;/*创建一个FragmentManager和FragmentTransaction*/private FragmentManager fm;private FragmentTransaction transaction;/*创建四个LinearLayout和四个ImageView*/private LinearLayout tab01,tab02,tab03,tab04;private ImageView img01,img02,img03,img04;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);/*将四个Fragment对象创建为对应的Fragment*/weixin_Fragment = new Weixin_Fragment();context_Fragment = new Context_Fragment();friend_Fragment = new FriendFragment();setting_Fragment = new Setting_Fragment();/*通过findViewById找到四个按钮和四个图标*/tab01 = findViewById(R.id.tap01);tab02 = findViewById(R.id.tap02);tab03 = findViewById(R.id.tap03);tab04 = findViewById(R.id.tap04);img01 = findViewById(R.id.imageView1);img02 = findViewById(R.id.imageView2);img03 = findViewById(R.id.imageView3);img04 = findViewById(R.id.imageView4);fm = getSupportFragmentManager();/*页面初始函数*/initialFragment();/*为四个按钮绑定点击监听*/tab01.setOnClickListener(this);tab02.setOnClickListener(this);tab03.setOnClickListener(this);tab04.setOnClickListener(this);}private void initialFragment() {FragmentTransaction transaction = fm.beginTransaction();transaction.add(R.id.id_content,weixin_Fragment);transaction.add(R.id.id_content,friend_Fragment);transaction.add(R.id.id_content,context_Fragment);transaction.add(R.id.id_content,setting_Fragment);Hide(transaction);transaction.show(weixin_Fragment);transaction.commit();}/*实现点击监听接口，一旦点击按钮，便会触发，通过分支结构来判断显示对应的内容*/@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.tap01: show(1);break;case R.id.tap02: show(2);break;case R.id.tap03: show(3);break;case R.id.tap04: show(4);break;default:break;}}/*显示内容*/private void show(int i) {FragmentTransaction transaction=fm.beginTransaction();Hide(transaction);switch (i){case 1:transaction.show(weixin_Fragment);/*先将图标置为未点击状态*/ResetImage();/*设置图标图片*/img01.setImageResource(R.drawable.message02);break;case 2:transaction.show(friend_Fragment);ResetImage();img02.setImageResource(R.drawable.friends02);break;case 3:transaction.show(context_Fragment);ResetImage();img03.setImageResource(R.drawable.founding02);break;case 4:transaction.show(setting_Fragment);ResetImage();img04.setImageResource(R.drawable.mine02);break;default:break;}transaction.commit();}/*隐藏Fragment*/private void Hide(FragmentTransaction transaction) {transaction.hide(weixin_Fragment);transaction.hide(friend_Fragment);transaction.hide(context_Fragment);transaction.hide(setting_Fragment);}/*将图标设置为未点击*/private void ResetImage(){img01.setImageResource(R.drawable.message);img02.setImageResource(R.drawable.friends);img03.setImageResource(R.drawable.founding);img04.setImageResource(R.drawable.mine);}
}

 效果如下：

 3.总结

  虽然这个项目看上去很简单，但是对于初学者，在实现的过程中还是有不少问题。因为对开发流程的不熟练，对属性的不了解，以及粗心大意，都会造成一些小问题，而这些小问题积累起来就变成了最大的绊脚石，比如由于将android:layout_weight写成了tools:layout_weight，造成按钮分布不均的情况，排查这些小问题大大阻碍了开发进度，所以写代码在于精而不在于快，这一点我深有体会。

代码仓库：杨少杰/MyAPP