Android实现商品展示效果

一、 创建手机界面布局

创建一个activity_main.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:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.example.bz0209.shopshowdemo.activity_main"
 android:orientation="vertical">
 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content">

 <EditText
 android:id="@+id/etName"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:hint="商品名称"
 android:inputType="text"
 android:layout_weight="1"
 />
 <EditText
 android:id="@+id/etAmount"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:hint="商品金额"
 android:inputType="number"
 android:layout_weight="1"
 />
 <ImageView
 android:id="@+id/ivAdd"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:onClick="addGoods"
 android:inputType="text"
 android:src="@android:drawable/ic_input_add"
 />
 </LinearLayout>
 <ListView
 android:id="@+id/lvGoods"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 </ListView>
</LinearLayout>

效果图如下:

二、创建一个存储展示的xml文件

创建一个名为item.xml的布局文件,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <TextView
 android:text="1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/tvId"
 android:textSize="20sp"
 android:layout_weight="2"

 />
 <TextView
 android:text="商品名称"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/tvName"
 android:textSize="20sp"
 android:layout_weight="2"

 />
 <TextView
 android:text="金额"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/tvAmount"
 android:textSize="20sp"
 android:layout_weight="2"
 />
 <ImageView
  android:id="@+id/ivUP"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@android:drawable/arrow_up_float"
  />
 <ImageView
  android:id="@+id/ivDown"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@android:drawable/arrow_down_float"
  />
 <ImageView
  android:id="@+id/ivDelete"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@android:drawable/arrow_down_float"
  />
</LinearLayout>

三、创建数据库

在com.example.bz0209.shopshowdemo 的包下创建一个名为db的包,并在该包下定义一个dbHelper类继承自SQLiteOpenHelper,创建数据库代码如下:

package com.example.bz0209.shopshowdemo.db;

import android.content.Context;

import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;

/**
 * Created by Administrator on 2017/4/28.
 */

public class DBHelper extends SQLiteOpenHelper{
 public static final String CREATE_GOODS="create table goods(_id integer primary key autoincrement,name varchar(20),amount integer)";
 public DBHelper(Context context,int version){
 super(context,"goods.db",null,version);
 }
 @Override
 public void onCreate(SQLiteDatabase db) {
 db.execSQL(CREATE_GOODS);
 }

 @Override
 public void onUpgrade(SQLiteDatabase db,int oldVersion,int newVersion) {
 }
}

四、创建GoodsAdapter类

为了操作数据库方便,创建一个GoodsAdapter类。因此需要在com.example.bz0209.shopshowdemo 的包下创建一个名为entity的包,然后在com.example.bz0209.shopshowdemo.entityd的包下定义一个GoodsAdapter类,代码如下:

package com.example.bz0209.shopshowdemo;

import android.content.Context;
import android.support.annotation.NonNull;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.bz0209.shopshowdemo.entity.Goods;

import java.util.List;

/**
 * Created by Administrator on 2017/4/27.
 */

public class GoodsAdapter extends ArrayAdapter<Goods>{
 private int resounceId;

 public GoodsAdapter(Context context, int resource, List<Goods> objects) {
 super(context, resource, objects);
 resounceId=resource;
 }

 @NonNull
 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
 Goods goods=getItem(position);
 View view=null;
 ViewHolder viewHolder;
 if (convertView==null){
  view = LayoutInflater.from(getContext()).inflate(resounceId,null);
  viewHolder =new ViewHolder();
  viewHolder.tvId=(TextView) view.findViewById(R.id.tvId);
  viewHolder.tvName=(TextView) view.findViewById(R.id.tvName);
  viewHolder.tvAmount=(TextView) view.findViewById(R.id.etAmount);
  viewHolder.ivUp=(ImageView) view.findViewById(R.id.ivUP);
  viewHolder.ivDown=(ImageView) view.findViewById(R.id.ivDown);
  viewHolder.ivDelete=(ImageView) view.findViewById(R.id.ivDelete);
  view.setTag(viewHolder);
 }else {
  view=convertView;
  viewHolder=(ViewHolder) view.getTag();
 }
 viewHolder.tvId.setText(goods.getId()+"");
 viewHolder.tvName.setText(goods.getName());
 viewHolder.tvAmount.setText(goods.getAmount()+"");

 return view;
 }
 class ViewHolder{
 TextView tvId;
 TextView tvName;
 TextView tvAmount;
 ImageView ivUp;
 ImageView ivDown;
 ImageView ivDelete;
 }
}

五、创建数据操作逻辑类

在com.example.bz0209.shopshowdemo 的包下创建一个名为dao的包,并创建一个名为GoodsDao的类,用于操作数据。代码如下:

public class GoodsDao {
 private DBHelper dbHelper;

 public GoodsDao(Context context){
 dbHelper=new DBHelper(context,1);
 }

 public void add(Goods goods){
 SQLiteDatabase sqLiteDatabase=dbHelper.getWritableDatabase();
 ContentValues values=new ContentValues();
 values.put("name",goods.getName());
 values.put("amount",goods.getAmount());
 sqLiteDatabase.insert("goods",null,values);
 sqLiteDatabase.close();

 }
 public int delete(long id){
 SQLiteDatabase sqLiteDatabase=dbHelper.getWritableDatabase();
 int count=sqLiteDatabase.delete("goods","id=?",new String[]{id+""});
 sqLiteDatabase.close();
 return count;

 }
 public int update(Goods goods){
 SQLiteDatabase sqLiteDatabase=dbHelper.getWritableDatabase();
 ContentValues values=new ContentValues();
 values.put("name",goods.getName());
 values.put("amount",goods.getAmount());
 int count=sqLiteDatabase.update("goods",values,"id=?",new String[]{goods.getId()+""});
 sqLiteDatabase.close();
 return count;
 }
 public List<Goods> queryAll(){
 List<Goods>goodsList=new ArrayList<>();
 SQLiteDatabase sqLiteDatabase=dbHelper.getReadableDatabase();
 Cursor cursor=sqLiteDatabase.query("goods",null,null,null,null,null,"amount desc");
 while (cursor.moveToNext()){
  long id=cursor.getLong(cursor.getColumnIndex("_id"));
  String name=cursor.getString(cursor.getColumnIndex("name"));
  int amount=cursor.getInt(cursor.getColumnIndex("amount"));
  Goods goods=new Goods(name,amount);
  goodsList.add(goods);
 }
 cursor.close();
 sqLiteDatabase.close();
 return goodsList;
 }

}

六、编写界面交互代码

数据库操作完成后,需要界面与数据库进行交互,用于实现将数据库中的数据以ListView的形式展现在界面上具体代码如下:

package com.example.bz0209.shopshowdemo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.ListView;
import com.example.bz0209.shopshowdemo.dao.GoodsDao;
import com.example.bz0209.shopshowdemo.entity.Goods;
import java.util.List;
public class activity_main extends AppCompatActivity {
 private EditText etName;
 private EditText etAmount;
 private ListView lvGoods;
 private GoodsAdapter goodsAdapter;
 private GoodsDao goodsDao;
 private List<Goods>goodsList;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 etName=(EditText)findViewById(R.id.etName);
 etAmount=(EditText)findViewById(R.id.etAmount);
 lvGoods=(ListView)findViewById(R.id.lvGoods);
 goodsDao=new GoodsDao(this);
 goodsList=goodsDao.queryAll();
 goodsAdapter=new GoodsAdapter(this,R.layout.item,goodsList);
 lvGoods.setAdapter(goodsAdapter);
 }
 public void addGoods(View view){
 String name=etName.getText().toString();
 String amount=etAmount.getText().toString();
 Goods goods=new Goods(name,amount.equals("")?0:Integer.parseInt(amount));
 goodsDao.add(goods);

 }
}

七、完成后的结果展示

(1)创建起数据库的图为:

(2)最后的运行结果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android仿京东、天猫商品详情页

    前言 前面在介绍控件TabLayout控件和CoordinatorLayout使用的时候说了下实现京东.天猫详情页面的效果,今天要说的是优化版,是我们线上实现的效果,首先看一张效果: 项目结构分析 首先我们来分析一下要实现上面的效果,我们需要怎么做.顶部是一个可以滑动切换Tab,可以用ViewPager+Fragment实现,也可以使用系统的TabLayout控件实现:而下面的 View是一个可以滑动拖动效果的View,可以采用网上一个叫做DragLayout的控件,我这里是自己实现了一个,主要

  • Android仿淘宝商品浏览界面图片滚动效果

    用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个ScrollView滚动到最底下时会有提示,继续拖动才能浏览图片.仿照这个效果写一个出来并不难,只要定义一个Layout管理两个ScrollView就行了,当第一个ScrollView滑到底部时,再次向上滑动进入第二个ScrollView.效果如下: 需要注意的地方是: 1.如果是手动滑到底部需要再次按下才能继续往下滑,自动滚动到底部则不需要 2.在由上一个ScrollView滑动到下一个ScrollView的过程中多只手指相继拖动也不会导

  • Android仿淘宝切换商品列表布局效果的示例代码

    最近电商项目中有这样一个需求,就是在进入商品列表界面,有一个按钮可以切换商品列表的布局(网格或者垂直列表排列). 效果图: 上面两幅图分别是点击右上角按钮后显示两种不同布局的效果.简单的流程可以概括为:第一次进入页面,有个默认的布局(网格布局),点击按钮,由网格布局切换到竖直的线性布局,再次点击切换到网格布局. 分析: 可以看到商品展示的形式都是以列表的方式来展现,我用的是RecyclerView,这种列表并不复杂,配合Adapter数据适配器就实现了. 提出这个需求时,问了朋友,他说使用了两个

  • Android 仿淘宝商品属性标签页

    需求 1.动态加载属性,如尺码,颜色,款式等 由于每件商品的属性是不确定的,有的商品的属性是颜色和尺码,有的是口味,有的是大小,所以这些属性不能直接写死到页面上. 2.动态加载属性下的标签 每个属性下的标签个数也不是一定的,比如有的商品的尺码是是S,M,XL,有的是均码,也就是每种属性的具体的内容是不一定的. 技术点 自定义ViewGroup,使其中的TextView可以依据内容长短自动换行,如下图所示 实现 布局 通过ListView来显示商品所有属性,每种属性作为ListView的Item.

  • Android 仿京东、拼多多商品分类页的示例代码

    最近接了一个项目,要仿照京东写一个商品分类页,但需要滑动右边子分类,左边的主分类也跟着变换,写了个demo,需要的同学可以自取. 先放一个写完之后的样子: 写这个需求的思路也很清晰,首先左边肯定是一个listView,右边也是一个listView,这两个listView要达到一个联动的效果.右边的listView再嵌套一个GridView即可.如下图所示. 所以,我们需要的数据结构也就确定了,应该是数组套数组,也就说护肤大分类下又有子分类商品,类似于这个样子: ok,数据和UI结构确定了,就可以

  • 安卓(android)仿电商app商品详情页按钮浮动效果

    1.效果图如下: 这效果用户体验还是很酷炫,今天我们就来讲解如何实现这个效果. 2.分析 为了方便理解,作图分析 如图所示,整个页面分为四个部分: 1.悬浮内容,floatView 2.顶部内容,headView 3.中间内容,与悬浮内容相同,middleView 4.商品详情展示页面,detailView 因为页面内容高度会超出屏幕,所以用Scrollview实现滚动,悬浮view与scrollview同级,都在一个帧布局或者相对布局中. 当y方向的滚动距离小于中间的内容middleView到

  • Android实现商品展示效果

    一. 创建手机界面布局 创建一个activity_main.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" androi

  • Android ListView弹性效果的实现方法

    关于在Android中实现ListView的弹性效果,有很多不同的方法,网上一搜,也有很多,下面贴出在项目中经常用到的两种实现ListView弹性效果的方法(基本上拿来就可以用),供大家参考: 第一种比较简单,好容易理解,只是动态改变了ListView在Y轴上的可移动距离,代码如下: import android.content.Context; import android.util.AttributeSet; import android.util.DisplayMetrics; impor

  • Android实现动画效果详解

    目前Android平台提供了两类动画一类是Tween动画,第二类就是 Frame动画,具体内容介绍请看下文: 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转.平移.放缩和渐变). 第二类就是 Frame动画,即顺序的播放事先做好的图像,与gif图片原理类似. 实现动画有两种方式:一种使用XML文件(文件放在res/anim),一种直接代码搞定  1.透明度控制动画效果alpha <!-- 透明度控制动画效果alpha 浮点型值: fromAlpha 动画起始时透明

  • Android卫星菜单效果的实现方法

    Android小白第一次写博客,心情无比激动.下面给大家展示一下卫星菜单的实现. 1.简单介绍卫星菜单 在应用程序中,有很多展示菜单的方式,但其功能都是大同小异,这样一来,菜单的美观以及展示方式就显的尤为重要,卫星菜单就是很不错的一种.下面是本案例的gif图: 2.学习本案例需要的知识点 (1)动画 (2)自定义ViewGroup (3)自定义属性 a.attr.xml b.在布局中使用自定义属性 c.在代码中获取自定义属性值 3.首先分析我们的卫星菜单需要那些自定义属性并书写代码 首先,菜单可

  • Android编程滑动效果之Gallery仿图像集浏览实现方法

    本文实例讲述了Android编程滑动效果之Gallery仿图像集浏览实现方法.分享给大家供大家参考,具体如下: Android系统自带一个Gallery浏览图片的应用,通过手指拖动时能够非常流畅的显示图片,用户交互和体验都很好. 本示例就是通过Gallery和自定义的View,模仿实现一个仿Gallery图像集的图片浏览效果.效果图如下: 1.基本原理 在 Activity 中实现 OnGestureListener 的接口 onFling() 手势事件,通过自定义的 View 绘制draw()

  • Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效

    今年春节晚会没看尽兴,被支付宝集福给添了一段插曲,朋友们都在那数定时间段不停的咻一咻,哇,我咻到一个敬业福,不可能的,哈哈.那么咻一咻功能基于程序代码是怎么实现的呢?下面我们小编给大家分享本教程帮助大家学习Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效,具体内容如下所示: 先来看看这个效果 这是我的在Only上添加的效果,说实话,Only现在都还只是半成品,台面都上不了,怪自己技术不行,也太懒了 PS:这个view也是我模仿了人家的效果,参考了人家的思路写的,不是纯手撸,罪过罪过

  • Android Menu半透明效果的开发实例

    不知道大家是否用过天天动听,对于它界面上的半透明Menu效果,笔者感觉非常漂亮.下面是天天动听半透明Menu的截图,欣赏下吧: 感觉还不错吧?那么如何实现这种半透明Menu效果呢?本文就重点讨论并给出这种Menu的具体代码实现过程. 首先分析下实现这种半透明Menu所需做的工作,并进行合理分解: 1.  利用Shaper设置一个半透明圆角背景. 2.  定义Menu布局,主要就GridView,把图标都放在这个GridView. 3.  Menu事件, 通过PopupWindow或者AlertD

  • Android 吸入动画效果实现分解

    Android 吸入动画效果详解 .  这里,我要介绍的是如何在Android上面实现一个类似的效果.先看看我实现的效果图.  上图演示了动画的某几帧,其中从1 - 4,演示了图片从原始图形吸入到一个点(红色标识). 实现这样的效果,我们利用了Canvas.drawBitmapMesh()方法,这里涉及到了一个Mesh的概念. 2,Mesh的概念 Mesh表示网格,说得通俗一点,可以将画板想像成一张格子布,在这个张布上绘制图片.对于一个网格端点均匀分布的网格来说,横向有meshWidth + 1

  • Android编程滑动效果之Gallery+GridView实现图片预览功能(附demo源码下载)

    本文实例讲述了Android编程滑动效果之Gallery+GridView实现图片预览功能.分享给大家供大家参考,具体如下: Android系统自带一个GridView和Gallery两个控件,GridView网格显示,Gallery单个浏览,两者结合起来可以真正实现Gallery浏览图片效果. 本示例通过GridView和Gallery两个控件,模仿实现一个完整的仿Gallery图像集的图片浏览效果.效果图如下: 1.GridView 首先,自定义一个GridImageAdapter图片适配器

  • Android编程滑动效果之倒影效果实现方法(附demo源码下载)

    本文实例讲述了Android编程滑动效果之倒影效果实现方法.分享给大家供大家参考,具体如下: 前面介绍了使用<Android编程实现3D滑动旋转效果的方法>,现在介绍图片倒影实现,先看效果图 这里主要通过自定义Gallery和ImageAdapter(继承自BaseAdapter)实现 1.倒影绘制 ImageAdapter继承自BaseAdapter,详细实现可见前面关于Android Gallery的用法.这里重点介绍倒影原理及实现 倒影原理: 倒影效果是主要由原图+间距+倒影三部分组成,

随机推荐