Android开发——线上商城app框架搭建（一）

---

前言

第一次写类似的学习分享类博客，经验不足，写得不好，请多多包涵

---

提示：以下是本篇文章正文内容

一、实现效果图预览

1、首页界面

​​​​​​​​​​

2、点击首页列表栏图片后，跳转至详情界面

3、演示视频如下：

二、功能说明

设计一个线上商城的界面UI，包括上中下三结构，包含四个界面：首页、分类、发现、我的，点击下方四个按钮即可实现界面跳转，并可以在首页实现瀑布流列表效果。

三、实现说明及具体代码

1、界面上中下结构：

由上图可清晰看出该界面由三部分组成，这里实现的方法是用一个含有中间部分的主界面xml文件(activity_main.xml)，把顶部xml(layout_top.xml)及底部xml(layout_bottom.xml)显示出来。

activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        android:orientation="vertical">

        <!--这里是 include引入我们的top导航栏，类似组件复用的概念-->
        <include layout="@layout/layout_top" />

        <FrameLayout
            android:id="@+id/framelayout1"
            android:layout_width="match_parent"
            android:layout_height="459dp"
            android:layout_marginBottom="20dp"
            android:layout_weight="1">

        </FrameLayout>

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

layout_top.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="60dp"
    android:layout_gravity="top"
    android:orientation="vertical"
    android:padding="8dp">

    <!-- 搜索栏 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <!-- 搜索图标 -->
        <ImageView
            android:id="@+id/imageView_search_icon"
            android:layout_width="32dp"
            android:layout_height="62dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/ic_search" /> 

        <!-- 搜索输入框 -->
        <EditText
            android:id="@+id/editText_search"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="8dp"
            android:layout_weight="1"
            android:hint="尤尼克斯天斧100zz"
            android:inputType="text"
            android:textSize="16sp" />

        <!-- 搜索按钮 -->
        <Button
            android:id="@+id/button_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:text="Search"
            android:textSize="16sp" />
    </LinearLayout>
</LinearLayout>

layout_top.xml的效果：

布局了一个搜索栏及启动搜索按钮（由于还未部署联网或数据库功能，次搜索栏及按钮还不具备任何功能）

layout_bottom.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_gravity="bottom"
    android:orientation="horizontal"
    android:weightSum="4">

    <LinearLayout
        android:id="@+id/linearLayout_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginBottom="4dp"

            android:scaleType="centerCrop"
            android:visibility="visible"
            tools:srcCompat="@drawable/img_2" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="36dp"
            android:gravity="center"
            android:text="首页"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginBottom="4dp"
            android:scaleType="centerCrop"
            android:visibility="visible"
            tools:srcCompat="@drawable/img_3" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="分类"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginBottom="4dp"
            android:scaleType="centerCrop"
            android:visibility="visible"
            tools:srcCompat="@drawable/img_4" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginBottom="4dp"
            android:scaleType="centerCrop"
            android:visibility="visible"
            tools:srcCompat="@drawable/img_5" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我的"
            android:textSize="24sp" />
    </LinearLayout>
</LinearLayout>

layout_bottom.xml效果：

这里我使用了四个LinearLayout组件，其中包括一个ImageView和TextView

2、页面跳转

先上代码Mainactivity.java

package com.example.myapplication;

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

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import androidx.viewpager2.widget.ViewPager2;

import java.util.Arrays;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    LinearLayout layout1,layout2,layout3,layout4;
    Fragment fragment1,fragment2,fragment3,fragment4;
    FragmentManager manager;
    FragmentTransaction transaction;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);


        layout1=findViewById(R.id.linearLayout_1);
        layout2=findViewById(R.id.linearLayout_2);
        layout3=findViewById(R.id.linearLayout_3);
        layout4=findViewById(R.id.linearLayout_4);


        fragment1=new Fragment1();
        fragment2=new Fragment2();
        fragment3=new Fragment3();
        fragment4=new Fragment4();


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


        initial();
        fragmentHide();

        transaction.show(fragment1);
        transaction.commit();
        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();
            }
        });


    }

    void initial() {
        transaction.add(R.id.framelayout1,fragment1);
        transaction.add(R.id.framelayout1,fragment2);
        transaction.add(R.id.framelayout1,fragment3);
        transaction.add(R.id.framelayout1,fragment4);
    }


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

}

在主界面Mainactivity.java中定义四个Fragment框架，作为四个tab页。

manager=getSupportFragmentManager();
transaction =manager.beginTransaction();
initial();
fragmentHide();
transaction.show(fragment1);
transaction.commit();

如上代码使界面首先显示Fragment1，即主页

layout1=findViewById(R.id.linearLayout_1);
layout1.setOnClickListener(new View.OnClickListener()

这里以layout1为例，首先layout1通过layout1=findViewById(R.id.linearLayout_1);与linearLayout（layout_bottom.xml中）关联，然后通过setOnClickListener监听点击操作

transaction=manager.beginTransaction();
fragmentHide();
transaction.show(fragment1);
transaction.commit();

通过隐藏当前Fragment，展示目标Fragment，实现界面跳转操作

3、具体页面

因为我只拿Fragment1练了练手，所以这里我先说明一下Fragment1及其对应的xml文件。

（1）总体介绍

<?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/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager_images"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:orientation="horizontal" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView_staggered"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipToPadding="false"
            android:padding="4dp" />

        <!-- 瀑布流RecyclerView -->

    </LinearLayout>

</LinearLayout>

我使用了两个控件，分别是viewpager2和瀑布流RecyclerView，前者可实现多张图片的横向滑动显示，后者可实现多张图片的瀑布流显示

Fragment1.java

package com.example.myapplication;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;
import androidx.viewpager2.widget.ViewPager2;

import java.util.Arrays;
import java.util.List;

public class Fragment1 extends Fragment {
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";
    private String mParam1;
    private String mParam2;
    private ViewPager2 viewPager;
    private List<Integer> imageResourceIds;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
        imageResourceIds = Arrays.asList(
                R.drawable.img,
                R.drawable.img_1,
                R.drawable.p3,
                R.drawable.p1,
                R.drawable.p2,
                R.drawable.p3,
                R.drawable.img,
                R.drawable.img_1,
                R.drawable.p4,
                R.drawable.img,
                R.drawable.img_1,
                R.drawable.p3
        );
    }
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_1, container, false);

        viewPager = view.findViewById(R.id.viewPager_images);
        ImagePagerAdapter adapter = new ImagePagerAdapter(this, imageResourceIds);
        viewPager.setAdapter(adapter);

        // 初始化 RecyclerView
        RecyclerView recyclerView = view.findViewById(R.id.recyclerView_staggered);
        StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(staggeredGridLayoutManager);
        StaggeredGridAdapter adapter1 = new StaggeredGridAdapter(getContext(), imageResourceIds); 
        adapter1.setOnItemClickListener(new StaggeredGridAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(Context context, int position) {
                // 创建 Intent 并跳转到 DetailActivity
                Intent intent = new Intent(context, f1_details.class);
                intent.putExtra("position", position);

                startActivity(intent);
            }
        });

        recyclerView.setAdapter(adapter1);

        return view;
    }
}

定义一个名为imageResourceIds的图片列表，作为以上两个控件的显示图片源。（只是搭框架，所以图片是我随便找的几张）

View view = inflater.inflate(R.layout.fragment_1, container, false);
viewPager = view.findViewById(R.id.viewPager_images);
ImagePagerAdapter adapter = new ImagePagerAdapter(this, imageResourceIds);
viewPager.setAdapter(adapter);

上述代码段实例化了ImagePagerAdapter适配器，并联系到imageResourceIds。（adapter相关内容在下方说明）

RecyclerView recyclerView = view.findViewById(R.id.recyclerView_staggered);
StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(staggeredGridLayoutManager);
StaggeredGridAdapter adapter1 = new StaggeredGridAdapter(getContext(), imageResourceIds);

与上面相同，实例化了一个StaggeredGridLayoutManager适配器，同时对其进行简单设置，包括图片展示设置为两列

adapter1.setOnItemClickListener(newStaggeredGridAdapter.OnItemClickListener() {
@Override
public void onItemClick(Context context, int position) {
// 创建 Intent 并跳转到 DetailActivity
Intent intent = new Intent(context, f1_details.class);
intent.putExtra(“position”, position);
startActivity(intent);
}
});
recyclerView.setAdapter(adapter1);

（2） ImagePagerAdapter

ImagePagerAdapter.java文件

package com.example.myapplication;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class ImagePagerAdapter extends RecyclerView.Adapter<ImagePagerAdapter.ImageViewHolder> {

    private List<Integer> imageResourceIds;

    public ImagePagerAdapter(Fragment1 fragment1, List<Integer> imageResourceIds) {
        this.imageResourceIds = imageResourceIds;
    }

    @NonNull
    @Override
    public ImageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_image, parent, false);
        return new ImageViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ImageViewHolder holder, int position) {
        holder.imageView.setImageResource(imageResourceIds.get(position));
    }

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

    public static class ImageViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;

        public ImageViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imageView);
        }
    }
}

ImagePagerAdapter适配器通过接收一个图像资源ID的列表（List），然后将这些图像资源绑定到 RecyclerView 的每个条目（item）上

（3）StaggeredGridAdapter

package com.example.myapplication;

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

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class StaggeredGridAdapter extends RecyclerView.Adapter<StaggeredGridAdapter.ViewHolder> {
    private Context mContext;
    private List<Integer> mImageResourceIds;
    private OnItemClickListener mOnItemClickListener;


    public interface OnItemClickListener {
        void onItemClick(Context context, int position);
    }

    public void setOnItemClickListener(OnItemClickListener listener) {
        this.mOnItemClickListener = listener;
    }


    public StaggeredGridAdapter(Context context, List<Integer> imageResourceIds) {
        mContext = context;
        mImageResourceIds = imageResourceIds;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.item_staggered_grid, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.imageView.setImageResource(mImageResourceIds.get(position));
        holder.itemView.setOnClickListener(v -> {
            if (mOnItemClickListener != null) {
                mOnItemClickListener.onItemClick(mContext, position);
            }
        });
    }

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

    public static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imageView);
        }
    }
}

StaggeredGridAdapter与上面的ImagePagerAdapter差不多，多了一个点击监听函数（涉及到详情页跳转，后文会专门叙述），这里不赘述。

（4）详情页面跳转

Fragment1.java

StaggeredGridAdapter adapter1 = new StaggeredGridAdapter(getContext(), imageResourceIds);
adapter1.setOnItemClickListener(new

StaggeredGridAdapter.OnItemClickListener() {
@Override
public void onItemClick(Context context, int position) {
// 创建 Intent 并跳转到 DetailActivity
Intent intent = new Intent(context, f1_details.class);
// 如果需要传递位置或其他数据，可以使用 putExtra
intent.putExtra(“position”, position);
startActivity(intent);
}
});

StaggeredGridAdapter.java

private OnItemClickListener mOnItemClickListener;

public interface OnItemClickListener {
void onItemClick(Context context, int position);
}

public void setOnItemClickListener(OnItemClickListener listener) {
this.mOnItemClickListener = listener;
}

f1_details.java（详情页面）

package com.example.myapplication;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
import java.util.Arrays;
import java.util.List;
public class f1_details extends AppCompatActivity {
private ImageView imageView;
private int imageResourceId;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_f1_details); // 确保这个布局文件中有一个ImageView
imageView = findViewById(R.id.f1_imageView); // 替换为您的ImageView的ID
// 从Intent中获取传递的位置
Intent intent = getIntent();
int position = intent.getIntExtra(“position”, -1); // -1是一个默认值，如果传递失败则使用
// 假设您有一个与RecyclerView中相同的图片资源列表
List imageResourceIds = Arrays.asList(
R.drawable.img,
R.drawable.img_1,
R.drawable.p3,
R.drawable.p1,
R.drawable.p2,
R.drawable.p3,
R.drawable.img,
R.drawable.img_1,
R.drawable.p4,
R.drawable.img,
R.drawable.img_1,
R.drawable.p3
);
// 检查位置是否有效，并设置ImageView
if (position >= 0 && position < imageResourceIds.size()) {
imageResourceId = imageResourceIds.get(position);
imageView.setImageResource(imageResourceId);
}
}
}

通过以上代码，即可实现点击瀑布流中的图片跳转到f1_details.java（详情页面）。

四、源码地址

源码地址（gitee）

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了框架的搭建，后续将会对功能进行完善，界面进行美化。

感言

对于编程小白的我来说，之前虽然学习过多种编程语言，也开发过简单的项目，但从来没有像android开发这样让我如此感兴趣的，你输入的每一行代码都能立刻给到你反馈，设计一个UI界面，做好一个功能，虽然过程艰难，但成就感是无限的。这也是我第一次写这么长的blog，虽然花时间而且累，但是我也感觉挺有意思的，收获良多，以后我会多尝试。