一、实验目的
熟练掌握基于UI控件、布局、Activity等技术的Android APP的界面实现技术,以及基于Android Studio的APP UI实现方法。
二、实验内容
实现显示商品列表的APP界面,如图2-1所示。点击一个商品后,可以显示商品详情。
三、实验要求
1.实现上述的基本功能要求。说明:商品内容可以写在代码中。在此基础上,可以进一步优化界面,也可以进一步添加其他功能。
2.实验报告提交内容:
1)结合系统界面(截图)介绍APP功能;
2)核心实现代码(Java或Kotlin代码)和布局文件等。
四、APP功能
一.显示商品列表,可以下拉上滑。
二.点击所选商品后进入商品详情页,可以浏览商品详情。
三.点击右上角返回键可返回商品列表。
四.商品详情页增添了下边栏,整体更加符合购物商城的样式。
五、核心实现代码
页面布局
Activity_main.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
在布局中加入ListView控件。
Goods_item.xml
<ImageView
android:id="@+id/goods_image"
android:layout_width="150dp"
android:layout_height="150dp"/>
<TextView
android:id="@+id/goods_name"
android:layout_gravity="center_vertical"
android:layout_marginLeft="40dp"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/goods_price"
android:layout_gravity="center_vertical"
android:layout_marginLeft="30dp"
android:textSize="20dp"
android:textColor="#FF5809"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_gravity="center_vertical"
android:layout_marginLeft="3dp"
android:textSize="20dp"
android:text="元"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
定制ListView的界面
details_page.xml(商品详情界面)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/header_xiangqing"
android:background="#f9f4f4"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="商品详情页"
android:textColor="#000"
android:textSize="18sp"
/>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:id="@+id/back_icons"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
/>
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:id="@+id/zt"
android:background="#979696"
android:layout_below="@id/header_xiangqing"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:id="@+id/goods_image"
android:layout_below="@+id/zt"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:id="@+id/zt2"
android:layout_below="@id/goods_image"
android:background="#979696"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/goods_name"
android:layout_below="@id/zt2"
android:textColor="#000"
android:textSize="20sp"
android:layout_marginTop="9dp"
android:layout_marginLeft="8dp"
android:layout_alignParentStart="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/goods_price"
android:textColor="#f00"
android:textSize="22sp"
android:layout_marginTop="9dp"
android:layout_marginLeft="8dp"
android:layout_below="@+id/goods_name"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:id="@+id/xian1"
android:layout_below="@id/goods_price"
android:background="#c7c5c5"
android:layout_marginTop="8dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:id="@+id/xian2"
android:layout_below="@id/xian1"
android:background="#c7c5c5"
android:layout_marginTop="47dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/bai"
android:text="白条"
android:layout_below="@+id/xian1"
android:layout_alignStart="@+id/goods_price"
android:layout_marginTop="15dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/bai_text"
android:textColor="#000"
android:text="【白条支付】首单立减5元(优惠以登录后为准)"
android:layout_marginStart="18dp"
android:layout_alignBaseline="@+id/bai"
android:layout_alignBottom="@+id/bai"
android:layout_toEndOf="@+id/bai" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ling"
android:text="店铺"
android:layout_below="@id/xian2"
android:layout_marginTop="12dp"
android:layout_marginLeft="7dp"
/>
<TextView
android:layout_width="100dp"
android:layout_height="40dp"
android:id="@+id/shop_name"
android:layout_toRightOf="@id/ling"
android:textSize="20sp"
android:layout_marginTop="12dp"
android:layout_marginLeft="7dp"
android:layout_below="@id/xian2"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:id="@+id/xian3"
android:layout_below="@id/shop_name"
android:background="#c7c5c5"
android:layout_marginTop="5dp"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/button_btn_xiangqing"
android:background="#fff"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true">
<RadioButton
android:layout_width="70dp"
android:layout_height="match_parent"
android:text="购物车"
android:button="@null"
android:id="@+id/add_cars_icons"
android:drawableTop="@drawable/add_cars_icons"
android:layout_alignParentTop="true"
android:gravity="center"
android:textSize="11sp"
android:layout_toStartOf="@+id/add_cars" />
<RadioButton
android:layout_width="70dp"
android:layout_height="match_parent"
android:text="关注"
android:id="@+id/guans"
android:button="@null"
android:textSize="11sp"
android:drawableTop="@drawable/guans"
android:layout_alignParentTop="true"
android:gravity="center"
android:layout_toStartOf="@+id/add_cars_icons" />
<RadioButton
android:layout_width="70dp"
android:layout_height="match_parent"
android:text="店铺"
android:id="@+id/shopbutton"
android:textSize="11sp"
android:button="@null"
android:drawableTop="@drawable/shopbutton"
android:layout_alignParentTop="true"
android:gravity="center"
android:layout_toStartOf="@+id/guans" />
<RadioButton
android:layout_width="70dp"
android:layout_height="match_parent"
android:text="联系卖家"
android:id="@+id/kefus"
android:textSize="11sp"
android:button="@null"
android:drawableTop="@drawable/kefus"
android:layout_alignParentTop="true"
android:gravity="center"
android:layout_toStartOf="@+id/shopbutton" />
<Button
android:layout_width="120dp"
android:layout_height="match_parent"
android:id="@+id/add_cars"
android:layout_alignParentRight="true"
android:background="#f00"
android:text="加入购物车"
android:textColor="#fff"
android:gravity="center"
android:textSize="16sp"
/>
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="2dp"
android:id="@+id/kong_xiangqing"
android:layout_above="@id/button_btn_xiangqing"
android:background="#b9b8b8"
/>
</RelativeLayout>
代码部分
Goods(实体类)
public class Goods {
private int imageId;
private String name;
private double price;
private String shop;
public Goods(String name, int imageId,double price,String shop)
{
this.name=name;
this.imageId=imageId;
this.price=price;
this.shop=shop;
}
public String getName()
{
return name;
}
public int getImageId()
{
return imageId;
}
public double getPrice()
{
return price;
}
public String getShop(){return shop;}
}
GoodsAdapter(适配器)
public class GoodsAdapter extends RecyclerView.Adapter<GoodsAdapter.ViewHolder> {
private List<Goods> mGoodsList;
static class ViewHolder extends RecyclerView.ViewHolder
{
ImageView GoodsImage;
TextView GoodsName;
TextView GoodsPrice;
View GoodsView;
public ViewHolder(View view)//view为RecyclerView子项的最外层布局
{
super(view);
GoodsView=view;
GoodsImage=(ImageView) view.findViewById(R.id.goods_image);
GoodsName=(TextView) view.findViewById(R.id.goods_name);
GoodsPrice=(TextView) view.findViewById(R.id.goods_price);
}
}
public GoodsAdapter(List< Goods> GoodsList)//把要展示的数据源传进来,赋值给全局变量mGoodsList
{
mGoodsList= GoodsList;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent,int viewType)//创建ViewHolder实例,并把加载出来的布局传入构造函数,最后将该实例返回
{
View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.goods_item,parent,false);
final ViewHolder holder=new ViewHolder(view);
holder.GoodsView.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v)//点击处理,将需要传递的数据通过putExtra传递给新活动
{
int position=holder.getAdapterPosition();
Goods Goods=mGoodsList.get(position);
Intent intent=new Intent(v.getContext(),DetailsPage.class);
intent.putExtra("goods_image",Goods.getImageId());
intent.putExtra("goods_name",Goods.getName());
intent.putExtra("goods_price",Goods.getPrice());
intent.putExtra("shop_name",Goods.getShop());
v.getContext().startActivity(intent);
}
});
return holder;
}
@Override
public void onBindViewHolder(ViewHolder holder,int position)//对RecuclerView子项的数据进行赋值,会在每个子项被滚动到屏幕内执行
{
Goods Goods=mGoodsList.get(position);//通过position获得当前项的实例
holder.GoodsImage.setImageResource(Goods.getImageId());
holder.GoodsName.setText(Goods.getName());
holder.GoodsPrice.setText(String.valueOf(Goods.getPrice()));
//把数据设置到ViewHolder中
}
@Override
public int getItemCount()//告诉RecyclerView一共多少子项
{
return mGoodsList.size();
}
}
MainActivity
public class MainActivity extends AppCompatActivity {
private List<Goods> goodsList=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initgoods();//初始化,此处省略代码,主要为给goods赋值
RecyclerView recyclerView=(RecyclerView)findViewById(R.id.recycler_view);//获取RecuclerView实例
LinearLayoutManager layoutManager=new LinearLayoutManager(this);//指定RecuclerView布局方式
recyclerView.setLayoutManager(layoutManager);
GoodsAdapter adapter=new GoodsAdapter(goodsList);创建GoodsAdapter实例并将数据传入
recyclerView.setAdapter(adapter);//完成适配器设置
}
private void initgoods()
{
初始化,此处略
}
}
DetailsPage
public class DetailsPage extends AppCompatActivity {
private TextView textViewname;
private TextView textViewprice;
private TextView textViewshop;
private ImageView imageView;
private ImageView back_icons;
private int back_pic=R.mipmap.back_icons;
private RadioButton addcar;
private RadioButton shopbutton;
private RadioButton guanzhu;
private RadioButton kefus;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.details_page);
//getIntExtra获得GoodsAdapter传过来的数据
Intent intent = getIntent();
int goodsImage = intent.getIntExtra("goods_image",0);
String goodsName = intent.getStringExtra("goods_name");
double goodsPrice=intent.getDoubleExtra("goods_price",0.00);
String shopName = intent.getStringExtra("shop_name");
initView();//主要为findViewById和对下边栏的图片
//在details_page显示商品详细信息
back_icons.setImageResource(back_pic);
imageView.setImageResource(goodsImage);
textViewname.setText(goodsName);
Log.d(goodsName, "goodName");
textViewprice.setText(String.valueOf(goodsPrice));
textViewshop.setText(shopName);
back_icons.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v)
{
finish();
}
});
}
private void initView() {
back_icons = (ImageView) findViewById(R.id.back_icons);
imageView =(ImageView) findViewById(R.id.goods_image);
textViewname = (TextView) findViewById(R.id.goods_name);
textViewprice = (TextView) findViewById(R.id.goods_price);
textViewshop = (TextView) findViewById(R.id.shop_name);
addcar = (RadioButton) findViewById(R.id.add_cars_icons);
Drawable drawableaddcar = getResources().getDrawable(R.drawable.add_cars_icons);
drawableaddcar.setBounds(0, 0, 69, 69);//第一0是距左右边距离,第二0是距上下边距离,第三69长度,第四宽度
addcar.setCompoundDrawables(null, drawableaddcar, null, null);//只放上面
//剩余guanzhu、shopbutton和kefus都类似,都是为了让图片大小适配,故此处省略
}
}