通过AS制作类似于微信界面

功能要求

开发一个类似微信的主界面框架，UI布局为上中下三层布局，包含聊天、联系人、发现、设置四个界面，当点击底部部件的时候可以进行页面切换，并且在某一页面中使用recycleview控件

开发技术

activity，xml，fragment，button，fragment，recycleview

思路分析

分为上中下三个部分分开设计，顶部仅包含微信界面，中间部分显示对应按钮的文本，底部为四个按钮，点击底部四个按钮中间会显示对应部分的内容，再将recycleview控件添加至联系人界面中

设计过程

1. 制作顶部
   在res中找到layout并创建一个top.xml,在Text中拉入TextView组件，并在代码行将名字改为“微信”，文字居中，字体黑底白色，字体大小为40sp

<TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/black"
        android:text="微信"
        android:textColor="@color/white"
        android:textSize="40sp"
        android:gravity="center"/>

2. 制作底部
   和制作顶部部件一样先创建button.xml，再拖入Layouts中的LinearLayout（vertical）组件，再LinearLayout（vertical）下方拖入Widgets中的ImageView和Text中的textView，因为背景为黑色，所以在第一个LinearLayout中background设置为black

<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:background="@color/black">

由于共四个底部按钮，且都相同，先做一个其他复制粘贴即可，将该LinearLayout（vertical）在代码行中命名为LinearLayout1，将ImageView和textView分别命名为ImageView11，textView11方便调用，由于字体仍需居中且字体为白色因此和顶部部分字体一样即可

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

        <ImageView
            android:id="@+id/imageView11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/btn_star_big_on"
            tools:srcCompat="@android:drawable/btn_star_big_on" />

        <TextView
            android:id="@+id/textView11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="@color/white"/>
    </LinearLayout>

另外三个与上方一样效果如下

3. 制作中间部分
   先创建一个layout.xml,再将Containers中的include组件拖入LinearLayout中，并与top.xml链接
   `
   同理再链接button.xml。随后再他们俩中间添加Layouts中的FragmeLayout组件，并将该名称改为content，调整FrameLayout大小直至如微信界面图

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

中间内容也需要对应的显示故先创建一个其他复制粘贴即可，先在Java的com.example.myapplication中创建一个fragment（blank）,然后layout中会出现对应的xml文件，把该xml文件删除，在新建一个tab1.xml文件，里面放入一个textView并命名为textView1

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="1"
        android:textSize="35sp"/>

再将BlankFragment中的代码改为return inflater.inflate(R.layout.tab1, container, false);
另外三个也同样操作，总体效果如下

4. 列表布局
   直接在控件中导入recyclerview
   

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/RecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

5.功能实现MainActivity

• 变量声明以及导入
  package com.example.myapplication2;

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.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
Fragment fragment1,fragment2,fragment3,fragment4;
FragmentManager fm;
LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;`

• onCreate

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout);

        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();
        fragment4 = new Fragment4();

        linearLayout1 = findViewById(R.id.LinearLayout1);
        linearLayout2 = findViewById(R.id.LinearLayout2);
        linearLayout3 = findViewById(R.id.LinearLayout3);
        linearLayout4 = findViewById(R.id.LinearLayout4);

        fm = getSupportFragmentManager();

        initial();

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
    }

• initial() 初始化界面

private void initial() {
        FragmentTransaction ft = fm.beginTransaction()
                .add(R.id.content,fragment1)
                .add(R.id.content,fragment2)
                .add(R.id.content,fragment3)
                .add(R.id.content,fragment4);
        fragment_hide();
        ft.commit();
        
        fragment_show(fragment1);
    }

• fragment_hide() 刷新界面

private void fragment_show(Fragment fragment) {
        FragmentTransaction ft = fm.beginTransaction()
                .show(fragment);
        ft.commit();
    }

• 触发点击

public void onClick(View view) {
        fragment_hide();
        int id = view.getId();
        if (id == R.id.LinearLayout1) {
            fragment_show(fragment1);
        } else if (id == R.id.LinearLayout2) {
            fragment_show(fragment2);
        } else if (id == R.id.LinearLayout3) {
            fragment_show(fragment3);
        } else if (id == R.id.LinearLayout4) {
            fragment_show(fragment4);
        }
    }

6.功能实现 列表效果

• Myadapter

public class myadapter extends RecyclerView.Adapter<myadapter.myholder> {
    Context context1;
    List list1;
    public myadapter(Context context, List list) {
        context1 = context;
        list1 = list;
    }

    @NonNull
    @Override
    public myadapter.myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false);

        myholder myholder = new myholder(view);
        return myholder;
    }

    @Override
    public void onBindViewHolder(@NonNull myadapter.myholder holder, int position) {
        holder.textView.setText(list1.get(position).toString());
    }

    @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);
        }
    }
}

• Fragment1

public class Fragment1 extends Fragment {
    List<String> name_list = new ArrayList<>();
    RecyclerView recycleView;
    myadapter adapter;

    View view;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_1,container,false);
        recycleView = view.findViewById(R.id.RecyclerView);
        initdata();
        adapter = new myadapter(this.getActivity(),name_list);

        LinearLayoutManager manager = new LinearLayoutManager(this.getActivity());
        manager.setOrientation(RecyclerView.VERTICAL);
        recycleView.setLayoutManager(manager);
        recycleView.addItemDecoration(new DividerItemDecoration(this.requireActivity(),DividerItemDecoration.VERTICAL));
        recycleView.setHasFixedSize(true);
        recycleView.setAdapter(adapter);

        return view;
    }

    private void initdata() {
        name_list.add("我是A");
        name_list.add("我是B");
        name_list.add("我是C");
        name_list.add("我是D");
        name_list.add("我是E");
        name_list.add("我是F");
        name_list.add("我是G");
        name_list.add("我是H");
        name_list.add("我是I");
        name_list.add("我是J");
    }
}

效果展示：

仓库地址：https://github.com/singkf/MyApplication