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

一、实验目的
熟练掌握基于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都类似，都是为了让图片大小适配，故此处省略
        }
}