Android移动开发技术—app门户设计与开发

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