仿蜜蜂视频TV实现gridview选中放大，并且放大时弹出底部说明

本文链接：https://blog.youkuaiyun.com/youlongno1/article/details/52387577

最近正在做一个机顶盒的项目，仿照蜜蜂视频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>