Andriod Studio 移动开发—类淘宝UI

一、主要思路

APP基础页面包括以下三个内容：首页（3-4个tab页面），列表页面，详情页面。从首页可以点击进入列表页面，点击列表的某一行可以进入详情页面。

这里一共需要两个Activity（FragmentActivity以及详情页面），四个Fragment（实现四个tab页面）加上一个Adapt类，xml文件包括四个tab页面的xml文件，主页的上下结构，为实现列表的recycle和item，详情页面的xml文件，以及将fragment上中下结合的xml文件。所有图标均在iconfont-阿里巴巴矢量图标库中获取。

二、具体实现

（一）首页（3-4个tab页面）

创建空项目

空项目中java目录中新建FragmentActivity

对应的xml文件在res/layout目录下

设计activity_fagment.xml前，新建四个fragment，以及四个对应的xml文件，具体如图：

接着实现fragment的上下结构，即layout_top.xml和layout_bottom.xml，

这里展示layout_bottom.xml，layout_top.xml很简单，就是一个头部的textview

可以看到这里面我插入了一些图片，想要在布局文件中插入自己想要的图片，可以直接将图片复制粘贴到res/drawable中

最后将layout_top.xml和layout_bottom.xml嵌套到activity_fragment.xml中，中间还要添加一个Framelayout布局

<?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:id="@+id/fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".FragmentActivity">

    <include
        layout="@layout/layout_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <FrameLayout
        android:id="@+id/framelayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

    </FrameLayout>

    <include layout="@layout/layout_bottom" />

</LinearLayout>

准备好了xml文件，我们来实现Java文件部分

首先是最主要的Fragment_activity.java，主要实现方法是将四个fragment布局文件压入，再根据点击动作，将对应的布局文件放在最前面

Fragment_activity.java

1）初始化

package com.example.myandriodwork;

import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

//类中有统一的接口类型implements View.OnClickListener
public class FragmentActivity extends AppCompatActivity {
Fragment fragment1,fragment2,fragment3,fragment4;
LinearLayout layout1,layout2,layout3,layout4;
FragmentManager manager;
FragmentTransaction transaction;//类中声明变量，在一个类中的方法函数中给该变量赋值，其他函数可以得到新值

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_fragment);

layout1=findViewById(R.id.bottom_layout1);
layout2=findViewById(R.id.bottom_layout2);
layout3=findViewById(R.id.bottom_layout3);
layout4=findViewById(R.id.bottom_layout4);

//Fragment1 fragment1=new Fragment1;为了方便变量传参，声明变量时用变量的父类来赋值，
//但是new的时候会用明确的子类new
fragment1=new Fragment1();
fragment2=new Fragment2();
fragment3=new Fragment3();
fragment4=new Fragment4();

manager=getSupportFragmentManager();
transaction=manager.beginTransaction();

intial();

fragmentHide();

transaction.show(fragment1);//程序首页面
transaction.commit();

2）实现点击动作

这里直接笨方法实现，更方便可以用switch和if语句实现

//点击动作
layout1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
transaction=manager.beginTransaction();
fragmentHide();
transaction.show(fragment1);
transaction.commit();
}

});
layout2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
transaction=manager.beginTransaction();
fragmentHide();
transaction.show(fragment2);
transaction.commit();//常见
}
});
layout3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
transaction=manager.beginTransaction();
fragmentHide();
transaction.show(fragment3);
transaction.commit();
}
});
layout4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
transaction=manager.beginTransaction();
fragmentHide();
transaction.show(fragment4);
transaction.commit();
}
});

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.framelayout), (v, insets) -> {
Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
});
}

3）初始化

将四个fragment压入

private void intial() {
transaction.add(R.id.framelayout,fragment1);
transaction.add(R.id.framelayout,fragment2);
transaction.add(R.id.framelayout,fragment3);
transaction.add(R.id.framelayout,fragment4);
}

4）隐藏

private void fragmentHide() {
transaction.hide(fragment1);
transaction.hide(fragment2);
transaction.hide(fragment3);
transaction.hide(fragment4);
}}

注意intial()和fragmentHide()的位置都在类中，不在onCreate()内

（二）列表页面

列表页面实现需要一个recycle布局文件，很容易实现，如图直接拖入

想要实现列表，还需要列表中每一行的item的布局文件

目前为止已经有很多xml文件，要注意不同的图片和文字的id保持不一样

Fragment1.java

这里将Fragment1与详情页面用adapt联系起来，具体的Fragment实现与recycle布局相关，具体Fragment1用列表形式的布局页面展示，将数据加入list1中，再将list1中的数据提供给adapter

package com.example.myandriodwork;

import android.content.Context;
import android.os.Bundle;

import androidx.fragment.app.Fragment;
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.HashMap;
import java.util.List;
import java.util.Map;

public class Fragment1 extends Fragment {

        private RecyclerView recyclerView;
        private List<String> list;
        private Context context;
        private RecyclerView.Adapter adapter;

        List<Map<String,Object>> list1;

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            // Inflate the layout for this fragment
            View view=inflater.inflate(R.layout.activity_recycle, container, false);

            context = getContext();//不能用this

            recyclerView = view.findViewById(R.id.recycleView);

            int[] photos={R.drawable.yifu1,R.drawable.yifu2,R.drawable.yifu3,R.drawable.yifu4,R.drawable.yifu5};
            String[] price={"￥188","￥288","￥388","￥488","￥1888"};
            String[] name={"cloth","clothes","gift","bag","phone"};

            list1=new ArrayList<>() ;
            for(int i=0;i<photos.length;i++){
                Map<String,Object> map=new HashMap<>();
                map.put("photos",photos[i]);
                map.put("name",name[i]);
                map.put("price",price[i]);
                list1.add(map);
            }

            adapter = new adapter(context,list1);
            recyclerView.setAdapter(adapter);

            LinearLayoutManager manager = new LinearLayoutManager(context);
            manager.setOrientation(LinearLayoutManager.VERTICAL);

            recyclerView.setLayoutManager(manager);

            return view;
    }
}

adapter.java

这里有关布局文件中的id都是item.xml中的，包括一个imageView，两个textView,通过myviewholder保存item中的一个imageView，两个textView

package com.example.myandriodwork;

import android.content.Context;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.activity.result.ActivityResultLauncher;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;
import java.util.Map;

//泛型传入
public class adapter extends RecyclerView.Adapter<adapter.myviewholder>{

    private List<Map<String,Object>>list;
    private Context context;
    private View inflater;
    ActivityResultLauncher<Intent> launcher;

    public adapter(Context context, List<Map<String,Object>> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public myviewholder onCreateViewHolder( ViewGroup viewGroup, int i) {
        inflater = LayoutInflater.from(context).inflate(R.layout.layout_item,viewGroup,false);
        myviewholder myviewholder =new myviewholder(inflater);
        return myviewholder;
    }

    @Override
    public void onBindViewHolder( adapter.myviewholder myviewholder, int j) {
        int p=Integer.parseInt(list.get(j).get("photos").toString());
        myviewholder.imageView1.setImageResource(p);
        String name=list.get(j).get("name").toString();
        myviewholder.textView1.setText(name);
        String price=list.get(j).get("price").toString();
        myviewholder.textView2.setText(price);

        //点击动作
        myviewholder.textView1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent=new Intent(context,Activity_contact_detail.class);//当前跳到详情页面
                //向intent传值
                intent.putExtra("photos",p);
                intent.putExtra("name",name);
                intent.putExtra("price",price);
                context.startActivity(intent);//老方法，但不同行点击跳转的是一样的
            }
        });
    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    class myviewholder extends RecyclerView.ViewHolder{
        TextView textView1,textView2;
        ImageView imageView1;
        public myviewholder( View itemView) {
            super(itemView);
            imageView1=itemView.findViewById(R.id.rv_imageView);
            textView1 = itemView.findViewById(R.id.rv_textView1);
            textView2 = itemView.findViewById(R.id.rv_textView2);
        }
    }
}

再通过监听动作，将一个imageView，两个textView的值传到Activity_contact_detail

（三）详情页面

新建详情Activity_contact_detail，由于要传入一个imageView，两个textView，所以xml文件中需包括，Activity_contact_detail接收adapter传来的intent

Activity_contact_detail.java

package com.example.myandriodwork;

import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class Activity_contact_detail extends AppCompatActivity {

    ImageView imageView1;
    TextView textView1,textView2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_contact_detail);

        Intent intent=getIntent();
        int photos=intent.getIntExtra("photos",666);
        String name=intent.getStringExtra("name");
        String price=intent.getStringExtra("price");

        imageView1=findViewById(R.id.imageView_detail);
        imageView1.setImageResource(photos);

        textView1=findViewById(R.id.textView_detail1);
        textView1.setText(name+"的详情页面");

        textView2=findViewById(R.id.textView_detail2);
        textView2.setText("实付价格"+price);

        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.contact_detail), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });
    }
}

三、实现结果

tab页面转换

点击进入详情页面

四、总结

这次作业完成中遇到了很多困难，比如bottom.xml中的图片在程序运行时没有显示，后询问同学发现将第二个srccompat插入想要的图片即可

还有如果xml文件是通过复制粘贴的，改Layout的id注意要在code界面，最好不要在design界面，不然会改变所有通过复制粘贴得到的xml文件的Layout的id。

五、源代码

buhui编程/ASwork1