IT评测·应用市场-qidao123.com技术社区

标题: android studio——计划简单微信界面超详细教程 [打印本页]

---

作者: 愛在花開的季節    时间: 2024-6-14 23:07
标题: android studio——计划简单微信界面超详细教程
一、作业目标

本次作业开发的是微信APP的门户框架，UI布局为上中下布局。
功能一：用户可通过点击底部导航栏切换四个板块举行切换，它们分别是“聊天”、“接洽人”、“功能”、“我的”，每切换一个界面会有对应的文本提示。
功能二：在每一tab页面实现列表结果。
（功能二的实如今功能一的条件下改进，详情可直接移步第四点的第3点）
二、计划流程

1、外观计划

微信页面团体为上-中-下布局
上部：表现栏配景为玄色，内有白色“微信”字样
中部：纯文本“这是××界面”和几行列表
下部：四个.png文件的图标以及对应板块的名字
2、内部接洽

I.用一个main.xml文件将三个部分接洽起来，使得三个部分可以在同一个页面举行展示
II.写一个Mainactivity.java文件来实现点击切换的功能：
（1）创建四个Fragment类及其对应的四个tab.xml文件,通过Fragmentxx类绑定板块对应的布局文件,将其接洽起来;再用一个myadapter类将所有的单个文本Item.xml接洽起来。
（2）在MainActivity类中创建Fragmentxx对象，通过Transaction将Fragmentxx对象添加到主布局中间的空板块，创建FragmentManager管理Fragment。
（3）初始化方法
（4）写监听方法
（5）设置控件被点击后的响应变乱
（6）展示页面的方法
四、技术说明及关键代码（含详细步骤）

在这之前先相识一下各方面功能：
android:id="@+id/top"，为组件设置资源id，top为命名，在java文件中通过findViewById(id)被找到。
android:layout_width=“wrap_content”，布局的宽度
android:layout_height=“wrap_content”，布局的高度
android:layout_weight=“1”，用来等比例地划分区域。
android:gravity=“center”,对齐方式。
android:text=“微信”,表现的文本。
android:textColor="@color/white"，设置文字的颜色。
android:textSize=“28dp” />，设置文字的巨细。
1.实现外观计划

  I.上部

        找到res下的layout文件夹，并在该文件夹下右键—>new—>XML—>Layout XML File创建一个weixin.xml文件；点击下图右上角的Design，将TextView拖一个到LinearLayout下面，再点击code检察代码，举行修改  

点击code表现的代码即为weixin.xml的代码:

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent">
6.     <TextView
7.         android:id="@+id/textView3"
8.         android:layout_width="match_parent"
9.         android:layout_height="67dp"
10.         android:layout_weight="24"
11.         android:background="@color/black"
12.         android:gravity="center"
13.         android:shadowColor="@color/white"
14.         android:text="微信"
15.         android:textColor="@color/white"
16.         android:textSize="28dp" />
17. </LinearLayout>

复制代码

  II.中部

        在layout下继承右键创建一个tab1.xml文件，点击code检察代码，修改文本为“这是聊天界面”，并调整巨细。
        这时候，由于共有四个界面，所以你可以选择：
       （1） 将tab1.xml直接复制，粘贴到layout下，改名为tab2.xml，tab3.xml，tab4.xml（记得把文本和code里面 android:id="@+id/textView8" 这一句TextView后的数字改成不同值）；
        （2）重复三次创建tab1.xml的利用。
这里只展示tab1.xml的代码：

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent"
5.     android:alpha="12"
6.     android:gravity="center"
7.     android:orientation="horizontal">
9.     <TextView
10.         android:id="@+id/textView5"
11.         android:layout_width="wrap_content"
12.         android:layout_height="63dp"
13.         android:layout_weight="1"
14.         android:alpha="12"
15.         android:textSize="30sp"
16.         android:gravity="center"
17.         android:text="这是聊天界面" />
18. </LinearLayout>

复制代码

  III.下部

        起首去网上下载四个适合用来当底部导航的.png类型的图标
        然后，在layout下创建一个名为bottom.xml的文件
        点击Design—>layout—>目Linearlayout（纵向），拖一个放到横向的LinearLayout下面；
        点击common—>Imageview,拖一个放到纵向的LinearLayout下，再把TextView也放一个到纵向的LinearLayout下面，修改参数如下图一、二（上右）、三，完成一个图标的创建。
        把纵向的LinearLayout复制，在横向的LinearLayout下粘贴三次，并改名四个纵向的LinearLayout、ImageView、TextView分别编号为1,2,3,4，如图四（下右）。

bottom.xml的代码：

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="wrap_content"
4.     android:layout_height="wrap_content"
5.     android:orientation="horizontal">
8.     <LinearLayout
9.         android:id="@+id/LinearLayout1"
10.         android:layout_width="wrap_content"
11.         android:layout_height="wrap_content"
12.         android:layout_weight="1"
13.         android:orientation="vertical">
15.         <ImageView
16.             android:id="@+id/imageView1"
17.             android:layout_width="match_parent"
18.             android:layout_height="67dp"
19.             android:src="@drawable/star1" />
21.         <TextView
22.             android:id="@+id/textView1"
23.             android:layout_width="104dp"
24.             android:layout_height="wrap_content"
25.             android:layout_weight="1"
26.             android:gravity="center"
27.             android:text="聊天"
28.             android:textSize="30sp" />
29.     </LinearLayout>
31.     <LinearLayout
32.         android:id="@+id/LinearLayout2"
33.         android:layout_width="wrap_content"
34.         android:layout_height="wrap_content"
35.         android:layout_weight="1"
36.         android:orientation="vertical">
39.         <ImageView
40.             android:id="@+id/imageView2"
41.             android:layout_width="match_parent"
42.             android:layout_height="69dp"
43.             android:src="@drawable/light" />
45.         <TextView
46.             android:id="@+id/textView2"
47.             android:layout_width="104dp"
48.             android:layout_height="wrap_content"
49.             android:layout_weight="1"
50.             android:gravity="center"
51.             android:text="联系人"
52.             android:textSize="30sp" />
53.     </LinearLayout>
55.     <LinearLayout
56.         android:id="@+id/LinearLayout3"
57.         android:layout_width="wrap_content"
58.         android:layout_height="wrap_content"
59.         android:layout_weight="1"
60.         android:orientation="vertical">
62.         <ImageView
63.             android:id="@+id/imageView3"
64.             android:layout_width="match_parent"
65.             android:layout_height="67dp"
66.             android:src="@drawable/moon3" />
68.         <TextView
69.             android:id="@+id/textView3"
70.             android:layout_width="104dp"
71.             android:layout_height="wrap_content"
72.             android:layout_weight="1"
73.             android:gravity="center"
74.             android:text="功能"
75.             android:textSize="30sp" />
76.     </LinearLayout>
78.     <LinearLayout
79.         android:id="@+id/LinearLayout4"
80.         android:layout_width="wrap_content"
81.         android:layout_height="wrap_content"
82.         android:orientation="vertical">
84.         <ImageView
85.             android:id="@+id/imageView"
86.             android:layout_width="match_parent"
87.             android:layout_height="67dp"
88.             android:layout_weight="1"
89.             android:src="@drawable/sun" />
91.         <TextView
92.             android:id="@+id/textView4"
93.             android:layout_width="104dp"
94.             android:layout_height="wrap_content"
95.             android:layout_weight="1"
96.             android:gravity="center"
97.             android:text="我的 "
98.             android:textSize="30sp" />
99.     </LinearLayout>
101. </LinearLayout>

复制代码

        留意：选择的ImageView图标不能直接使用，所以要把之前下载的四个.png图标直接复制粘贴到res—>drawable文件下，code中的android:src="@drawable/moon3" />这一句是自己的.png路径，四个都要修改。
2.实现接洽和切换功能

  I.整合页面

                先在layout下创建一个main.xml文件，点击code修改代码，把上-中-下三个部分包罗在内，再点击design,调整三块的占比，使得顶部、图标和文本都能表现出来。

留意：如果不把巨细调整符合，最后运行可能会导致表现不完整的。
main.xml代码：
可以看到layout="@layout/weixin",layout="@layout/content",layout="@layout/bottom"说明包罗了这三个部分

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent"
5.     android:orientation="vertical">
7.     <include
8.         layout="@layout/weixin"
9.         android:layout_width="match_parent"
10.         android:layout_height="211dp" />
13.     <FrameLayout
14.         android:id="@+id/content"
15.         android:layout_width="match_parent"
16.         android:layout_height="335dp"
17.         android:layout_weight="1"></FrameLayout>
19.     <include
20.         layout="@layout/bottom"
21.         android:layout_width="match_parent"
22.         android:layout_height="146dp" />
25. </LinearLayout>

复制代码

  II.切换功能

        要实现切换功能，就必要
        （1）在java—>ui下创建四个Fragment类（.java），将其分别与之前创建的tab1，2，3，4四个.xml文件接洽起来（可创建一个后复制粘贴，修改名称和tab）。
        （2）在MainActivity类（.java）中创建四个Fragment对象，四个LinearLayout对象，创建FragmentManager管理Fragment。
        （3）在MainActivity.Java中写对应的方法举行实现：
                initial();用来初始化； 
                fragmenthide();是为了点每点击一个界面，将其他三个界面隐藏起来； 
                fragmentshow(fragment1)；默认展示第一个界面；
                onClick(View view)；是将用户的点击举行传达，通过监听获取组件id，根据获取得到的id，展示对应的板块。
四个Fragment类只有tab的序号必要更改，这里展示Fragment1:

1. package com.example.myapplication;
3. import android.os.Bundle;
4. import android.view.LayoutInflater;
5. import android.view.View;
6. import android.view.ViewGroup;
8. import androidx.fragment.app.Fragment;
10. public class Fragment1 extends Fragment
11. {
13.     @Override
14.     public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) {
16.      
17.         View view1 = new View(getContext());
18.       
19.         return inflater.inflate(R.layout.tab1, container, false);
20.     }
21. }

复制代码

MainActivity.java的代码：
  LinearLayout对象，对应的id是bottom.xml文件中的第二层LinearLayout的id
        linearLayout1=findViewById(R.id.LinearLayout1);
        linearLayout2=findViewById(R.id.LinearLayout2);
        linearLayout3=findViewById(R.id.LinearLayout3);
        linearLayout4=findViewById(R.id.LinearLayout4);
 隐藏其他项
            private void fragmenthide() {
                FragmentTransaction ft=fm.beginTransaction()
                        .hide(fragment1)
                        .hide(fragment2)
                        .hide(fragment3)
                        .hide(fragment4);
                ft.commit();
    }
 初始化，将所有fragment都添加到界面中部板块，对应的id是Activitymain.xml中的Fragment的id
            private void initial() {
                fm=getSupportFragmentManager();
用content是由于main.xml用的名字是content(android:id="@+id/content")
        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();
    }
 点击触发通过监听获取组件id，根据获取得到的id，展示对应的板块
            @Override
            public void onClick(View view){
                fragmenthide();
                int id=view.getId();
                if(id==R.id.LinearLayout1)
                    fragmentshow(fragment1);
                if(id==R.id.LinearLayout2)
                    fragmentshow(fragment2);
                if(id==R.id.LinearLayout3)
                    fragmentshow(fragment3);
                if(id==R.id.LinearLayout4)
                    fragmentshow(fragment4);
    }
完整代码：

1. package com.example.myapplication;
3. import android.os.Bundle;
4. import android.view.View;
5. import android.widget.LinearLayout;
7. import com.google.android.material.bottomnavigation.BottomNavigationView;
9. import androidx.appcompat.app.AppCompatActivity;
10. import androidx.fragment.app.Fragment;
11. import androidx.fragment.app.FragmentManager;
12. import androidx.fragment.app.FragmentTransaction;
13. import androidx.navigation.NavController;
14. import androidx.navigation.Navigation;
15. import androidx.navigation.ui.AppBarConfiguration;
16. import androidx.navigation.ui.NavigationUI;
18. import com.example.myapplication.databinding.ActivityMainBinding;
21. public class MainActivity extends AppCompatActivity implements View.OnClickListener {
22.     Fragment fragment1,fragment2,fragment3,fragment4;
23.     FragmentManager fm;
24.     LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
26.     @Override
27.     protected void onCreate(Bundle savedInstanceState) {
28.         super.onCreate(savedInstanceState);
29.         setContentView(R.layout.main);
31.         fragment1=new Fragment1();
32.         fragment2=new Fragment2();
33.         fragment3=new Fragment3();
34.         fragment4=new Fragment4();
36.         // LinearLayout对象，对应的id是bottom.xml文件中的第二层LinearLayout的id
37.         linearLayout1=findViewById(R.id.LinearLayout1);
38.         linearLayout2=findViewById(R.id.LinearLayout2);
39.         linearLayout3=findViewById(R.id.LinearLayout3);
40.         linearLayout4=findViewById(R.id.LinearLayout4);
43.         fm=getSupportFragmentManager();
44.         initial();
45.         fragmenthide();
46.         fragmentshow(fragment1);
48.         linearLayout1.setOnClickListener(this);
49.         linearLayout2.setOnClickListener(this);
50.         linearLayout3.setOnClickListener(this);
51.         linearLayout4.setOnClickListener(this);
52.     }
54.     //隐藏其他项
55.     private void fragmenthide() {
56.         FragmentTransaction ft=fm.beginTransaction()
57.                 .hide(fragment1)
58.                 .hide(fragment2)
59.                 .hide(fragment3)
60.                 .hide(fragment4);
61.         ft.commit();
62.     }
64.     //初始化，将所有fragment都添加到界面中部板块
65.     //对应的id是Activitymain.xml中的Fragment的id
66.     private void initial() {
67.         fm=getSupportFragmentManager();
68. //用content是因为main.xml用的名字是content(android:id="@+id/content")
69.         FragmentTransaction ft=fm.beginTransaction()
70.                 .add(R.id.content,fragment1)
71.                 .add(R.id.content,fragment2)
72.                 .add(R.id.content,fragment3)
73.                 .add(R.id.content,fragment4);
74.         ft.commit();
75.     }
76.     //点击触发通过监听获取组件id，根据获取得到的id，展示对应的板块
77.     @Override
78.     public void onClick(View view){
79.         fragmenthide();
80.         int id=view.getId();
81.         if(id==R.id.LinearLayout1)
82.             fragmentshow(fragment1);
83.         if(id==R.id.LinearLayout2)
84.             fragmentshow(fragment2);
85.         if(id==R.id.LinearLayout3)
86.             fragmentshow(fragment3);
87.         if(id==R.id.LinearLayout4)
88.             fragmentshow(fragment4);
89.     }
90.     //展示
91.     private void fragmentshow(Fragment fragment){
92.         FragmentTransaction transaction=fm.beginTransaction()
93.                 .show(fragment);
94.         transaction.commit();
95.     }
96. }

复制代码

        留意：onClick()方法下必要用if（）语句，switch()不行。
    3.增加列表结果

  由于多了列表，起首想到要更改的就是tab1.xml,以及类Fragment1。故：
       （1）、再创建一个新的item.xml文件存放单个文本；

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="wrap_content"
4.     android:layout_height="wrap_content"
5.     android:gravity="center">
7.     <TextView
8.         android:id="@+id/item"
9.         android:layout_width="400dp"
10.         android:layout_height="match_parent"
11.         android:layout_gravity="center"
12.         android:layout_weight="1"
13.         android:gravity="center"
14.         android:text="TextView"
15.         android:textColor="@android:color/holo_orange_dark"
16.         android:textSize="30sp" />
17. </LinearLayout>

复制代码

       （2）、 类Fragnent1展示tab1的内容，用到recyclerView对象，修改文本内容，同时使用myadapter类和队列，让它们呈现时分列起来。

1. package com.example.myapplication;
2. import android.content.Context;
3.         import android.os.Bundle;
5.         import androidx.fragment.app.Fragment;
7.         import android.view.LayoutInflater;
8.         import android.view.View;
9.         import android.view.ViewGroup;
10.         import androidx.appcompat.app.AppCompatActivity;
11.         import androidx.recyclerview.widget.LinearLayoutManager;
12.         import androidx.recyclerview.widget.RecyclerView;
14.         import java.util.ArrayList;
15.         import java.util.List;
17. public class  Fragment1 extends Fragment {
19.     RecyclerView recyclerView;
21.     List list;
22.     Myadapter myadapter;
23.     Context context;
25.     @Override
26.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
27.                              Bundle savedInstanceState) {
28.         View view = inflater.inflate(R.layout.tab1, container, false);
29.         context = view.getContext();
31.         recyclerView = view.findViewById(R.id.recyclerView);
32.         list = new ArrayList();
33.         for (int i = 0; i < 8; i++) {
34.             list.add("这是第" + i + "行");
36.             myadapter = new Myadapter(context, list);
37.             recyclerView.setAdapter(myadapter);
39.             LinearLayoutManager manager = new LinearLayoutManager(context);
40.             manager.setOrientation(RecyclerView.VERTICAL);
41.             recyclerView.setLayoutManager(manager);
42.         }
43.         return view;
44.     }
45. }

复制代码

       （3）、对tab1举行修改，由于tab1.xml的android:id="@+id/recyclerView"，被Fragment类调用后举行了修改和整合，故展示的是团体文本结果；

1. <?xml version="1.0" encoding="utf-8"?>
2. <androidx.constraintlayout.widget.ConstraintLayout
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     xmlns:app="http://schemas.android.com/apk/res-auto"
5.     xmlns:tools="http://schemas.android.com/tools"
6.     android:id="@+id/linearLayout"
7.     android:layout_width="match_parent"
8.     android:layout_height="match_parent">
10.     <androidx.recyclerview.widget.RecyclerView
11.         android:id="@+id/recyclerView"
12.         android:layout_width="match_parent"
13.         android:layout_height="match_parent"
14.         app:layout_constraintBottom_toBottomOf="parent"
15.         app:layout_constraintEnd_toEndOf="parent"
16.         app:layout_constraintHorizontal_bias="0.498"
17.         app:layout_constraintStart_toStartOf="parent"
18.         app:layout_constraintTop_toTopOf="parent" />
19. </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

       （4）、 Myadapter类是适配器，作用就是看到的tab1.xml的界面与数据之间的桥梁，当列表里的每一项表现到页面时，都会调用myadapter的方法返回一个View，而这里是获取view的个数，将团体展示。

1. package com.example.myapplication;
3. import android.content.Context;
4. import android.view.LayoutInflater;
5. import android.view.View;
6. import android.view.ViewGroup;
7. import android.widget.TextView;
9. import androidx.annotation.NonNull;
10. import androidx.recyclerview.widget.RecyclerView;
12. import java.util.List;
14. public class Myadapter extends RecyclerView.Adapter<Myadapter.Myholder>{
15.     Context context1;
16.     List<String> list1;
17.     public Myadapter(Context context, List<String> list){
18.         context1 = context;
19.         list1 = list;
20.     }
23.     @NonNull
24.     @Override
25.     public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
26.         View view = LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
27.         Myholder holder=new Myholder(view);
28.         return holder;
29.     }
31.     @Override
32.     public void onBindViewHolder(@NonNull Myholder holder, int position) {
33.         holder.textView.setText(list1.get(position));
34.     }
36.     @Override
37.     public int getItemCount() {
38.         return list1.size();
39.     }
40.     public class Myholder extends RecyclerView.ViewHolder {
41.         TextView textView;
42.         public Myholder(@NonNull View itemView) {
43.             super(itemView);
44.             textView = itemView.findViewById(R.id.item);
45.         }
46.     }
47. }

复制代码

        
四、结果展示

五、其他报错缘故起因

1.当你写了多个mainactivity时，APP—>mainifests—>Androidmainifests的code会有两个activity，这时候你必要把另一个的android:exported改为"false"。

留意：增加列表结果后，也必要修改这个文件下半部分，只留下一个activity,上半部分不变：

2.         <activity
3.         android:name=".MainActivity"
4.         android:exported="true">
5.         <intent-filter>
6.         <action android:name="android.intent.action.MAIN" />
8.         <category android:name="android.intent.category.LAUNCHER" />
9. </intent-filter>
10. </activity>
11.         </application>
13. </manifest>

复制代码

2、作为新手，第一次编写并运行该项目，好像必要修改文件，我运行的时候朋侪帮我改了一个，我自己改了一个。在自己的这个项目标文件夹—>APP—>build.gradle.kts可以找到这个文件，可以看看是不是是不是少了这一句。

另有这个文件的最下面那两句应该是加上去的

3.system-image文件要直接能被file->settings->Android SDK直接找到，也就是说谁人路径要在system-image文件的上一层
六、线上仓库地址（gitee）

luo17_world: 学习移动开发技术课程时创建 (gitee.com)
下载与安装：git下载与安装教程_git-scm.com download-CSDN博客下载与安装：
hint: Updates were rejected because the remote contains work that you do hint: not have locally.-CSDN博客



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4