app门户页面设计与开发
一、项目总体目标介绍
总体目标内容: 设计一个安卓app的门户框架,实现在4个tab之间的点击切换效果,并且在任一tab页面中实现列表效果。
使用到的技术: activity、xml、fragment、recycleview
开发工具: Android studio
二、总体代码实现
(1)XML页面设计代码
1.1 f1.xml
f1的属性代码
<?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">
<TextView
android:id="@+id/textView7"
android:layout_width="match_parent"
android:layout_height="65dp"
android:textSize="40sp"
android:background="@color/material_dynamic_tertiary80"
android:textColor="@color/black"
android:gravity="center"
android:text="My App" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/RecycleViewF1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="40sp" />
</LinearLayout>
1.2 f2.xml
f2的属性代码
<?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/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView5"
android:layout_width="318dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="开始聊天"
android:textSize="34sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.505"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.786" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="进入微信界面"
android:textSize="60sp"
app:layout_constraintBottom_toTopOf="@+id/textView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.508" />
</androidx.constraintlayout.widget.ConstraintLayout>
1.3 f3.xml
f3的属性代码
<?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">
<TextView
android:id="@+id/textView8"
android:layout_width="match_parent"
android:layout_height="65dp"
android:textSize="40dp"
android:background="@color/material_dynamic_tertiary80"
android:textColor="@color/cardview_shadow_start_color"
android:gravity="center"
android:text="TextView" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/RecycleViewmenpai"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"/>
</LinearLayout>
1.4 f4.xml
f4的属性代码
<?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">
<TextView
android:id="@+id/textView11"
android:layout_width="411dp"
android:layout_height="644dp"
android:layout_gravity="center"
android:background="@color/white"
android:gravity="left"
android:textColor="@color/black"
android:textSize="40sp" />
</LinearLayout>
1.5 top.xml
头部“My App”标题
<?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/textView"
android:layout_width="wrap_content"
android:layout_height="62dp"
android:layout_weight="1"
android:gravity="center"
android:textSize="45dp"
android:background="@color/material_dynamic_tertiary80"
android:textColor="@color/white"
android:text="My app" />
</LinearLayout>
1.6 bottom.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:gravity="bottom">
<LinearLayout
android:id="@+id/line1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="聊天"
android:textSize="34sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/line2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="通讯录"
android:textSize="34sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/line3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="发现"
android:textSize="34sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/line4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="我"
android:textSize="34sp" />
</LinearLayout>
</LinearLayout>
1.7 item.xml
存放RecycleView的TextView
<?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">
<TextView
android:id="@+id/textView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="@color/black"
android:textSize="30sp" />
</LinearLayout>
1.8 activity_main.xml
存放整体布局的top,content,buttom,并初始化配置
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".MainActivity">
<include
android:id="@+id/top"
layout="@layout/top"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<FrameLayout
android:id="@+id/content"
android:layout_width="411dp"
android:layout_height="681dp"
android:layout_weight="1">
</FrameLayout>
<include
android:id="@+id/bottom"
layout="@layout/bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
(2)关键技术和核心代码
2.1 四个界面绑定跳转按钮的核心代码
F1
package edu.hubu.myapp;
import android.content.Context;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
public class F1 extends Fragment {
Context context;
RecyclerView recyclerView;
View view;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view=inflater.inflate(R.layout.f1, container, false);
recyclerView= view.findViewById(R.id.RecycleViewF1);
List<String> fabaos = new ArrayList<>(Arrays.asList("联系人1","联系人2","联系人3","联系人4","联系人5","联系人6","联系人7","联系人8","联系人9","联系人10"));
MyAdapter myadapter = new MyAdapter(getContext(),fabaos);
recyclerView.setAdapter(myadapter);
GridLayoutManager layoutManager = new GridLayoutManager(getContext(),3);
recyclerView.setLayoutManager(layoutManager);
return view;
}
}
F2
package edu.hubu.myapp;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;
import androidx.fragment.app.Fragment;
public class F2 extends Fragment {
Button button;
View view;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.f2, container, false);
button = view.findViewById(R.id.button4);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getContext(),"",Toast.LENGTH_LONG).show();
}
});
return view;
}
}
F3
package edu.hubu.myapp;
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.GridLayoutManager;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
public class F3 extends Fragment {
View view;
RecyclerView recyclerView;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view=inflater.inflate(R.layout.f3, container, false);
recyclerView= view.findViewById(R.id.RecycleViewmenpai);
List<String> menpais = Arrays.asList("新的朋友","群聊","公众号","联系人1","联系人2","联系人3","联系人4","联系人5","联系人6","联系人7");
MyAdapter myadapter = new MyAdapter(getContext(),menpais);
recyclerView.setAdapter(myadapter);
recyclerView.setAdapter(myadapter);
GridLayoutManager layoutManager = new GridLayoutManager(getContext(),2);
recyclerView.setLayoutManager(layoutManager);
return view;
}
}
F4
package edu.hubu.myapp;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class F4 extends Fragment {
View view;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.f4, container, false);
return view;
}
}
2.2 ** 主要函数代码**
MainActivity
进行点击配置,实现点击的界面的跳转,实现对ViewBinding控件,对其他各种控件的使用
package edu.hubu.myapp;
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;
public class MainActivity extends AppCompatActivity {
ActivityMainBinding mainBinding;
Fragment f2,f1,f3,f4;
FragmentManager fm;
FragmentTransaction ft;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
mainBinding = ActivityMainBinding.inflate(getLayoutInflater());
View view = mainBinding.getRoot();
setContentView(view);
f1 = new f1();
f2 = new f2();
f3 = new f3();
f4 = new f4();
fm = getSupportFragmentManager();
initial();
ft = fm.beginTransaction().show(f2);
ft.commit();
mainBinding.bottom.line1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
fragment_hide();
ft = fm.beginTransaction().show(f2);
ft.commit();
}
});
mainBinding.bottom.line2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
fragment_hide();
ft = fm.beginTransaction().show(f1);
ft.commit();
}
});
mainBinding.bottom.line3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
fragment_hide();
ft = fm.beginTransaction().show(f3);
ft.commit();
}
});
mainBinding.bottom.line4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
fragment_hide();
ft = fm.beginTransaction().show(f4);
ft.commit();
}
});
}
//
private void fragment_hide() {
ft = fm.beginTransaction()
.hide(f2)
.hide(f1)
.hide(f3)
.hide(f4);
ft.commit();
}
private void initial() {
ft = fm.beginTransaction()
.add(R.id.content,f2)
.add(R.id.content,f1)
.add(R.id.content,f3)
.add(R.id.content,f4);
ft.commit();
fragment_hide();
}
}
MainAdapter
定义了一个适配器,将list内容写入到recycleview中
package edu.hubu.myapp;
import android.content.Context;
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(Context context,List list) {
this.context1 = context;
this.list1 = list;
}
@NonNull
@Override
public MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view=View.inflate(context1,R.layout.item,null);
MyHolder myHolder = new MyHolder(view);
myHolder.setIsRecyclable(false);
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.textView5);
}
}
}
(3)最后tab页面切换效果展示
3.1 最开始页面
3.2 聊天页面
3.3 通讯录页面
3.4 发现页面
3.5 我(设置)页面
四、项目总结
在整个实验中我学会了入门级别的Android studio的使用操作,学习了多种组件知识,例如Fragment(分段)、TextView(文本展示),bottom(底部)等等,成功实现了app门户设计以及四个tab之间的切换还有列表,但是过于粗糙,还有很大的改进空间,还要多加学习与练习,后续会慢慢改进这个app。
五、源码地址
以上代码在我个人gitee仓库中,可以自行前往查看。如有错误欢迎指正!
https://gitee.com/wuyangover/android