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的橫向滾動,實現仿京東秒殺效果
實現GridView的橫向滾動 效果如下圖: 具體實現的程式碼 1. 主介面佈局程式碼:activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and
微信小程式頂部用 scroll-view 元件橫向滾動,類似tab選項卡的效果,
<viewwx:for="{{navDate}}"class="{{curMeal===index ? 'selected-meal':'meal-time-item'}}"data-index="{{index}}"bindtap="selectMeal"data-id="{{item._id}}"&
MVP+Recycleview實現輪播圖實現京東秒殺效果
MVP+Recycleview實現輪播圖,京東秒殺 2018年12月02日 19:55:26 遷就 閱讀數:830 1:先看看效果 2:build.gradle中匯入依賴 //依賴 implementation ‘com.jakewharton:butterkn
仿京東秒殺 倒計時
佈局 <LinearLayout android:gravity="center_vertical" android:layout_width="match_parent" android:layou
Android 使GridView橫向水平滾動的實現方式
Android為我們提供了豎直方向的滾動控制元件GridView,但如果我們想讓它水平滾動起來,就需要自己實現了。 以下使用的測試資料datas集合都為List<ResolveInfo>型別,用來儲存手機中的所有App public
Android多行gridview橫向滑動的實現
關鍵程式碼 /** * 設定GridView的寬度 * * @param defaultColumns 設定列數 4 * @param defaultRows 設定行數 2 */ priv
仿蜜蜂視訊TV實現gridview選中放大,並且放大時彈出底部說明
最近正在做一個機頂盒的專案,仿照蜜蜂視訊TV版做了個VOD。實現了gridview選中放大,並且放大時彈出底部說明。 首先自定義一個girdview: public class VodGridView extends GridView{ private int po
【Android】用RecycleView實現可以橫向滾動的ListView效果
終於閒下來了,總結一下RecycleView的使用。 一、概述 與常見的ListView和GridView一樣,RecycleView也用來在有限的介面上展示大量的資料。它提供了一種插拔式的體驗,高度的解耦,使用非常靈活,可以通過support-v7包進行匯入。先看以下Re
Android中GridView水平滾動和垂直滾動的實現(動態)
經過本人實驗,完美實現水平滾動和垂直滾動。話不多說,先看佈局檔案: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com
jquery實現圖片無縫滾動,蒙版遮蔽效果
1、無縫連線:通過對li設定屬性float:left;消除標籤之間的間隔 2、通過對ul整體進行偏移設定,使圖片整體滾動, 3、設定圖片切換時機, 4、蒙版遮罩移入時機的選擇 程式碼片. <!DOCTYPE html> <html> <head>
Android--使用顯式Intent,實現從登入介面到註冊介面的跳轉
//Activity_abaka.xml --------------註冊介面 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://sch
Android多點觸控技術,實現對圖片的放大縮小平移,慣性滑動等功能
首先推薦一下鴻洋大大的打造個性的圖片預覽與多點觸控視訊教程,這套教程教我們一步一步實現了多點觸控實現對圖片的平移和縮放的功能,這篇文章我將在鴻洋大大的基礎之上做了一些擴充套件功能: 1.圖片的慣性滑動 2.圖片縮放小於正常比例時,鬆手會自動回彈成正常比例
Android-淺談廣播機制,實現強制下線功能
首先,複習一下,什麼是廣播呢? 顧名思義,廣播就像我們上學的時候每個班級裡的喇叭一樣,這些喇叭都是接入到學校的總的一個地方,比如說廣播室啊什麼的。一旦有什麼通知,就會播放一條讓全校師生都知道的廣播。類似的工作機制其實很多,比如就像計算機的網路通訊。 為了便於進行系統級別的訊息通知,Andro
android 自定義ImageView實現圖片手勢滑動,多點觸控放大縮小效果
首先呢,還是一貫作風,我們先來看看眾多應用中的示例:(這種效果是很常見的,可以說應用的必須品.) 搜狐客戶端 百度新聞客戶端
listview實現自動向上滾動,快速滾動,和滾動條的一些設定
1 android:windowSoftInputMode=”adjustResize” 也無法解決問題。 通過部落格,在listview中新增以下三個屬性,可行: 繼承於view and
android TextView 垂直自動滾動字幕實現TextSwitcher
實現功能:用TextSwitcher實現文字自動垂直滾動,類似淘寶首頁廣告條。 實現效果: 注意:由於網上橫向滾動的例子比較多,所以這裡通過垂直的例子演示。 實現步驟:1、extends TextSwitcher implements ViewFactory
原生js實現隨著滾動條滾動,導航會自動切換的效果
最近學習前端,把前面用原生js寫的一段有關tab切換效果的程式碼貼上,實現的效果比較簡陋,請大家見諒 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
recycleview實現title橫向滑動,點選條目居中顯示
首先這種需求常規有兩種做法, 第一種:動態建立TextView 然後放入到LinearLayout,Linearlayout在HorizontalScrollView中; 第二種:就是HorizontalScrollView + GridView; 這裡
android 使用shell command實現對裝置控制,實現按座標點選
目的:實現自動化測試, 方法:使用adb shell命令。 難點,factory無法使用sendkey event 執行, 需要使用sendevent按照座標點選. 雖然是dev下的檔案是裝置,但是實時的資料是在/proc/這個目錄下對應的檔案裡。 解決難點過程,
用css、js實現字幕橫向滾動
最近,在寫電子房價牌頁面時,關於電子房價的提示,需要用到橫向滾動字幕的效果,本文用的是jquery.js的方法來實現的。在網上查閱資料的時候,發現以前會使用<marque>的html標籤來處理,但是,最新的MDN已將該標籤廢棄。一、例項相關情況介紹