【移动应用开发】实验2Android UI

一、实验目的

熟练掌握基于UI控件、布局、Activity等技术的Android APP的界面实现技术，以及基于Android Studio的APP UI实现方法。

二、实验内容

实现显示商品列表的APP界面，如图2-1所示。点击一个商品后，可以显示商品详情。

三、实验要求

1.实现上述的基本功能要求。说明：商品内容可以写在代码中。在此基础上，可以进一步优化界面，也可以进一步添加其他功能。

2.实验报告提交内容：

1）结合系统界面（截图）介绍APP功能；

2）核心实现代码（Java或Kotlin代码）和布局文件等。

四、APP功能

一．显示商品列表，可以下拉上滑。

二．点击所选商品后进入商品详情页，可以浏览商品详情。

三．点击右上角返回键可返回商品列表。

四．商品详情页增添了下边栏，整体更加符合购物商城的样式。

五、核心实现代码

页面布局

Activity_main.xml

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recycler_view"android:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout>

在布局中加入ListView控件。

Goods_item.xml

<ImageViewandroid:id="@+id/goods_image"android:layout_width="150dp"android:layout_height="150dp"/><TextViewandroid: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"/><TextViewandroid: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"/><TextViewandroid: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="/apk/res/android"xmlns:app="/apk/res-auto"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#fff"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:id="@+id/header_xiangqing"android:background="#f9f4f4"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:text="商品详情页"android:textColor="#000"android:textSize="18sp"/><ImageViewandroid: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><TextViewandroid:layout_width="match_parent"android:layout_height="1dp"android:id="@+id/zt"android:background="#979696"android:layout_below="@id/header_xiangqing"/><ImageViewandroid:layout_width="match_parent"android:layout_height="300dp"android:id="@+id/goods_image"android:layout_below="@+id/zt"/><TextViewandroid:layout_width="match_parent"android:layout_height="1dp"android:id="@+id/zt2"android:layout_below="@id/goods_image"android:background="#979696"/><TextViewandroid: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"/><TextViewandroid: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" /><TextViewandroid: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"/><TextViewandroid:layout_width="match_parent"android:layout_height="1dp"android:id="@+id/xian2"android:layout_below="@id/xian1"android:background="#c7c5c5"android:layout_marginTop="47dp"/><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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"/><TextViewandroid: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"/><TextViewandroid: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"/><RelativeLayoutandroid: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"><RadioButtonandroid: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" /><RadioButtonandroid: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" /><RadioButtonandroid: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" /><RadioButtonandroid: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" /><Buttonandroid: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><TextViewandroid: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;}@Overridepublic 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(){@Overridepublic 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;}@Overridepublic 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中}@Overridepublic int getItemCount()//告诉RecyclerView一共多少子项{return mGoodsList.size();}}

MainActivity

public class MainActivity extends AppCompatActivity {private List<Goods> goodsList=new ArrayList<>();@Overrideprotected 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;@Overrideprotected 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(){@Overridepublic 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都类似，都是为了让图片大小适配，故此处省略}}