【移动应用开发】实验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="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"><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都类似，都是为了让图片大小适配，故此处省略}
}

【移动应用开发】实验2Android UI相关推荐

Android技术应用实验指导书,Android应用开发实验指导书
第 1 页手机应用开发实验指导书西南科技大学计算机科学与技术学院2015.11第 2 页目录手机应用开发 .1实验指导书 .1实验一:搭建 Android开发平台和创建 HelloWorld程序 .- ...
Android传感器Motion Sensor开发实验
目录一.实验目的二.实验要求三.实验原理 (一)第一次实验 1.JDK(Java Development Kit) 2.Android SDK 3.AVD(Android Virtual Dev ...
Cocos2d-xna : 横版战略游戏开发实验5 TiledMap实现关卡地图
Cocos2d-xna : 横版战略游戏开发实验5 TiledMap实现关卡地图在前面的几篇中动手实验使用了CCSprite.CCScene.CCLayer.CCAction.CCMenu等coco ...
IOS开发基础之UI基础的团购源码完整版本
IOS开发基础之UI基础的团购源码完整版本 // // ViewController.m // 17-团购案例 // // Created by 鲁军 on 2021/2/4. //#import & ...
IOS开发基础之UI的喜马拉雅的项目-10
IOS开发基础之UI的喜马拉雅的项目-10 // // ViewController.m // 10-喜马拉雅 // // Created by 鲁军 on 2021/2/2. //#import & ...
android实现电话功能实验报告,安卓开发实验报告-20210407005833.docx-原创力文档
文档编制序号:[KKIDT-LLE0828-LLETD298-POI08] 文档编制序号:[KKIDT-LLE0828-LLETD298-POI08] 安卓开发实验报告安卓开发实验报告目录页面跳 ...
linux cached释放_正点原子Linux第四十一章嵌入式Linux LED驱动开发实验
1)资料下载:点击资料即可下载 2)对正点原子Linux感兴趣的同学可以加群讨论:935446741 3)关注正点原子公众号,获取最新资料更新第四十一章嵌入式Linux LED驱动开发实验上一章我 ...
开发实验实训管理系统
湖北襄樊石开网络科技提供专业的学生实验(训)室设备信息管理系统软件等各种实验室信息化管理软件,加强实验(训)室信息化建设,加强了学院管理.定制管理软件首选石开! 开发实验实训管理系统,目的是规范学院的 ...
【正点原子Linux连载】第四十一章嵌入式Linux LED驱动开发实验 -摘自【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.0
1)实验平台:正点原子阿尔法Linux开发板 2)平台购买地址:https://item.taobao.com/item.htm?id=603672744434 2)全套实验源码+手册+视频下载地址: ...

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

【移动应用开发】实验2Android UI相关推荐

最新文章

热门文章