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. 总结
- 一个是属性动画的使用
- gridview的内边距的调整
下面是源码路径
GitHub：https://github.com/githubsmallluo/Gridview01
可以给作者评论，关注加喜欢吗？
如果还存在不懂的地方可以联系一下作者，我会帮忙解答！
QAQ.jpg
