TV GridView中的item的焦点放大

1. 原理分析

一般我们在做获得所有布局的时候，可能需要让焦点放大然后加上焦点框的显示效果，这里除了可以使用GridView来进行实现，Recyclerview也可以做到，我这里在Tools中放了相关的缩放工具类，这里就不做讲解了。
在gridview中的item，想要实现放大的效果，我们可以使用属性动画来做。
这里我们把放大可能造成的一些错误的显示放到后面来讲。

2. 动画

这里我们写一个缩放的动画。

3. GridView的布局

4. item的布局

5. Item的适配器

package com.luo.gridview01.adapter;

import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.luo.gridview01.R;
import com.luo.gridview01.bean.AppBean;

import java.util.List;

/**
 * Created by luo on 2020/4/16.
 * app的适配器
 */

public class AppAdapter extends BaseAdapter {

    private static final String TAG = "AppAdapter";

    private Context mContext;
    private List appList;
    private LayoutInflater mLayoutInflater;
    private int selectid = -1;

    public AppAdapter(Context mContext, List appList) {
        mLayoutInflater = LayoutInflater.from(mContext);
        this.mContext = mContext;
        this.appList = appList;
    }

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

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

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

    //用于setOnItemSelectedListener中调用，赋值当前选择的item的position
    public void notifyDataSetChanged(int id) {
        selectid = id;
        super.notifyDataSetChanged();
    }

    @Override
    public void notifyDataSetChanged() {
        super.notifyDataSetChanged();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        convertView = mLayoutInflater.inflate(R.layout.item_layout, null);
        TextView appName = (TextView) convertView.findViewById(R.id.item_app_name);
        ImageView appIcon = (ImageView) convertView.findViewById(R.id.item_app_icon);
        LinearLayout appLayout = (LinearLayout) convertView.findViewById(R.id.item_app_layout);
        AppBean appBean = appList.get(position);
        appName.setText(appBean.getName());
        appIcon.setImageResource(appBean.getIcon());
        appLayout.setBackground(null);
        if (selectid == position) {
            // 开启动画
            Log.d(TAG, "selectid = " + selectid);
            Animation testAnim = AnimationUtils.loadAnimation(mContext, R.anim.app_scale);
            appLayout.setBackgroundResource(R.drawable.app_item_bg);
            convertView.startAnimation(testAnim);
        }
        return convertView;
    }
}

下面是焦点框的绘制

6. MainActivity的处理

package com.luo.gridview01;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;

import com.luo.gridview01.adapter.AppAdapter;
import com.luo.gridview01.bean.AppBean;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by luo on 2020/4/16.
 *
 */
public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";

    private GridView mGvApp;
    private List appList;
    private AppAdapter appAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initView();
        initListener();
    }

    private void initData() {
        appList = new ArrayList<>();
        for (int i = 0; i < 15; i++) {
            AppBean appBean = new AppBean();
            appBean.setName("name : " + i);
            appBean.setIcon(R.drawable.smile);
            appList.add(appBean);
        }
    }

    private void initView() {
        mGvApp = (GridView) findViewById(R.id.gv_all);
        appAdapter = new AppAdapter(this, appList);
        mGvApp.setAdapter(appAdapter);
    }

    private void initListener() {
        mGvApp.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                Toast.makeText(MainActivity.this, "item = " + position, Toast.LENGTH_SHORT).show();
            }
        });
        mGvApp.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView parent, View view, int position, long id) {
                //对适配器进行刷新
                AppAdapter adapter = (AppAdapter) mGvApp.getAdapter();
                adapter.notifyDataSetChanged(position);
            }

            @Override
            public void onNothingSelected(AdapterView parent) {

            }
        });
    }
}

这里的AppBean 就不在这里列出来。

7.问题

当按照上面的代码进行编译的时候会出现下面图片的情况

image.png

现在我们怎么办呢？
更改GridView的内边距
并且加上下面
android:clipToPadding="false"
下面是更改后的代码

效果图

image.png

这样就达到了放大和焦点框的放大效果。

8. 总结

1. 一个是属性动画的使用
2. gridview的内边距的调整

下面是源码路径
GitHub：https://github.com/githubsmallluo/Gridview01

可以给作者评论，关注加喜欢吗？

如果还存在不懂的地方可以联系一下作者，我会帮忙解答！

QAQ.jpg