Android开发微信界面

最终实现

设计一个类微信的主界面UI，有上中下三个结构，包含四个界面：聊天、联系人、位置、设置，并且实现点击下方进行界面跳转，并且在其中一个tab界面显示列表效果

两种主要的文件类型：

XML文件用于定义应用程序的布局和界面。前端

Java文件是应用程序的逻辑和功能的实现。后端

布局分为上中下，分别为top.xml,tab.xml,bottom.xml

top布局

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

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

</LinearLayout>

top里注意height是wrap_content

bottom布局

bottom.xml

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

        <ImageView
            android:id="@+id/imageView11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:adjustViewBounds="true"
            app:srcCompat="@drawable/chat" />

        <TextView
            android:id="@+id/textView11"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="聊天" />
    </LinearLayout>

中部tab又分为tab1,tab2,tab3,tab4

需要一个main.xml显示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="vertical"
    tools:context=".MainActivity">

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


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

    </FrameLayout>

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

</LinearLayout>

效果显示：

tab界面实现

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"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView11"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是聊天界面"
        android:textSize="30sp" />
</LinearLayout>

自定义的微信图标要放在drawable目录下并且在LinearLayout进行引用说明如@drawable/chat

实现跳转功能

frament2.java与tab2.xml进行连接

实现具体操作

 //初始化  
 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);
        ft.commit();
    }

//显示
    private void fragmentshow(Fragment fragment) {
        FragmentTransaction ft= fm.beginTransaction()
                .show(fragment);
        ft.commit();
    }
//隐藏
   private void fragmenthide() {
        FragmentTransaction ft = fm.beginTransaction()
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);
        ft.commit();
//监听屏幕
    public void onClick(View view){
        fragmenthide();
        int id= view.getId();
        if(id==R.id.LinearLayout1){
            fragmentshow(fragment1);}
        else if (id==R.id.LinearLayout2){
            fragmentshow(fragment2);}
        else if(id==R.id.LinearLayout3){
            fragmentshow(fragment3);}
        else if(id==R.id.LinearLayout4){
            fragmentshow(fragment4);}

    }

全局初始化

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

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

RecyclerView实现列表效果

需要使用recyclerview控件，需要将recycleractvivity.java写入Fragment2中，再写一个MyAdapter.java

在tab2中添加recyclerview控件，再创建item项目

MyAdapter.java

创建MyAdapter类连接item

Adapter通常继承自RecyclerView.Adapter类，并通过重写其中的方法来实现自定义逻辑

//创建ViewHolder对象，即每个Item对应的视图项
    public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {


        View view=LayoutInflater.from(context1).inflate(R.layout.item, parent, false);
        
        Myholder myholder=new Myholder(view);
        return myholder;
    }
//将数据绑定到ViewHolder中的视图项上
   public void onBindViewHolder(@NonNull Myholder holder, int position) {
        holder.textView.setText((CharSequence) list1.get(position));

    }
//返回数据集合的大小，即Item的数量
   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.textView1);

        }

Fragment2.java 

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    view=inflater.inflate(R.layout.tab2,container,false);
    list=new ArrayList();
    for(int i=0;i<9;i++){
        list.add("这是第"+i+"行数据");
    }

运行实现

总结

弄清楚wrap_content和match_parent并合理正确使用，在此次作业中出现两次因为覆盖而无法显示的问题，不易发现。多学习，多交流。

源码：Shanshan33gitee/Android-MyWechat