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

功能要求

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

开发技术

activity，xml，fragment，button，fragment，recycleview

思路分析

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

设计过程

1.制作顶部部分

在Android Studio的项目文件中找到res文件夹下的layout文件夹，创建一个top.xml

在Text中拉入TextView组件，并在代码行将名字改为“微信”，文字居中，字体黑底白色，字体大小为40sp

android:background="@color/black"
android:text="微信"
android:gravity="center"
android:textColor="@color/white"
android:textSize="40sp"
1
2
3
4
5

效果图如下

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="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/black">
1
2
3
4
5
6

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

<LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="102dp"
        android:layout_height="match_parent"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView11"
            android:layout_width="match_parent"
            android:layout_height="102dp"
            app:srcCompat="@android:drawable/alert_light_frame" />
        <TextView
            android:id="@+id/textView11"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="聊天"
            android:gravity="center"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

其他底部按钮如上，改名称即可，具体效果图如下

3.中间部分

和制作顶部一样先创建一个layout.xml，再将Containers中的include组件采用右键添加的方式选择top.xml


再用同样的方法添加button.xml，最后在两者中间添加Layouts中的FragmeLayout组件，并将该名称改为content，调整FrameLayout大小直至如微信界面图

<FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="575dp">
1
2
3
4

中间内容也需要对应的显示故先创建一个其他复制粘贴即可，先在Java的com.example.myapplication中创建一个fragment

然后layout中会出现对应的xml文件，把该xml文件删除，在新建一个tab1.xml文件，里面放入一个textView并命名为textView6

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_gravity="center"
        android:text="这是聊天界面"
        android:textSize="40sp"
        />
1
2
3
4
5
6
7
8
9
10

效果图如下

再将BlankFragment中的代码改为return inflater.inflate(R.layout.tab1, container, false);

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.tab1, container, false);
    }
}
1
2
3
4
5
6

其他三个一样操作，总体效果图如下

4.添加recycleview控件至联系人界面

创建一个xml文件用于存放Containers中的recycleview控件，并将该控件id命名为recycleview，这里xml名为activity_recycle_view_main.xml

创建一个xml文件用于存放与recycleview会对接用到的textview控件,这里名为item.xml

文字居中，width调成match_parent即可，否则会占满一整个屏幕

  <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:color="@color/black"
        android:gravity="center"
        android:text="TextView"
        android:textSize="35sp" />
1
2
3
4
5
6
7
8
9

5.java文件编写

我们目前只有简单的页面显示，由于需要点击部件更新中间的显示内容，所以要考虑以下内容：

（1）首先在Mainactivity.java中将4个fragment压入content里面的代码部分

首先要导入四个中间fragment卡片到主体界面里面，需要先定义四个fragment再new出该各个界面的对象并创建出一个管理对象fragfragment变量

Fragment fragment1,fragment2,fragment3,fragment4;
FragmentManager fm;

fragment1 = new BlankFragment();
fragment2 = new BlankFragment2();
fragment3 = new BlankFragment3();
fragment4 = new BlankFragment4();
1
2
3
4
5
6
7

（2）初始化四个页面

新建一个inital函数用以给Fragment页面初始化，在此函数中，将此前定义个4个Fragment变量使用fragmentManager添加到main文件中的中间主体部分的布局中

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();
    }
1
2
3
4
5
6
7
8
9

（3）展示对应页面内容

在点击四个部件时需要展示其所代表的界面，故编写新的一个函数fragment_show，展示fragment界面

 private void fragment_show(Fragment fragment) {
        FragmentTransaction transaction=fm.beginTransaction()
                .show(fragment);
        transaction.commit();
    }
1
2
3
4
5

（4）隐藏不需要的页面内容

在切换界面时，需要对原先的界面进行隐藏之后再展示所需界面，故编写一个新的函数fragment_hide，将所有的fragment界面都隐藏

 private void fragment_hide() {
        FragmentTransaction ft=fm.beginTransaction()
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);
        ft.commit();
    }
1
2
3
4
5
6
7
8

（5）监听底部控件

LinearLayout linearlayout1,linearlayout2,linearlayout3,linearlayout4;

linearlayout1=findViewById(R.id.LinearLayout1);
linearlayout2=findViewById(R.id.LinearLayout2);
linearlayout3=findViewById(R.id.LinearLayout3);
linearlayout4=findViewById(R.id.LinearLayout4);

linearlayout1.setOnClickListener(this);
linearlayout2.setOnClickListener(this);
linearlayout3.setOnClickListener(this);
linearlayout4.setOnClickListener(this);
1
2
3
4
5
6
7
8
9
10
11

this会报错，那么在public class中增加implements View.OnClickListener并增添public void onClick即可

public class MainActivity extends AppCompatActivity implements View.OnClickListener 
1

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

    }
1
2
3
4
5
6
7
8
9
10
11
12
13

在这里采用的是if语句，由于版本不同，有的版本也可采用switch语句

public void onClick(View view) {
        fragmentHide();
        switch (view.getId())
        {
            case R.id.LinearLayout1:fragment_show(fragment1);
            break;
            case R.id.LinearLayout2:fragment_show(fragment2);
            break;
            case R.id.LinearLayout3:fragment_show(fragment3);
            break;
            case R.id.LinearLayout4:fragment_show(fragment4);
            break;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

（6）最开始的页面展示

在最开始的界面自然就是聊天界面，故在最开始的时候就调用聊天的fragment

fragment_show(fragment1);
1

（7）创建Myadapter.Java文件并编写

创建Myadapter类，将数据绑定在recycleview对应的item上

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 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 Myadapter.Myholder holder, int position) {
        String name=list1.get(position).toString();
        holder.textView.setText(name);
    }

    @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.textView1);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

（8）编写联系人界面对应的fragment类

在外部增加recycleview，myadapter和list的声明然后将最底部return 返回view，之后再编写对应的内容即可，注意一定要连接的是activity_recycle_view_main.xml

public class BlankFragment2 extends Fragment {

    RecyclerView recyclerView;

    List list;

    Myadapter adapter;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view;
        view=inflater.inflate(R.layout.activity_recycle_view_main,container,false);
        recyclerView=view.findViewById(R.id.recyclerview);
        String[] names={"父亲", "母亲", "同学A", "同学B","同学C","同学D","同学E","同学F","同学G"};

        List<String> items=new ArrayList<String>();
        for(int i=0;i< names.length;i++)
        {
            items.add(names[i]);
        }
        Context context=this.getContext();

        adapter = new Myadapter(context,items);

        recyclerView.setAdapter(adapter);

        LinearLayoutManager manager=new LinearLayoutManager(context);
        manager.setOrientation(RecyclerView.VERTICAL);
        recyclerView.setLayoutManager(manager);
        return view;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

结果展示

总结

经过这样一个简单的类似微信的界面设计，我对于AS基本的代码编写部分和xml文件进行界面编写部分以及相关的控件等有了一定程度上的理解，有了一定的进行UI界面的设计的能力，学会了通过提词器等功能进行功能和界面相互连接的代码的编写，在添加recycleview控件时注意一定要编写对应的fragment类而不是mainactivity，否则会报错。

源代码：https://gitee.com/yf561423/android