目录
一、功能需求
利用AS完成“类微信界面”移动开发课程设计，结合the STARBUCKS元素，进行界面设计与效果展现，拟实现效果如下：
1、设计形成四项不同功能的分页展示与界面可跳转；
2、完善单一界面设计；
3、使实现列表展示与列表滑动；
4、结合the STARBUCKS元素设计各类图样展示。
二、代码实现
1、项目结构
2、核心代码
（一）顶部代码（top.xml）
在AS的main Java中编写代码段会发现，单纯的利用main Java中的代码编写显然是不够直观且极大的浪费了AS的便捷性。因此，我们在layout中创建对应的顶部设置文件“top.xml”，使用LinearLayout布局，通过对相应的控件进行拉取和配置，以达成我们需要的效果：
同时，对代码进行调整也是实现完整功能的必要性步骤，比如针对大小具体数值的设置；top.xml文件代码如下：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#CA8C8C">
<TextView
android:id="@+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="STB GET BETTER"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>（二）底部代码（buttom.xml）
在类微信界面的设计过程当中，我们需要完成的是完整的界面设计，可以参考手机微信的界面，那么将会包括典型的四界面切换，此时就需要对界面底部进行设置与完善。同样的在layout中创建“buttom.xml”，利用LinearLayout布局，此时注意需要在垂直框中插入的控件包括图片以及文字：
（三）分页界面（fragment.xml）
（1）啡快点单
在这一界面将实现类似于微信信息界面的多个聊天框列表展示，且需实现可滑动功能，同样利用相关空间拉取，但拉取完成之后将需要完成代码的修改以便于实现需求的功能：
例如：使用recyclerview实现列表展示如下
fragment.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/fragment1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recylerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>实现design预期效果如下：
利用“item.xml”，在每一个item中对应拉取插入图像以及文本框，即同时设置列表中每一行的内容，item.xml文件内容如下：
item.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"
android:orientation="horizontal">
<ImageView
android:id="@+id/imageView"
android:layout_width="58dp"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="@drawable/ab"/>
<LinearLayout
android:layout_width="208dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/textView21"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView"
android:textColor="@color/black"
android:textSize="20sp" />
<TextView
android:id="@+id/textView22"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|left"
android:text="TextView"
android:textColor="#48514D"
android:textSize="30sp" />
</LinearLayout>
</LinearLayout>确保无误之后将会实现如下效果：
在使用Recyclerview时，同样需要完成Myadapter文件的配置，这一适配器继承自
Myadapter：
package com.example.myapplicationhomework;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.Myholder> {
List<String> list1, list2;
Context context1;
public MyAdapter(List list_1, List list_2, Context context) {
list1 = list_1;
list2 = list_2;
context1 = context;
}
@NonNull
@Override
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;
}
public void onBindViewHolder(@NonNull Myholder holder, int position) {
holder.textView1.setText(list1.get(position));
holder.textView2.setText(list2.get(position));
}
@Override
public int getItemCount() {
return list1.size();
}
class Myholder extends RecyclerView.ViewHolder {
TextView textView1, textView2;
public Myholder(@NonNull View itemView) {
super(itemView);
textView1 = itemView.findViewById(R.id.textView21);
textView2 = itemView.findViewById(R.id.textView22);
}
}
}（2）会员中心、最新推送、我的星啡室
剩余三个界面不做细致阐述，具体操作均可同上，此处以会员中心为例：
fragment2.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="match_parent">
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="这是会员中心"
android:textSize="30sp" />
</LinearLayout>Design
对应的main java目录中同样需要完成Fragment2的创建与编写：
Fragment2：
package com.example.myapplicationhomework;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
import com.example.myapplicationhomework.databinding.Fragment2Binding;
public class Fragment2 extends Fragment {
private Fragment2Binding fragment2Binding;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
// View view1 = new View(getContext());
// return view1;
fragment2Binding = Fragment2Binding.inflate(inflater, container, false);
View view = fragment2Binding.getRoot();
return view;
// return inflater.inflate(R.layout.fragment2, container, false);
}
@Override
public void onDestroyView() {
super.onDestroyView();
fragment2Binding = null;
}
}（四）基础页面布局
完成细分页面设计与配置之后，将需要完成页面总体布局，即整合为完整部分，“activity_main1.xml”文件编写的完成同样需要控件的拉取以及代码上的调整：
activity_main1.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="match_parent"
android:orientation="vertical">
<include
android:id="@+id/id_top"
layout="@layout/top" />
<FrameLayout
android:id="@+id/content1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#ECEEEE">
</FrameLayout>
<include
android:id="@+id/id_buttom"
layout="@layout/buttom" />
</LinearLayout>Design
（五）核心控件及主程序
MainActivity1Binding:
package com.example.myapplicationhomework;
import android.os.Bundle;
import android.view.View;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import com.example.myapplicationhomework.databinding.ActivityMain1Binding;
public class MainActivity1Binding extends AppCompatActivity implements View.OnClickListener {
// private ActivityMain1Binding activityMain1Binding;
Fragment fragment1, fragment2, fragment3, fragment4;
private ActivityMain1Binding activityMain1Binding;
FragmentManager fragmentManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
activityMain1Binding = ActivityMain1Binding.inflate(getLayoutInflater());
View view = activityMain1Binding.getRoot();
setContentView(view);
fragmentManager = getSupportFragmentManager();
fragment1 = new Fragment1();
fragment2 = new Fragment2();
fragment3 = new Fragment3();
fragment4 = new Fragment4();
initial();
fragmentshow(fragment1);
activityMain1Binding.idButtom.idTabHome.setOnClickListener(this);
activityMain1Binding.idButtom.idTabExplore.setOnClickListener(this);
activityMain1Binding.idButtom.idTabMessage.setOnClickListener(this);
activityMain1Binding.idButtom.idTabMy.setOnClickListener(this);
}
private void fragmentshow(Fragment fragment) {
fragmenthide();
FragmentTransaction ft = fragmentManager.beginTransaction()
.show(fragment);
ft.commit();
}
private void initial() {
FragmentTransaction ft = fragmentManager.beginTransaction()
.add(activityMain1Binding.content1.getId(), fragment1)
.add(activityMain1Binding.content1.getId(), fragment2)
.add(activityMain1Binding.content1.getId(), fragment3)
.add(activityMain1Binding.content1.getId(), fragment4);
ft.commit();
}
private void fragmenthide() {
FragmentTransaction ft = fragmentManager.beginTransaction()
.hide(fragment1)
.hide(fragment2)
.hide(fragment3)
.hide(fragment4);
ft.commit();
}
@Override
public void onClick(View view) {
if (view == activityMain1Binding.idButtom.idTabHome)
fragmentshow(fragment1);
else if (view == activityMain1Binding.idButtom.idTabExplore)
fragmentshow(fragment2);
else if (view == activityMain1Binding.idButtom.idTabMessage)
fragmentshow(fragment3);
else if (view == activityMain1Binding.idButtom.idTabMy)
fragmentshow(fragment4);
}
}三、运行实现
完整project的运行将会展现出体系化的类微信界面，典型的经过设置的啡快界面将能够实现滑动功能：
而另外三个界面将会有初级显示：
四、实验总结
完成"类微信界面的设计"实验后，我对整个过程有一些心得体会。首先，使用AS（Android Studio）作为开发工具非常方便，它提供了强大的功能和工具来帮助我们构建 Android 应用程序。
在实验中，需要首先学习如何设计和布局界面元素。通过使用XML布局文件，能够轻松创建界面和定义组件的位置和大小；
另外，各类控件的应用同样是需要根据实际情况进行各种调整的，这一过程体现了AS的界面设计便捷性；
最后，我注意到在设计类微信界面时，需要考虑到用户体验和界面的可用性。清晰的布局、易于使用的操作和友好的界面反馈都是重要的因素。通过观察和分析实际的微信界面，能够从中汲取灵感，并努力提供一个更好的用户体验。
总的来说，完成"类微信界面的设计"实验让我对Android应用程序的开发有了更深入的了解。通过实际操作和探索，我掌握了更多与界面设计相关的技能。这将对我未来的应用程序开发工作非常有帮助。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
