Android通过实现GridView的横向滚动实现仿京东秒杀效果

实现GridView的横向滚动

效果如下图:

具体实现的代码

•1. 主界面布局代码:activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >
  <HorizontalScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp" >
    <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:layout_margin="10dp" >
      <GridView
        android:id="@+id/home_grid"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:numColumns="auto_fit"
        android:stretchMode="spacingWidthUniform" >
      </GridView>
    </LinearLayout>
  </HorizontalScrollView>
</LinearLayout>

•2.主界面GridView列表子项布局文件:item_homepage_hor_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/item_homepage_hor_grid_item"
  android:layout_width="match_parent"
  android:layout_height="186dp"
  android:orientation="vertical">
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:gravity="center"
    android:orientation="vertical"
    >
    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center_horizontal"
      android:orientation="vertical">
      <ImageView
        android:id="@+id/home_page_jrtj_img"
        android:layout_width="125dp"
        android:layout_height="125dp"
        android:scaleType="fitXY"
        android:src="@mipmap/home_jrtj_sp_1" />
    </LinearLayout>
    <TextView
      android:paddingStart="@dimen/space_5dp"
      android:id="@+id/home_page_jrtj_tv_title"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_horizontal"
      android:layout_marginTop="@dimen/space_5dp"
      android:ellipsize="end"
      android:maxLines="2"
      android:text="小米(MI)小米电视4A 标准版 55英寸 HDR 2GB+8GB 四核64位高性能处理器 4K超高清智能语音网络液晶平板电视(L55M5-AZ)"
      android:textColor="#333333"
      android:textSize="11sp" />
    <LinearLayout
      android:paddingStart="@dimen/space_5dp"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center_vertical"
      android:orientation="horizontal"
      android:paddingBottom="@dimen/space_5dp"
      android:paddingTop="@dimen/space_5dp">
      <TextView
        android:id="@+id/home_page_jrtj_tv_price"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="¥4998"
        android:textColor="#f50000"
        android:textSize="@dimen/font_size_15sp" />
      <TextView
        android:id="@+id/home_page_jrtj_tv_huajia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/space_10dp"
        android:layout_marginStart="@dimen/space_5dp"
        android:layout_marginTop="@dimen/space_2dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="¥ 4998"
        android:textColor="#d2d2d2"
        android:textSize="@dimen/font_size_11sp" />
    </LinearLayout>
  </LinearLayout>
</LinearLayout>

•3.  java实现代码:MainActivity.java

首先是Javabean

public class HomePageJrTjTwoBean {
  private int img;
  private String title;
  private String old_price;
  private String price;
  public int getImg() {
    return img;
  }
  public void setImg(int img) {
    this.img = img;
  }
  public String getTitle() {
    return title;
  }
  public void setTitle(String title) {
    this.title = title;
  }
  public String getPrice() {
    return price;
  }
  public void setPrice(String price) {
    this.price = price;
  }
  public String getOld_price() {
    return old_price;
  }
  public void setOld_price(String old_price) {
    this.old_price = old_price;
  }
}

Activity代码

public class MainActivity extends Activity {
  //横向GridView
  @BindView(R.id.home_grid)
  GridView home_grid;
  // 数据源
  private List<homePageJrTjTwoBean> relist = new ArrayList<>();
  private CommonAdapters<homePageJrTjTwoBean> re_adapter = null;
  private List<HomePageJrTjTwoBean> listData_two = new ArrayList<>();
  private int[] jrtj_two = new int[]{R.mipmap.home_jrtj_sp_1, R.mipmap.home_jrtj_sp_2, R.mipmap.home_jrtj_sp_3, R.mipmap.home_jrtj_sp_3, R.mipmap.home_jrtj_sp_3};//今日特价横向数据
  private String[] sp_name = new String[]{"老板(Roba1m)大吸力免 拆洗触控侧吸式...", "老板(Roba1m)大吸力免 拆洗触控侧吸式...", "老板(Roba1m)大吸力免 拆洗触控侧吸式...", "老板(Roba1m)大吸力免 拆洗触控侧吸式...", "老板(Roba1m)大吸力免 拆洗触控侧吸式..."};
  private String[] price = new String[]{"¥5517", "¥5517", "¥5517", "¥5517", "¥5517"};
  private String[] hua_price = new String[]{"¥8888", "¥8888", "¥8888", "¥8888", "¥8888"};
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //自己造的假数据,实际开发中从后台获取,再去刷新Grid的适配器,调用 re_adapter.notifyDataSetChanged();
     for (int i = 0; i < jrtj_two.length; i++) {
      HomePageJrTjTwoBean homePageJrTjTwoBean = new HomePageJrTjTwoBean();
      homePageJrTjTwoBean.setImg(jrtj_two[i]);
      homePageJrTjTwoBean.setTitle(sp_name[i]);
      homePageJrTjTwoBean.setPrice(price[i]);
      homePageJrTjTwoBean.setOld_price(hua_price[i]);
      listData_two.add(homePageJrTjTwoBean);
    }
    //初始化横向的GridView
    initHorGridView();
  }
  private void initHorGridView() {
    int listSize = relist.size();
    int wm = TUtil.getScreenWidth(getActivity());
    int itemWidth = DisplayUtil.dip2px(getActivity(), 120);
    int horizontalSpacing = DisplayUtil.dip2px(getActivity(), 10);
    int allWidth = (int) ((listSize) * (itemWidth + horizontalSpacing));
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(allWidth,
      LinearLayout.LayoutParams.WRAP_CONTENT);
    homepage_hor_grid.setLayoutParams(params);
    homepage_hor_grid.setColumnWidth(itemWidth);
    homepage_hor_grid.setNumColumns(listSize);
    homepage_hor_grid.setHorizontalSpacing(1);
    re_adapter = new CommonAdapters<QgitemBean>(getActivity(), relist, R.layout.item_homepage_hor_grid) {
      @Override
      public void convert(ViewHolders holder, QgitemBean datas) {
       //商品图片
      ImageView home_page_jrtj_img = holder.getView(R.id.home_page_jrtj_img);
      //商品标题
      TextView home_page_jrtj_tv_title = holder.getView(R.id.home_page_jrtj_tv_title);
      //商品价格
      TextView home_page_jrtj_tv_price = holder.getView(R.id.home_page_jrtj_tv_price);
      //商品划价
      TextView home_page_jrtj_tv_huajia = holder.getView(R.id.home_page_jrtj_tv_huajia);
      home_page_jrtj_tv_huajia.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);//设置划价
      home_page_jrtj_img.setImageResource(datas.getImg());
      home_page_jrtj_tv_title.setText(datas.getTitle());
      home_page_jrtj_tv_price.setText(datas.getPrice());
      home_page_jrtj_tv_huajia.setText(datas.getOld_price());
      }
    };
    home_grid.setAdapter(re_adapter);
  }
}

适配器

public abstract class CommonAdapters<T> extends BaseAdapter {
  protected Context mContext;
  protected List<T> mDatas;
  protected LayoutInflater mInflater;
  protected int layoutId;
  private int mCurPosition = 0;
  public int getCurPosition() {
    return mCurPosition;
  }
  public void setCurPosition(int mCurPosition) {
    this.mCurPosition = mCurPosition;
  }
  public CommonAdapters(Context context, List<T> datas, int layoutId)
  {
    this.mContext = context;
    mInflater = LayoutInflater.from(context);
    this.mDatas = datas;
    this.layoutId = layoutId;
  }
  public CommonAdapters(Context mContext, T xx, int item_home_list_in) {
    this.mContext = mContext;
    mInflater = LayoutInflater.from(mContext);
    this.mDatas = (List<T>) xx;
    this.layoutId = item_home_list_in;
  }
  public void upDataList(List<T> datas)
  {
    if (null == datas)
      return;
    if (mDatas != datas) {
      mDatas.clear();
      mDatas.addAll(datas);
    }
    notifyDataSetChanged();
  }
  @Override
  public int getCount()
  {
    if (null == mDatas)
      return 0;
    return mDatas.size();
  }
  @Override
  public T getItem(int position)
  {
    return mDatas.get(position);
  }
  @Override
  public long getItemId(int position)
  {
    return position;
  }
  @Override
  public View getView(int position, View convertView, ViewGroup parent)
  {
    ViewHolders holder = ViewHolders.get(mContext, convertView, parent,
        layoutId, position);
    convert(holder, getItem(position));
    return holder.getConvertView();
  }
  public abstract void convert(ViewHolders holder, T datas);
}

总结

以上所述是小编给大家介绍的Android通过实现GridView的横向滚动实现仿京东秒杀效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android实现京东秒杀界面

    本文实例为大家分享了Android实现京东秒杀界面展示的具体代码,供大家参考,具体内容如下 效果图: 京东秒杀是两个小时一个场次,判断本机的时间进行场次定时,然后在这两个小时里面进行倒计时. MainActivity package com.bwie.com.myapplication; import android.os.Handler; import android.os.Message; import android.support.v7.app.AppCompatActivity; im

  • Android开发必备:秒杀真机超快模拟器Genymotion介绍

    第一,这货速度太快,第二,模仿真机环境,第三,秒杀任何Android模拟器包括真机,不多说上图,我忒忙! 官网: http://www.genymotion.com/ 镜像图片可以创建多个模拟器 关键是有一切Google的服务,在Google眼里就是一个真机 骚年不知道外界的Android,已经发生了翻天覆地的变化!

  • Android 仿京东秒杀倒计时代码

    效果图如下所示: 由于我仿的京东是分模块的,所以,这次主要描述秒杀模块! 首先设置好时间的背景 drawable文件下创建shape_miaosha_time.xml <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectang

  • Android定时器和倒计时实现淘宝秒杀功能

    本文实例为大家分享了Android实现淘宝秒杀的具体代码,供大家参考,具体内容如下 目录结构 效果图: imageViewHolder public class imageViewHolder extends RecyclerView.ViewHolder { public ImageView imageView; public imageViewHolder(View itemView) { super(itemView); imageView = (ImageView) itemView;

  • Android仿京东首页秒杀倒计时

    本文实例为大家分享了Android仿京东首页秒杀倒计时的具体代码,供大家参考,具体内容如下 xml配置 <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#FFFFFF" android:orientation="vertical"> <Linea

  • Android通过实现GridView的横向滚动实现仿京东秒杀效果

    实现GridView的横向滚动 效果如下图: 具体实现的代码 •1. 主界面布局代码:activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent"

  • Android使用GridView实现横向滚动效果

    本文实例为大家分享了Android使用GridView实现横向滚动效果的具体代码,供大家参考,具体内容如下 第一次做横向滑动,看了一些列子,基本就2总:HorizontalListView和GridView.考虑的了下选择用比较熟的GridView,并且在2种方案都使用过,根据本人实际情况,采用了更适合的GridView. 也希望看过这篇博客的大神们,能指点下HorizontalListView和GridView两个方案的优缺点. 思路: XML界面:用HorizontalScrollView

  • Android使用Gridview单行横向滚动显示

    本文实例为大家分享了Android使用Gridview单行横向滚动显示的具体代码,供大家参考,具体内容如下 要想实现滚动显示,layout布局里必须要使用HorizontalScrollView,才能实现横向滑动,但HorizontalScrollView标签里要嵌套一个LinearLayout布局 activity_main.xml,如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu

  • Android使用Scroll+Fragment仿京东分类效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 实现思路:首先说下布局,整个是一个横向的线性布局,左边是一个ScrollView,右边是一个FrameLayout,在代码中动态向ScrollView中添加TextView,然后根据TextView的点击事件使用Fragment替换FrameLayout 首先看下布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andr

  • Android仿京东分类效果

    本文实例为大家分享了Android仿京东分类效果展示的具体代码,供大家参考,具体内容如下 1.写一个fragment import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;

  • Android仿京东手机端类别页

    京东手机端的类别标签页, 是一个左侧滑动可选择类别, 右侧一个类别明细的列表联动页面. 当用户选择左侧选项, 可在右侧显示更多选项来选择. 实现方式也不少. 最常见的当然是左侧和右侧各一个Fragment, 左侧Fragment放置ListView, 右侧放显示类别明细的Fragment. 如果觉得页面包含的Fragment太多, 左侧直接给一个ListView就可以了.不影响效果. 效果图: 例子中值得注意的三点: 左侧列表点击某个Item可以自动上下滑动,使所点击的item自动移至列表中间

  • Android仿京东分类模块左侧分类条目效果

    本文实例为大家分享了Android仿京东左侧分类条目效果的具体代码,供大家参考,具体内容如下 import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.LinearLayout; import android.widget.ScrollView; import android.widget.TextView; import com.frame.R;

  • 用Android实现京东秒杀功能详解

    首先看效果图: 京东秒杀是两个小时一个场次,我们获取到场次后,通过场次+两个小时后,获取到最终的时间,拿最终时间的时间戳,与当前时间时间戳相减,求得剩余的小时,分钟,秒数,即可实现倒计时功能! 具体代码实现如下: 1.布局页面activity_seckill.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.andr

  • Android开发实现横向列表GridView横向滚动的方法【附源码下载】

    本文实例讲述了Android开发实现横向列表GridView横向滚动的方法.分享给大家供大家参考,具体如下: Android 横向列表实现,可左右滑动,如下图 1. 主界面布局代码:activity_main.xml a.包裹HorizontalScrollView控件是GirdView横向滚动的基本条件 b.GirdView外包裹LinearLayout是java代码中参数设置的必要条件 <?xml version="1.0" encoding="utf-8"

随机推荐