实验一：类微信界面设计

1.页面布局分析与项目结构展示

2.完成页面布局

2.1顶部页面效果

2.2底部页面效果

2.3内容页面效果

2.4综合三个页面

3.页面切换效果

3.1切换页面

3.2绑定事件

3.3定义事件

4.源代码仓库地址，实验结果，实验心得

1.页面布局分析与项目结构展示

页面布局分析：

整体思路：将整个页面划分为三个部分，顶部head,底部bottom,中间content。根据课堂所学和日常生活中使用微信的经验可知：顶部，中间都随着底部相应按钮的点击而切换到相应的页面。因此顶部，中间，底部它们之间有一层逻辑。所以中间的content部分就要有页面切换的效果，而且里面得有四个xml文件分别对应着四个页面（微信Chat，联系人People，发现Find，我的personal）,使用FragmentTransaction实现。底部按钮需要实现点击一个按钮就切换一个页面而且会点亮按钮的效果，所以需要四个监听按钮，然后对监听的四个按钮绑定触发事件。

项目结构展示：

2.完成页面布局

2.1顶部页面效果

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:background="@color/black"android:paddingBottom="10dp"android:paddingTop="10dp"android:text="@string/vx"android:textAlignment="center"android:textColor="@color/white"android:textSize="30sp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

2.2底部页面效果

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<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/layout_all"android:layout_width="match_parent"android:layout_height="wrap_content"tools:ignore="MissingConstraints"><LinearLayoutandroid:id="@+id/layout1"android:layout_width="wrap_content"android:layout_height="90dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView1"android:layout_width="match_parent"android:layout_height="70dp"app:srcCompat="@drawable/weixin"tools:ignore="ImageContrastCheck" /><TextViewandroid:id="@+id/textView1"android:layout_width="match_parent"android:layout_height="match_parent"android:text="@string/vx"android:textAlignment="center" /></LinearLayout><LinearLayoutandroid:id="@+id/layout2"android:layout_width="wrap_content"android:layout_height="90dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView2"android:layout_width="match_parent"android:layout_height="70dp"app:srcCompat="@drawable/contact" /><TextViewandroid:id="@+id/textView2"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="@string/contact"android:textAlignment="center" /></LinearLayout><LinearLayoutandroid:id="@+id/layout3"android:layout_width="wrap_content"android:layout_height="90dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView3"android:layout_width="match_parent"android:layout_height="70dp"app:srcCompat="@drawable/find" /><TextViewandroid:id="@+id/textView3"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="@string/find"android:textAlignment="center" /></LinearLayout><LinearLayoutandroid:id="@+id/layout4"android:layout_width="wrap_content"android:layout_height="90dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView4"android:layout_width="match_parent"android:layout_height="70dp"app:srcCompat="@drawable/myself" /><TextViewandroid:id="@+id/textView4"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="@string/myself"android:textAlignment="center" /></LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

2.3内容页面效果

页面视图层的实现：

微信界面（Chat）：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/textView_chat"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="你好！这是微信页面！"android:textSize="30sp" />
</androidx.constraintlayout.widget.ConstraintLayout>

联系人界面（people）：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/textView_chat"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="你好！这是联系人页面！"android:textSize="30sp" />
</androidx.constraintlayout.widget.ConstraintLayout>

发现界面（find）:

<?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"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/textView_chat"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="你好！这是发现页面！"android:textSize="30sp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

我的界面（personal）:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/textView_chat"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="你好！这是我的页面！"android:textSize="30sp" />
</androidx.constraintlayout.widget.ConstraintLayout>

2.4综合三个页面

<?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"android:layout_width="match_parent"android:layout_height="match_parent"><includeandroid:id="@+id/include"layout="@layout/t1"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintBottom_toBottomOf="parent" /><FrameLayoutandroid:id="@+id/frameLayout"android:layout_width="0dp"android:layout_height="0dp"app:layout_constraintBottom_toTopOf="@+id/include"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/include2"></FrameLayout><includeandroid:id="@+id/include2"layout="@layout/layout_head"android:layout_width="0dp"android:layout_height="wrap_content"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

页面的视图层完成。

3.页面切换效果

页面逻辑层的实现：对于页面切换，就是监听图片按钮，触发事件。

3.1切换页面

切换页面使用FragmentTransaction；在initFragment中使用add()方法将四个切换页面添加到FrameLayout中，然后通过show()展示对应的页面，hide()隐藏相应的页面。所以，切换效果可以通过在show（）之前调用hide（）隐藏所有被add（）的页面实现。

3.2绑定事件

主要是setOnClickListener（）方法进行监听事件。

3.3定义事件

在组件绑定好事件后，定义触发后会执行的事件。主要思路为：点击按钮后，会从view传入相应的组件，获取组件的id，由此知道是哪个按钮，然后将所有的按钮灰。再判断传入的id，切换到这个按钮对应的页面，并将这个页面按钮变亮。

package com.example.work;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.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;public class MainActivity extends AppCompatActivity implements View.OnClickListener{private Fragment fragment1,fragment2,fragment3,fragment4;private ImageView imageView1,imageView2,imageView3,imageView4;private FragmentManager manager;private FragmentTransaction transaction;private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);linearLayout1=findViewById(R.id.layout1);linearLayout2=findViewById(R.id.layout2);linearLayout3=findViewById(R.id.layout3);linearLayout4=findViewById(R.id.layout4);fragment1=new ChatFragment();fragment2=new PeopleFragment();fragment3=new FindFragment();fragment4=new PersonalFragment();manager=getSupportFragmentManager();initImageView();initial();hidden();linearLayout1.setOnClickListener(this);linearLayout2.setOnClickListener(this);linearLayout3.setOnClickListener(this);linearLayout4.setOnClickListener(this);}private void initial() {transaction=manager.beginTransaction().add(R.id.frameLayout,fragment1).add(R.id.frameLayout,fragment2).add(R.id.frameLayout,fragment3).add(R.id.frameLayout,fragment4);transaction.commit();}@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.layout1:select(1);break;case R.id.layout2:select(2);break;case R.id.layout3:select(3);break;case R.id.layout4:select(4);break;};}private void select( int i) {TextView textView = findViewById(R.id.textView);hidden();resetImg();switch (i){case 1:showfragment(fragment1);imageView1.setImageResource(R.drawable.weixinthis);textView.setText(R.string.vx);break;case 2:showfragment(fragment2);imageView2.setImageResource(R.drawable.contactthis);textView.setText(R.string.contact);break;case 3:showfragment(fragment3);imageView3.setImageResource(R.drawable.findthis);textView.setText(R.string.find);break;case 4:showfragment(fragment4);imageView4.setImageResource(R.drawable.myselfthis);textView.setText(R.string.myself);break;}}private void showfragment(Fragment fragment) {transaction.show(fragment);}private void hidden() {transaction=manager.beginTransaction().hide(fragment1).hide(fragment2).hide(fragment3).hide(fragment4);transaction.commit();}private void initImageView() {imageView1 = findViewById(R.id.imageView1);imageView2 = findViewById(R.id.imageView2);imageView3 = findViewById(R.id.imageView3);imageView4 = findViewById(R.id.imageView4);linearLayout1 = findViewById(R.id.layout1);linearLayout2 = findViewById(R.id.layout2);linearLayout3 = findViewById(R.id.layout3);linearLayout4 = findViewById(R.id.layout4);}private void resetImg() {    //调用灰色的图片，以让点击过后的图片回复原色imageView1.setImageResource(R.drawable.weixin);imageView2.setImageResource(R.drawable.contact);imageView3.setImageResource(R.drawable.find);imageView4.setImageResource(R.drawable.myself);}}

4.源代码仓库地址，实验结果，实验心得

实验结果：

视频：

work

图片：

实验心得：

本次的实验报告我遇到了很多问题但也学到了很多，感谢肖老师和杨老师还有同学们的帮助。在做实验中遇到了很多新手问题，比如变量名写重复会导致虚拟机运行不出来页面；ID漏写会导致页面显示不出来。通过做实验明白了写代码要精益求精，一丝不苟的道理。

源代码仓库地址：https://github.com/07Echo/work