移动开发技术实验一：类微信界面

AS类微信界面开发

实验内容

1、简介

利用Android Studio类似微信的主页面框架，UI布局为上中下结构，包含4个tab页面，点击按钮实现跳转，同时在tab中实现列表功能。开发技术为：activity，layout xml，fragment ，recycleview。

2、核心代码及功能介绍

（一）基本框架构造

1.top构建

<?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="wrap_content">

    <TextView
        android:id="@+id/top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="微信"
        android:textSize="30sp" />
</LinearLayout>

2.button构建

<?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="wrap_content"
    android:orientation="horizontal"
    android:baselineAligned="false">

<LinearLayout
    android:id="@+id/layout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:orientation="vertical">

    <ImageButton
        android:id="@+id/imageButton8"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/fin"
        android:importantForAccessibility="no"
        tools:ignore="NestedWeights" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="发现"
        android:textSize="20sp"
        tools:ignore="HardcodedText" />

</LinearLayout>

<LinearLayout
    android:id="@+id/layout2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:orientation="vertical">

    <ImageButton
        android:id="@+id/imageButton9"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/x"
        android:importantForAccessibility="no"
        tools:ignore="NestedWeights" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="信息"
        android:textSize="20sp"
        tools:ignore="HardcodedText" />
</LinearLayout>

<LinearLayout
        android:id="@+id/layout3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

    <ImageButton
        android:id="@+id/imageButton10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:contentDescription="TODO"
        app:srcCompat="@drawable/o"
        tools:ignore="ContentDescription,HardcodedText,InefficientWeight,NestedWeights,DuplicateSpeakableTextCheck" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="联系人"
        android:textSize="20sp"
        tools:ignore="HardcodedText" />

</LinearLayout>
    
<LinearLayout
    android:id="@+id/layout4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:orientation="vertical">

    <ImageButton
        android:id="@+id/imageButton11"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/m"
        tools:ignore="ContentDescription,HardcodedText,NestedWeights,SpeakableTextPresentCheck"
        android:contentDescription="TODO" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="我"
        android:textSize="20sp"
        tools:ignore="HardcodedText" />
</LinearLayout>
</LinearLayout>

3.main-activity构建

其作用是将top和button连接在一起

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity"
    >

    <include layout="@layout/top" />

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        >
    </FrameLayout>

    <include layout="@layout/button" />
</LinearLayout>

4.tab构建

我这里用的middle来表示tab，用文本信息来做提示，四给布局类似，此处举一例。

<?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/view1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是信息页面"
        android:textSize="30sp" />
</LinearLayout>

到这里基础框架就构造好了

（二）切换效果实现

1.fragment类

这里需要创建四个fragment类，举一例

package com.example.work1;

import androidx.fragment.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.view.View;

public class fragment1 extends Fragment{
    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){

        return inflater.inflate(R.layout.middle1,container,false);
    }
}

2.MainActivity

1. 监听部分 onclick

@Override
    public void onClick(View view) {
        if(view.getId()==R.id.layout1) show(1);
        if(view.getId()==R.id.layout2) show(2);
        if(view.getId()==R.id.layout3) show(3);
        if(view.getId()==R.id.layout4) show(4);

    }

修改主函数

public class MainActivity extends AppCompatActivity implements View.OnClickListener

同时需要触发代码

initialfragment();


        layout1.setOnClickListener(this);
        layout2.setOnClickListener(this);
        layout3.setOnClickListener(this);
        layout4.setOnClickListener(this);
    }

2. 初始化 initial 将四个 frgment 压入 content

public void initialfragment(){
        FragmentTransaction fg= manager.beginTransaction()
                .add(androidx.appcompat.R.id.content,fragment1)
                .add(androidx.appcompat.R.id.content,fragment2)
                .add(androidx.appcompat.R.id.content,fragment3)
                .add(androidx.appcompat.R.id.content,fragment4)
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4)
                .show(fragment1);
        fg.commit();
    }

3. 隐藏四个 tab 界面 fragmenthide

 private void Hide(FragmentTransaction fg) {
        fg.hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);
    }

4. 点击图标进行跳转，所以编写新的一个函数showfragment，展示fragment界面:

private void show(int i) {
        FragmentTransaction transaction = manager.beginTransaction();
        Hide(transaction);
        switch (i){
            case 1:transaction.show(fragment1);
                break;
            case 2:transaction.show(fragment2);
                break;
            case 3:transaction.show(fragment3);
                break;
            case 4:transaction.show(fragment4);
                break;
            default:break;
        }
        transaction.commit();
    }

(三)实现列表效果

这里我们要用到recyclerview,我在middle2中加入recyclerview

在layout创建一个item.xml

这样的话，fragment2中要添加recyclerView，list，context， myadapter（适配器）代码如下：

 package com.example.work1;

import androidx.fragment.app.Fragment;
import android.os.Bundle;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.annotation.SuppressLint;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;




public class fragment2 extends Fragment{
    private RecyclerView recyclerView;
    private List<String> list;
    private Context context;
    private Myadapter myadapter;

    @SuppressLint("MissingInflatedId")
    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){
        View view=inflater.inflate(R.layout.middle2,container,false);
        context=view.getContext();
        recyclerView=view.findViewById(R.id.recycleview1);
        list=new ArrayList();

        for(int i=0;i<9;i++) {
            list.add("这是第"+i+"行数据");
        }
        myadapter = new Myadapter(context,list);
        recyclerView.setAdapter(myadapter);
        LinearLayoutManager manager=new LinearLayoutManager(context);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);

        return view;

    }

}

再写一个Myadapter（适配器），它的作用是将适配器和布局管理器与 recyclerView 关联起来，以便在列表中显示数据，并确定列表的布局方向

代码如下

package com.example.work1;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.content.Context;
import android.view.LayoutInflater;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;


public class Myadapter  extends RecyclerView.Adapter<Myadapter.Myholder>{
    Context context1;
    List<String> list1;
    public Myadapter(Context context,List list){
        context1=context;
        list1=list;
    }
    @NonNull
    @Override
    public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
        Myholder holder=new Myholder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull Myholder holder, int position) {
        holder.textview.setText(list1.get(position));
    }

    @Override
    public int getItemCount() {
        return list1.size();
    }
    public class Myholder extends RecyclerView.ViewHolder {
        TextView textview;
        public Myholder(@NonNull View itemView) {
            super(itemView);
            textview=itemView.findViewById(R.id.item);
        }
    }
}

效果展示：

3.总结

本次实验，学会利用 AS 进行制作简易的微信界面，掌握 fragment，layout，xml 和相关控件的知识，实现页面的跳转功能，和 recycleview 实现列表功能，图标导入的时候有报错，发现是命名有问题改成字母后就可以了，利用fragment跳转也有报错，通过logcat中的报错，然后知道 fragment 的类要声明为 public。

---

4.源码

卢亚晗/work1