美文网首页
TV GridView中的item的焦点放大

TV GridView中的item的焦点放大

作者: 不吃鱼的猫_992d | 来源:发表于2020-04-16 21:44 被阅读0次

1. 原理分析

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

2. 动画

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.15"
        android:fromYScale="1.0"
        android:toYScale="1.15"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="300"
        />
</set>

3. GridView的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#000000"
    android:layout_height="match_parent"
    tools:context="com.luo.gridview01.MainActivity">

    <GridView
        android:id="@+id/gv_all"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnWidth="@dimen/y253"
        android:listSelector="@android:color/transparent"
        android:numColumns="6"
        android:paddingBottom="@dimen/y20"
        android:paddingEnd="@dimen/y20"
        android:paddingLeft="@dimen/y50"
        android:paddingRight="@dimen/y46"
        android:paddingTop="@dimen/x19">
    </GridView>
</RelativeLayout>

4. item的布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/item_app_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:descendantFocusability="blocksDescendants"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginTop="@dimen/y10"
            android:layout_weight="1"
            android:gravity="center" >

            <ImageView
                android:id="@+id/item_app_icon"
                android:layout_width="@dimen/x85"
                android:layout_height="@dimen/x85" />
        </LinearLayout>

        <!-- 下面textview处理了当文字过长的时候,用跑马灯的形式滚动文字 -->
        <TextView
            android:id="@+id/item_app_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/y8"
            android:layout_marginTop="@dimen/y8"
            android:ellipsize="marquee"
            android:focusable="true"
            android:gravity="center"
            android:marqueeRepeatLimit="marquee_forever"
            android:singleLine="true"
            android:textColor="#ffffff"
            android:textSize="@dimen/x22" />
    </LinearLayout>

</RelativeLayout>

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<AppBean> appList;
    private LayoutInflater mLayoutInflater;
    private int selectid = -1;

    public AppAdapter(Context mContext, List<AppBean> 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;
    }
}

下面是焦点框的绘制

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <stroke
        android:width="@dimen/x4"
        android:color="#ffffff" />
    <corners android:radius="@dimen/x12" />
</shape>

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<AppBean> 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"
下面是更改后的代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#000000"
    android:layout_height="match_parent"
    tools:context="com.luo.gridview01.MainActivity">

    <GridView
        android:id="@+id/gv_all"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnWidth="@dimen/y253"
        android:listSelector="@android:color/transparent"
        android:numColumns="6"
        android:clipToPadding="false"
        android:verticalSpacing="@dimen/x20"
        android:paddingBottom="@dimen/y40"
        android:paddingLeft="@dimen/y80"
        android:paddingRight="@dimen/y80"
        android:paddingTop="@dimen/y50">
    </GridView>

效果图


image.png

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

8. 总结

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

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

可以给作者评论,关注加喜欢吗?

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

QAQ.jpg

相关文章

网友评论

      本文标题:TV GridView中的item的焦点放大

      本文链接:https://www.haomeiwen.com/subject/udndvhtx.html