目录
一、功能需求
完成一个类似微信页面的布局，实现效果：
1.页面最上方为标题；
2.页面中间界面显示内容，内容随下方栏目的选择而切换界面；
3.页面最下方有四个按钮，分别是消息、通讯录、设置、我的四个部分；
4.消息界面实现列表效果。
二、代码实现
1、项目结构
2、核心代码
(一)顶部代码（top.xml）
在layout文件中创建top.xml文件，使用LinearLayout布局，修改文字颜色和背景颜色，并设置为居中效果。
<?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="65dp"
android:background="@color/black"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="微信"
android:textColor="@color/white"
android:textSize="50sp" />
</LinearLayout> 效果：
(二)底部代码(bottom.xml)
在layout文件中创建bottom.xml，以消息界面为例，每个垂直的LinearLayout插入一个图像和一个文本框，其它三个界面的按钮与消息界面类似。
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_WeChat_img2"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_weight="1"
android:scaleType="fitCenter"
app:srcCompat="@drawable/xiaoxi"
tools:ignore="SpeakableTextPresentCheck" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:saveEnabled="false"
android:text="消息"
android:textColor="#000000"
android:textSize="20sp" />
</LinearLayout>效果：
(三)四个内容界面(fragment.xml)
(1)消息界面
消息界面实现列表效果，所有单独拿出
fragment.xml
使用recycleview实现列表效果
<?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">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>效果：
item.xml
在一个item中插入一个图像和一个文本框，即列表中每一行的效果
<?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:id="@+id/item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/imageView2"
android:layout_width="68dp"
android:layout_height="60dp"
app:srcCompat="@drawable/touxiang" />
<TextView
android:id="@+id/textView21"
android:layout_width="347dp"
android:layout_height="match_parent"
android:text="TextView"
android:textColor="@color/black"
android:textSize="30sp" />
</LinearLayout>效果：
Myadapter
RecyclerView的适配器，继承自Recycler.Adapter。
package com.example.student;
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;
Context context1;
public Myadapter(List list, Context context) {
list1=list;
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;
}
@Override
public void onBindViewHolder(@NonNull Myholder holder, int position) {
holder.textView.setText(list1.get(position));
}
@Override
public int getItemCount() {
return list1.size();
}
class Myholder extends RecyclerView.ViewHolder{
TextView textView;
public Myholder(@NonNull View itemView) {
super(itemView);
textView=itemView.findViewById(R.id.textView21);
}
}
}
Fragment
写入initData()方法和initView()方法。前者为列表中的文字内容，设置为20位联系人；后者与适配器绑定，实现列表效果。
package com.example.student;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
import java.util.List;
public class Fragment1 extends Fragment {
List<String> list=new ArrayList();
RecyclerView recyclerView;
Myadapter myadapter;
Context context;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.fragment1, container, false);
recyclerView=view.findViewById(R.id.recyclerView);
initData();
initView();
return view;
}
private void initData(){
for (int i=1; i<=20; i++){
list.add("这是联系人："+i);
}
}
private void initView(){
context=this.getActivity();
myadapter=new Myadapter(list, context);
recyclerView.setAdapter(myadapter);
LinearLayoutManager manager=new LinearLayoutManager(context);
manager.setOrientation(LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(manager);
recyclerView.addItemDecoration(new DividerItemDecoration(getActivity(),DividerItemDecoration.VERTICAL));
recyclerView.setHasFixedSize(true);
}
}
(2)通信录、设置、我的界面
其它三个界面相似，以通讯录界面为例
fragment.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/textView6"
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="48sp" />
</LinearLayout>效果：
Fragment
package com.example.student;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class Fragment2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment2, container, false);
}
}在完成通讯录界面后，再分别复制两个fragment.xml和Fragment为设置界面和我的界面的内容，并修改其中的文字内容即可。
(四)窗口总布局(activity_main.xml)
需要的效果为上方是标题，中间显示四个界面，下方有四个按钮，所有先通过include标签添加top.xml文件和bottom文件，然后将FrameLayout放在两者之间完成页面的布局。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
tools:context=".MainActivity">
<include
layout="@layout/top"/>
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom" />
</LinearLayout>效果：
(五)MainActivity实现
实现四个页面之间的跳转
package com.example.student;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
Fragment fragment1,fragment2,fragment3,fragment4;
LinearLayout linearLayout1, linearLayout2, linearLayout3, linearLayout4;
static final int l1=R.id.linearLayout1;
static final int l2=R.id.linearLayout2;
static final int l3=R.id.linearLayout3;
static final int l4=R.id.linearLayout4;
FragmentManager fm;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
linearLayout1 = findViewById(R.id.linearLayout1);
linearLayout2 = findViewById(R.id.linearLayout2);
linearLayout3 = findViewById(R.id.linearLayout3);
linearLayout4 = findViewById(R.id.linearLayout4);
fm = getSupportFragmentManager();
fragment1 = new Fragment1();
fragment2 = new Fragment2();
fragment3 = new Fragment3();
fragment4 = new Fragment4();
innitial();
fragmentshow(fragment1);
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);
}
private void fragmentHide() {
FragmentTransaction ft = fm.beginTransaction()
.hide(fragment1)
.hide(fragment2)
.hide(fragment3)
.hide(fragment4);
ft.commit();
}
private void fragmentshow(Fragment fragment) {
fragmentHide();
FragmentTransaction ft = fm.beginTransaction()
.show(fragment);
ft.commit();
}
private void innitial() {
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();
}
@Override
public void onClick(View view){
if (view.getId() == l1)
fragmentshow(fragment1);
else if (view.getId() == l2)
fragmentshow(fragment2);
else if (view.getId() == l3)
fragmentshow(fragment3);
else if (view.getId() == l4)
fragmentshow(fragment4);
}
}三、运行效果
消息界面： 通讯录界面：
设置界面： 我的界面：
四、总结
本次实验是使用Android studio完成的第一个实验，本次实验主要学习了如何通过点击切换界面，和实现列表效果。在实验过程中，主要在完成MainActivity实现的时候出现了一些问题，一是因为与Fragment所引用的位置不同，导致无法找到Fragment，二是所引用的Layout中的内容没有设置id。最后在上传源码时出现了一些问题导致无法上传，最终通过查询资料解决。
扫一扫
1429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
