最终实现
设计一个类微信的主界面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并合理正确使用,在此次作业中出现两次因为覆盖而无法显示的问题,不易发现。多学习,多交流。