移动开发 设计app门户框架

一、作业目标
1.根据课程内容设计一个app(微信)的门户框架，需要实现3-4个tab的切换效果；本功能要求需要的技术为：activity、xml、fragment；

2.在任一tab页实现列表效果；本功能的实现需要使用recycleview。

二、实现工具
Android Stdio

三、设计思路：
1.实现微信的界面设计：
将界面分为上中下三部分，分别用top.xml,tab.xml,bottom.xml文件设计，其中tab再分为4个页面tab1.xml,tab2.xml,tab3.xml,tab4.xml。

同时分别对应Fragment1,Fragment2,Fragment3,Fragment4 java文件。

2.实现列表效果：
利用recycleview在tab2界面实现列表效果，将tab2界面内容替换成列表。

四、设计过程

首先设计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:layout_weight="1"
        android:background="@color/black"
        android:gravity="center"
        android:text="微信"
        android:textColor="@color/white"
        android:textSize="40sp" />
</LinearLayout>

top.xml界面显示如下：

其次设计中间部分tab.xml:

因为4个tab页面布局类似，这里只展示tab1页面设计代码及界面：

<?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/textView2"
        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="50sp" />
</LinearLayout>

然后设计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"
    android:background="@color/black"
    android:orientation="horizontal">
 
    <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="115dp"
            android:layout_height="109dp"
 
            android:layout_weight="1"
            app:srcCompat="@android:drawable/ic_menu_always_landscape_portrait" />
 
        <TextView
            android:id="@+id/textView11"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="聊天"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/LinearLayout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/imageView22"
            android:layout_width="115dp"
            android:layout_height="109dp"
 
            android:layout_weight="1"
            app:srcCompat="@android:drawable/ic_menu_call" />
 
        <TextView
            android:id="@+id/textView22"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="联系人"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/LinearLayout3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/imageView33"
            android:layout_width="match_parent"
            android:layout_height="109dp"
 
            android:layout_weight="1"
            app:srcCompat="@android:drawable/ic_menu_compass" />
 
        <TextView
            android:id="@+id/textView33"
            android:layout_width="115dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="位置"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/LinearLayout4"
        android:layout_width="109dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/imageView44"
            android:layout_width="match_parent"
            android:layout_height="109dp"
 
            android:layout_weight="1"
            app:srcCompat="@android:drawable/ic_menu_manage" />
 
        <TextView
            android:id="@+id/textView44"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="设置"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>
</LinearLayout>

最后在main.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:orientation="vertical">
 
    <include layout="@layout/top" />
 
    <FrameLayout
        android:id="@+id/content1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
 
    </FrameLayout>
 
    <include
        android:id="@+id/content"
        layout="@layout/bottom" />
 
</LinearLayout>

五、创建对应的java文件(Fragment类)

首先创建4个Frangment文件

因为Frangment文件代码类似，故只展示Fragment1代码：

其次创建MainActivity文件，用以实现导航栏和Fragment布局的切换功能

最后结果如下：

package com.example.myfirstapp;
 
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 {
 
    Fragment1 fragment;
    Fragment fragment1,fragment2,fragment3,fragment4;
 
    FragmentManager fm;
    FragmentTransaction ft;
    LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
 
    @Override
    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);
        fm=getSupportFragmentManager();
        initial();
        fragmenthide();
        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 initial() {
        FragmentTransaction ft=fm.beginTransaction()
                .add(R.id.content1,fragment1)
                .add(R.id.content1,fragment2)
                .add(R.id.content1,fragment3)
                .add(R.id.content1,fragment4);
        ft.commit();
    }
 
    @Override
    public void onClick(View view){
        fragmenthide();
 
        
            if(view.getId()==R.id.LinearLayout1){
                fragmenthide();
                fragmentshow(fragment1);
            }
            if(view.getId()==R.id.LinearLayout2){
                fragmenthide();
                fragmentshow(fragment2);
            }
            if(view.getId()==R.id.LinearLayout3){
                fragmenthide();
                fragmentshow(fragment3);
            }
            if(view.getId()==R.id.LinearLayout4){
                fragmenthide();
                fragmentshow(fragment4);
            }
 
 
    }
 
    private void fragmentshow(Fragment fragment) {
        FragmentTransaction transaction=fm.beginTransaction()
                .show(fragment);
        transaction.commit();
    }
}

最后结果如下：

六、实现列表效果

选择修改tab2页面：

在tab2页面加入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/recycleView"
        android:layout_width="388dp"
        android:layout_height="701dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        />
</LinearLayout>

新建item.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/textView6"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
 
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView"
        android:textColor="@color/black"
        android:textSize="35sp" />
</LinearLayout>

创建Myadapter类：

package com.example.myfirstapp;
 
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;
import java.util.zip.Inflater;
 
public class Myadapter extends RecyclerView.Adapter<Myadapter.Myholder> {
 
    Context context1;
    List<String> list1;
 
 
    public Myadapter(Context context, List list){
        context1=context;
        list1=list;
    }
 
    @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();
    }
    protected class Myholder extends RecyclerView.ViewHolder {
        TextView textView;
        public Myholder(@NonNull View itemView) {
            super(itemView);
            textView=itemView.findViewById(R.id.textView6);
        }
    }
}

修改Fragment2文件：

package com.example.myfirstapp;
 
import android.annotation.SuppressLint;
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.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.*;
 
public class Fragment2 extends Fragment {
    Context context;
    List list;
    RecyclerView recyclerView;
    Myadapter myadapter;
 
    @SuppressLint("MissingInflatedId")
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.tab2, container, false);
        context = view.getContext();
        recyclerView = view.findViewById(R.id.recycleView);
        list = new ArrayList();
        for(int i=0;i<9;i++){
            list.add("这是第"+i+"行数据");}
 
        myadapter = new Myadapter(context, list);
        recyclerView.setAdapter(myadapter);
        LinearLayoutManager manager = new LinearLayoutManager(context);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);
 
        return view;
 
 
    }
}

七、作业总结
      1、学会了如何使用AndroidStdio来完成一个app的门户框架，比如可以设计界面的xml文件，用于构建模块化的用户界面、在Android应用程序中可重用界面的组件Fragment。

      2、还学会了如何在一个tab页面实现列表的效果，需要使用RecyclerView组件和自定义适配器移动开Adapter来管理数据和视图之间的关联。

gitee仓库链接：

https://gitee.com/sun-tu/mobile-developmenthttps://gitee.com/sun-tu/mobile-development