1.创建3个xml文件
分别为top.xml,bottom.xml,activity_main.xml。其中top作为微信界面的头部其中只有一个TextView控件,如图
bottom.xml作为微信底部按钮,在其中先再添加一个LinearLayout设置为垂直布局在下面添加Imagview(设置对应图标),TextView(设置“”消息”,“联系人”等文字)两个控件如图,注意对LinerLayout和TextView的id进行设置后面需要用到
可以复制该段在后面注意更该其中的text内容和图标样式最后的结果如图
最后在activity_main.xml中用include引用top,bottom在两个include中间添加framelayout布局(用来替换中间的内容)
2.在layout中新建四个fragment
同时会新建四个java文件注意更改名字四个fragment.xml内容基本一致
3.编写MainActivity.java
先声明需要用到的控件并创建类的实例,新建Fragment管理者fm
Contacts contacts = new Contacts();
Explore explore = new Explore();
Message message = new Message();
Myself myself = new Myself();
LinearLayout line1;
LinearLayout line2;
LinearLayout line3;
LinearLayout line4;
private TextView textmessage;
private TextView textcontacts;
private TextView textexplore;
private TextView textmyself;
FragmentManager fm = getSupportFragmentManager();
在OnCreate方法中findViewById控件,对想要被点击并做出回应的控件setOnClickListener建立监听
line1 = findViewById(R.id.line1);
line2 = findViewById(R.id.line2);
line3 = findViewById(R.id.line3);
line4 = findViewById(R.id.line4);
textmessage = findViewById(R.id.textmessage);
textcontacts = findViewById(R.id.textcontacts);
textexplore = findViewById(R.id.textexplore);
textmyself = findViewById(R.id.textmyself);
line1.setOnClickListener(this);
line2.setOnClickListener(this);
line3.setOnClickListener(this);
line4.setOnClickListener(this);
initFragment用来将四个Fragment加入到Activity中用show来显示,hidden用来隐藏fragment
private void initFragment() {
FragmentTransaction ft = fm.beginTransaction();
ft.add(R.id.frame,message);
ft.add(R.id.frame,contacts);
ft.add(R.id.frame,myself);
ft.add(R.id.frame,explore);
ft.commit();
}
//初始化底部文字背景颜色
private void initText() {
textcontacts.setBackgroundColor(getColor(R.color.white));
textmyself.setBackgroundColor(getColor(R.color.white));
textmessage.setBackgroundColor(getColor(R.color.white));
textexplore.setBackgroundColor(getColor(R.color.white));
}
private void hidden() {
FragmentTransaction ft = fm.beginTransaction();;
ft.hide(message);
ft.hide(myself);
ft.hide(contacts);
ft.hide(explore);
ft.commit();
}
在OnClick中搭配使用show和hidden做到点击底部按钮后只显示一个fragment
public void onClick(View view) {
FragmentTransaction ft = fm.beginTransaction();
hidden();
initText();
if(view.getId() == R.id.line1) {
ft.show(message);
textmessage.setBackgroundColor(getColor(R.color.green));//点击后改变底部文字背景颜色
}
if(view.getId() == R.id.line2) {
ft.show(contacts);
textcontacts.setBackgroundColor(getColor(R.color.green));
}
if(view.getId() == R.id.line3) {
ft.show(explore);
textexplore.setBackgroundColor(getColor(R.color.green));
}
if(view.getId() == R.id.line4) {
ft.show(myself);
textmyself.setBackgroundColor(getColor(R.color.green));
}
ft.commit();
}
4.添加RecyclerView
在任意一个fragment中添加RecyclerView控件用来显示一个列表内容,例如在消息界面中添加先在xml中添加控件,可以将text内容移动到顶部,列表显示在中间。同时新建一个xml文件命名为item(作为列表里每一行数据显示的样式)里面只用TextView一个控件(只有文字),注意设置id。
item.xml
5.编写对应fragment的java文件内容
list用来填充列表内容
Context context;
List<String> list1 = new ArrayList<>();
RecyclerView recyclerView;
private void initlist(){
for(int i = 0;i < 9;i++){
list1.add("这是第"+i+"行数据");
}
}
在OnCreatView中添加如下代码
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fg_message, container, false);
context = view.getContext();
initlist();
recyclerView = view.findViewById(R.id.recyclerview);
LinearLayoutManager manger = new LinearLayoutManager(context);
manger.setOrientation(RecyclerView.VERTICAL);
recyclerView.setLayoutManager(manger);
MyAdpater myAdpater = new MyAdpater(context,list1);
recyclerView.setAdapter(myAdpater);
return view;
}
需要用到的MyAdpater新建一个java文件创建一个java类
public class MyAdpater extends RecyclerView.Adapter<MyAdpater.MyViewHolder>
Alt+enter后会自动新建三个方法,对方法进行如下重写
public MyAdpater.MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false);
return new MyViewHolder(view);
}
//绑定数据,数据与view绑定
@Override
public void onBindViewHolder(@NonNull MyAdpater.MyViewHolder holder, int position) {
holder.item.setText(list1.get(position));
}
@Override
public int getItemCount() {
return list1.size();
}
将传递过来的数据,赋值给本地变量
List<String> list1;
Context context1;
public MyAdpater(Context context,List<String> list){
list1 = list;
context1 = context;
}
创建构造函数
public class MyViewHolder extends RecyclerView.ViewHolder {
TextView item;
public MyViewHolder(View itemview) {
super(itemview);
this.item = itemview.findViewById(R.id.itemtext);
}
}