1. 程式人生 > >仿蜜蜂視訊TV實現gridview選中放大,並且放大時彈出底部說明

仿蜜蜂視訊TV實現gridview選中放大,並且放大時彈出底部說明

最近正在做一個機頂盒的專案,仿照蜜蜂視訊TV版做了個VOD。實現了gridview選中放大,並且放大時彈出底部說明。

首先自定義一個girdview:

public class VodGridView extends GridView{
    private int position = 0;
    public VodGridView(Context context) {
        super(context);
    }

    public VodGridView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public VodGridView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setCurrentPosition(int pos) {
        // 重新整理adapter前,在activity中呼叫這句傳入當前選中的item在螢幕中的次序
        this.position = pos;
    }

    @SuppressLint("NewApi")
    @Override
    protected void setChildrenDrawingOrderEnabled(boolean enabled) {
        // TODO Auto-generated method stub
        super.setChildrenDrawingOrderEnabled(enabled);
    }

    @Override
    protected int getChildDrawingOrder(int childCount, int i) {
        if (i == childCount - 1) {// 這是最後一個需要重新整理的item
            return position;
        }
        if (i == position) {// 這是原本要在最後一個重新整理的item
            return childCount - 1;
        }
        return i;// 正常次序的item
    }
}
xml佈局:
<view.VodGridView
                    android:id="@+id/vod_list_gridview"
                    android:layout_width="match_parent"
                    android:layout_height="fill_parent"
                    android:layout_marginBottom="19dp"
                    android:numColumns="6"
                    android:verticalSpacing="40dp"
                    android:horizontalSpacing="10dp"
                    android:stretchMode="columnWidth"
                    android:gravity="center"
                    android:cacheColorHint="#00ffffff"
                    android:fadeScrollbars="false"
                    android:scrollbars="none"
                    android:listSelector="#00000000"
                    >
adapter:
public class VodGridviewAdapter extends BaseAdapter{

    private Context context;
    private ArrayList<VodListModel> list;
    private ViewHolder viewHolder;
    /** 圖片載入類 */
    public ImageLoader imageLoader;
    private DisplayImageOptions options;
    
    private Animation scaleBigAnimation;
    /*當前選中item標示*/
    private int selected = -1;
    /*當前gridview是否獲取焦點*/
    private boolean mFocus=false;
    public VodGridviewAdapter(Context context, ArrayList<VodListModel> list) {
        this.context = context;
        this.list = list;
        imageLoader = ImageLoader.getInstance();
        //顯示圖片的配置
        options = new DisplayImageOptions.Builder()
                .showImageOnLoading(R.drawable.downloading_bg)
                .showImageOnFail(R.drawable.downloading_bg)
                .cacheInMemory(true)
                .cacheOnDisk(true)
                .bitmapConfig(Bitmap.Config.RGB_565)
                .displayer(new RoundedBitmapDisplayer(20))
                .build();
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    public void notifyDataSetChanged(int id) {
        selected = id;
        super.notifyDataSetChanged();
    }
    public void setFocus(boolean focus){
        mFocus=focus;
        notifyDataSetChanged();
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        if(convertView==null){
            viewHolder=new ViewHolder();
            convertView= LayoutInflater.from(context).inflate(R.layout.item_vod_gridview,null);
            viewHolder.bottomLin= (LinearLayout) convertView.findViewById(R.id.item_vod_gridview_bottom_lin);
            viewHolder.img= (ImageView) convertView.findViewById(R.id.item_vod_gridview_img);
            viewHolder.name1Txt= (TextView) convertView.findViewById(R.id.item_vod_gridview_name_1_txt);
            viewHolder.nameTxt= (TextView) convertView.findViewById(R.id.item_vod_gridview_name_txt);
            viewHolder.scoreTxt= (TextView) convertView.findViewById(R.id.item_vod_gridview_score_txt);
            viewHolder.timeTxt= (TextView) convertView.findViewById(R.id.item_vod_gridview_time_txt);
            viewHolder.frameImg= (ImageView) convertView.findViewById(R.id.item_vod_gridview_frame_img);
            convertView.setTag(viewHolder);
        }else{
            viewHolder= (ViewHolder) convertView.getTag();
        }

        if(selected==position&&mFocus){//選中當前item並且獲取焦點
            //放大item
            zoomOut(convertView);
            //彈出名稱與時間
            viewHolder.name1Txt.setVisibility(View.GONE);
            viewHolder.bottomLin.setVisibility(View.VISIBLE);
            zoomTop(viewHolder.bottomLin);
        }else{
            //取消所有效果
            convertView.clearAnimation();
            viewHolder.bottomLin.clearAnimation();
            viewHolder.name1Txt.setVisibility(View.VISIBLE);
            viewHolder.bottomLin.setVisibility(View.GONE);
        }
        viewHolder.name1Txt.setText(list.get(position).getTitle());
        viewHolder.timeTxt.setText(list.get(position).getDuration());
        viewHolder.nameTxt.setText(list.get(position).getTitle());
        viewHolder.scoreTxt.setText(list.get(position).getRate());
        imageLoader.displayImage(list.get(position).getLogo(), viewHolder.img,options);

        return convertView;
    }

    private class ViewHolder{
        ImageView img;
        TextView scoreTxt;
        LinearLayout bottomLin;
        TextView name1Txt;
        TextView nameTxt;
        TextView timeTxt;
        ImageView frameImg;
    }

    private void zoomOut(View v) {
        if (scaleBigAnimation == null) {
            scaleBigAnimation = AnimationUtils.loadAnimation(context, R.anim.anim_scale_big);
        }
        v.startAnimation(scaleBigAnimation);
    }

    private void zoomTop(View v){
        Animation topAnimation = AnimationUtils.loadAnimation(context, R.anim.vod_item_bottom_from_top);
        v.startAnimation(topAnimation);
    }
}

Activity內初始化gridview,並對gridview做以下處理:
gridView.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                Log.e("焦點111111",hasFocus+"//");
                vodGridviewAdapter.setFocus(hasFocus);
            }
        });
        gridView.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                Log.e("選中item","///"+position);
                gridView.setCurrentPosition(position);
                vodGridviewAdapter.notifyDataSetChanged(position);
            }

這樣就可以了。

最後附上動畫

anim_scale_big
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:fillBefore="true"
    android:shareInterpolator="false" >

    <scale
        android:duration="100"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50.0%"
        android:pivotY="50.0%"
        android:repeatCount="0"
        android:toXScale="1.05"
        android:toYScale="1.05" />
</set>

vod_item_bottom_from_top
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <translate
        android:fromYDelta="100%"
        android:toYDelta="0"
        android:duration="300"
        />
</set>



相關推薦

仿蜜蜂視訊TV實現gridview選中放大並且放大底部說明

最近正在做一個機頂盒的專案,仿照蜜蜂視訊TV版做了個VOD。實現了gridview選中放大,並且放大時彈出底部說明。 首先自定義一個girdview: public class VodGridView extends GridView{ private int po

實現gridview刪除行確認對話方塊的一種簡單方法

首先,在GridView的屬性對框話框中點選“Columns”進入它的“欄位”設計器。接著在“欄位”設計器中選擇以前已加上的那個CommandField“刪除”列,這時在它的屬性列表下會看到一個“將此它段轉換為 TemplateFied”的項,點選將它轉換為TemplateFied列。完後退出該欄位設計器,切

ztree實現checkbox樹形選單並且父級節點不可選中(只有父級和子級選單);如何獲取選中子節點儲存到資料庫

1.使用ztree首先要匯入ztree的引入檔案(具體看自己需求,需要用ztree拓展功能的需要匯入拓展的js)、及樣式、圖片 注:ztree的樣式檔案必須和圖片檔案在同一級資料夾下 2.檔案引入之後,建立html頁面,樹形結構底層是套,如下圖所示即可

點選某列表介面上的某按鈕時調出來另一個設計項的列表介面選中被調出的列表介面上的值【資料框】能輸入資料的程式碼樣例

//例如:【出庫管理】設計項的列表介面上有一個【出庫】按鈕,點擊出庫按鈕時調出【入庫管理】設計項的列表介面,選中【入庫管理】列表介面上的一條記錄時,彈出輸入框,程式碼樣例如下   function(button, e) { debugger; // 中斷除錯指令,可以手動刪除它

純css實現傾斜tab切換並且加上兩邊圓角

前端開發過程中難免會遇到傾斜的tab設計,並且兩邊要做成圓角效果,如下圖: 我的想法:     1. 給每個tab項設定transform:skew(角度值)實現傾斜效果,但是,此時裡邊內容也會跟著傾斜,所以給內容單獨加一個容器,給該容器重新設定偏轉回去即可;  

基於QoE的實時視訊編碼優化:低功耗低延高質量

在實時通訊領域,只有當Codec的優化適應了當前的網路狀況,裝置平臺及應用場景,使用者才能得到最佳的體驗。在LiveVideoStackCon2018大會中聲網Agora視訊工程師吳曉然詳細介紹瞭如何設計與實現基於QoE的實時視訊編碼優化。本文由LiveVideoSt

【110】Vue2利用父子路由實現標籤頁切換並且支援瀏覽器回退。

用 git clone 克隆下這個專案後,blog110 資料夾裡面就是這篇博文相關的原始碼。專案依賴使用了yarn進行管理。 檔案目錄結構: blog110 │ ├─.babelrc ├─.npmrc ├─index.template.

Android使用BroadCastRecevier廣播實現接收簡訊並利用Toast顯示內容

在上一篇文章 Android簡單實現BroadCastReceiver廣播機制 中簡單的實現了一個廣播機制,這裡利用BroadCarstRecevier實現一個接收簡訊並顯示內容的案例,當然至於接收到簡訊以後是顯示還是做其它的工作都可以由你自己決定了,我現在

ArcGIS 實現框選區域查詢要素後要素點選

      提醒說明:本文用了兩種方法,建議直接看第二種,因為第二種比第一種靠譜簡單;       2015.11.12 在webGis 專案的開發中,當前已經實現使用QueryTask來針對要素進行NAME,空間的查詢之後,並使用Symbol將要素顯示出來在圖上,如下圖所

php實現執行刪除操作確認、取消對話方塊

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table border="1"> @foreach($list

Android定位&地圖&導航——基於百度地圖實現自定義圖示繪製並點選泡泡

public class MainActivity extends Activity { private EditText txtAddr; // 定位相關 LocationClient mLocClient; LocationData locData = nul

laravel實現上傳圖片並且製作縮圖按照日期存放

先上程式碼吧:前端程式碼:有很多小夥伴在做表單上傳檔案的時候沒有注意表單的上傳格式是什麼,就可能導致上傳檔案、圖片不成功!<form id="form1" name="form1" class="form-horizontal form-label-left" enct

css實現熱點地圖map,滑鼠移到熱點層提示框

標籤: <div class="ConDiv"> <img border="0" usemap="#Map" src="images/dt_04.png" />

在點選中結案操作提示

在後臺中新增GridView的 RowCreated事件,如下程式碼: e.Row.Cells[index])表示按鈕在行中的第幾個單元格,填對應的索引號, protected void GVInfo_RowCreated(object sender, GridViewR

Android 實現GridView的橫向滾動實現仿京東秒殺效果

實現GridView的橫向滾動 效果如下圖: 具體實現的程式碼 1. 主介面佈局程式碼:activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and

Stbdroid之GridView+選中動畫放大

關於GridView的文章,已經是多如牛毛。只是在網上找不到需要的效果,故有此文。 //////關鍵的地方就是稍微修改了GridView。其他的程式碼相對簡單,網上有許多 public class

實現GridView長按拖動圖示其餘圖示自動移位的效果(仿webos的note風格)

參考文章 :高仿小米launcher(ZAKER)跨屏拖動item 上述文章是在放在item後,2個位置做一個交換,本文在此基礎上,實現了拖動過程中,其它item自動移位的效果。其實就是修改了一下OnMove動作中的執行動畫過程以及資料重新整理的邏輯,主要還是得益於上述文章

仿淘寶實現滑鼠移入圖片圖片放大功能

<!doctype html><html><head><meta charset="utf-8"><title>無標題文件</title><style>  *{margin: 0;paddin

iOS 關於視訊錄製實現 (仿微信)

專案demo tips:建議參照我的demo進行了解,如果有幫助到你的話請幫我點亮 star, 謝謝啦~ 類似於微信的 點選拍照 , 長按拍視訊的功能. 匯入框架 #import <AVFoundation/AVFoundation.h>