Android GridView实现价格单选功能（动画效果）

使用GridView实现单选功能的一个简单效果，其中item出现带有动画效果：

 

比较简单，直接看代码实现：

1.主函数代码：

/**
 * 我的钱包-水晶充值
 * 作者：sgf
 *
 */
public class CrystalRechargeActivity extends BaseActivity {
    @BindView(R.id.title_right_text)
    TextView titleRightText;
    @BindView(R.id.title_right_img)
    ImageView titleRightImg;
    @BindView(R.id.title_name_text)
    TextView titleNameText;
    @BindView(R.id.edit)
    ImageView edit;
    @BindView(R.id.ll_title_left_view)
    LinearLayout llTitleLeftView;
    @BindView(R.id.titleview)
    RelativeLayout titleview;
    @BindView(R.id.gridView_crytal_recharge)
    GridView gridView_crytal_recharge;
    @BindView(R.id.tv_crystal_balance)
    TextView tv_crystal_balance;
    @BindView(R.id.bt_purchase)
    Button bt_purchase;
    private Context context;
    private List<CrystalPriceBean> mList;
    private SingleGridViewAdapter mAdapter;
    int selectorPosition = 0;
    private String[] crystalPrice;//排序ietm对应文字

    @Override
    public int getLayout() {
        return R.layout.activity_crystal_recharge;
    }

    @Override
    public void OnActCreate(Bundle savedInstanceState) {
        ButterKnife.bind(this);
        setTitle(getResources().getString(R.string.recharge));
        context = CrystalRechargeActivity.this;
        initDta();
    }

    private void initDta() {
        crystalPrice = new String[]{"5","10","30","50","100","500"};
        //添加数据
        mList = new ArrayList<>();
        for (int i = 0; i < crystalPrice.length; i++) {
            mList.add(new CrystalPriceBean(crystalPrice[i],crystalPrice[i]));
        }
        mAdapter = new SingleGridViewAdapter(this, mList);
        gridView_crytal_recharge.setAdapter(mAdapter);
        //gridView的点击事件
        gridView_crytal_recharge.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                //把点击的position传递到adapter里面去
                mAdapter.changeState(position);
                selectorPosition = position;
//                if(position == 0){
//
//                }else if(position == 1){
//
//                }else if(position == 2){
//
//                }else if(position == 3){
//
//                }else if(position == 4){
//                    T.showShort("500");
//                }else if(position == 5){
//                    T.showShort("500");
//                }
                T.showShort(crystalPrice[position]);
            }
        });
    }


    @OnClick({R.id.bt_purchase})
    public void onViewClicked(View view) {
        switch (view.getId()) {
            case R.id.bt_purchase:
//                StartActivityManager.startWebViewNewActivity(this,getString(R.string.official_website),"http://pbase.io");
                break;
        }
    }
    @Override
    protected void onResume() {
        super.onResume();
        MobclickAgent.onPageStart(PageNameConstant.PageName_AboutUsActivity);
        MobclickAgent.onResume(this);
    }

    @Override
    protected void onPause() {
        super.onPause();
        MobclickAgent.onPageEnd(PageNameConstant.PageName_AboutUsActivity);
        MobclickAgent.onPause(this);
    }
    /**
     * button的点击监听
     *
     * @param view
     */
    public void buttonFinish(View view) {
        Intent intent = new Intent();
        intent.putExtra("pos", "第 " + selectorPosition + " 个");
        setResult(999, intent);
        finish();
    }
}

2.适配器：

import android.content.Context;
import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.BaseAdapter;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.iruiyou.pet.R;
import com.iruiyou.pet.bean.CrystalPriceBean;
import com.iruiyou.pet.utils.Constant;

import java.util.List;

/**
 * 水晶充值价格单选
 * sgf
 */
public class SingleGridViewAdapter extends BaseAdapter {

    private Context mContext;
    private List<CrystalPriceBean> mList;
    private int selectorPosition;
    private int num = 0;

    public SingleGridViewAdapter(Context context, List<CrystalPriceBean> mList) {
        this.mContext = context;
        this.mList = mList;

    }

    @Override
    public int getCount() {
        return mList != null ? mList.size() : 0;
    }

    @Override
    public Object getItem(int position) {
        return mList != null ? mList.get(position) : null;
    }

    @Override
    public long getItemId(int position) {
        return mList != null ? position : 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        convertView = View.inflate(mContext, R.layout.item_gridview, null);
        RelativeLayout mRelativeLayout = convertView.findViewById(R.id.ll);
        TextView tv_crystal_price = convertView.findViewById(R.id.tv_crystal_price);
        TextView tv_rmb_price = convertView.findViewById(R.id.tv_rmb_price);
        tv_crystal_price.setText(mList.get(position).getCrystalPrice() + mContext.getString(R.string.crystal));
        tv_rmb_price.setText(Constant.CURRENY2 + mList.get(position).getRmbPrice());
        //如果当前的position等于传过来点击的position,就去改变他的状态
        if (selectorPosition == position) {
            mRelativeLayout.setBackgroundResource(R.drawable.crystal_blue_shape);
            tv_crystal_price.setTextColor(Color.parseColor("#72c6ae"));
            tv_rmb_price.setTextColor(Color.parseColor("#72c6ae"));
        } else {
            //其他的恢复原来的状态
            mRelativeLayout.setBackgroundResource(R.drawable.power_gray_shape);
            tv_crystal_price.setTextColor(Color.parseColor("#666666"));
            tv_rmb_price.setTextColor(Color.parseColor("#666666"));
        }
        //添加GridView从右到左平移动画
        if (num == 0) {
            convertView.setVisibility(View.INVISIBLE);
            int count = 3 - position % 3;
            final TranslateAnimation translateAnimation = new TranslateAnimation(
                    Animation.RELATIVE_TO_SELF,
                    count,
                    Animation.RELATIVE_TO_SELF,
                    0,
                    Animation.RELATIVE_TO_SELF,
                    0,
                    Animation.RELATIVE_TO_SELF,
                    0);
            translateAnimation.setDuration(count * 100);
//   final Animation animation = AnimationUtils.loadAnimation(parent.getContext(), R.anim.slide_in_right);
            final View finalConvertView = convertView;
            convertView.postDelayed(new Runnable() {
                @Override
                public void run() {
                    finalConvertView.startAnimation(translateAnimation);
                }
            }, position * 200);
            translateAnimation.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                    finalConvertView.setVisibility(View.VISIBLE);
                }

                @Override
                public void onAnimationEnd(Animation animation) {
//                if (position == mList.size() - 1) {
//                    translateAnimation.cancel();
//                }
                    num =1;
                }

                @Override
                public void onAnimationRepeat(Animation animation) {

                }
            });
            translateAnimation.cancel();
        }
        return convertView;
    }


    public void changeState(int pos) {
        selectorPosition = pos;
        notifyDataSetChanged();

    }
}

3.相关布局：

activity_crystal_recharge.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical">

    <include layout="@layout/title_lay"></include>

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:background="@color/white"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv_crystal_balance"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:gravity="center"
            android:text="0"
            android:textColor="@color/_333333"
            android:textSize="43sp"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_marginBottom="20dp"
            android:layout_marginTop="5dp"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/pbs_icon"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="@string/crystal_balance"
                android:textColor="@color/_666666"
                android:textSize="13sp"/>
        </LinearLayout>
    </LinearLayout>

    <GridView
        android:id="@+id/gridView_crytal_recharge"
        android:layout_below="@+id/button"
        android:background="@color/white"
        android:layout_width="match_parent"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_height="wrap_content"
        android:columnWidth="100dp"
        android:horizontalSpacing="5dp"
        android:verticalSpacing="10dp"
        android:numColumns="2"/>

    <Button
        android:id="@+id/bt_purchase"
        android:layout_gravity="center"
        android:textSize="13sp"
        android:background="@drawable/bg_blue_corner"
        android:text="@string/purchase"
        android:textColor="@color/white"
        android:layout_marginTop="60dp"
        android:layout_marginRight="15dp"
        android:layout_marginLeft="15dp"
        android:layout_width="match_parent"
        android:layout_height="35dp" />
</LinearLayout>

item_gridview.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:id="@+id/ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="5dp"
        android:background="@drawable/crystal_blue_shape">

        <TextView
            android:layout_marginTop="10dp"
            android:id="@+id/tv_rmb_price"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:ellipsize="none"
            android:gravity="center"
            android:maxLength="7"
            android:singleLine="true"
            android:text="KING"
            android:textColor="@color/_666666"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/tv_crystal_price"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_rmb_price"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="3dp"
            android:ellipsize="none"
            android:gravity="center"
            android:maxLength="7"
            android:layout_marginBottom="10dp"
            android:singleLine="true"
            android:text="KING"
            android:textColor="@color/_666666"
            android:textSize="10sp" />
    </RelativeLayout>
</RelativeLayout>

4.相关背景色：

crystal_blue_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="1dp"
        android:color="@color/_72c6ae" />
    <solid android:color="#ffffff" />
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
    <corners android:radius="5dp" />
</shape>

power_gray_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="1dp"
        android:color="#d8d8d8" />
    <solid android:color="#ffffff" />
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
    <corners android:radius="5dp" />
</shape>

title_lay.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/titleview"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:animateLayoutChanges="true"
    android:background="@color/white"
    android:gravity="center_vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_alignParentBottom="true">
        <!--右侧保存按钮或其他图片-->
        <LinearLayout
            android:id="@+id/llTvBg"
            android:layout_width="50dp"
            android:visibility="gone"
            android:orientation="vertical"
            android:layout_alignParentRight="true"
            android:layout_centerInParent="true"
            android:layout_marginRight="15dp"
            android:background="@drawable/bg_blue_corner"
            android:gravity="center"
            android:layout_height="26dp">
            <TextView
                android:id="@+id/title_right_text"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:clickable="true"
                android:text="保存"
                android:textColor="@color/white"
                android:textSize="13sp" />
        </LinearLayout>


        <ImageView
            android:id="@+id/title_right_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="15dp"
            android:scaleType="centerInside"
            android:visibility="visible" />

        <!--中间标题-->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_gravity="center"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/title_name_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:background="@android:color/transparent"
                    android:ellipsize="end"
                    android:maxWidth="240dp"
                    android:singleLine="true"
                    android:text="title"
                    android:textColor="#000"
                    android:textSize="17dp"
                    android:textStyle="bold" />

                <ImageView
                    android:id="@+id/edit"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="5dp"
                    android:src="@drawable/bianji"
                    android:visibility="gone" />
            </LinearLayout>
            <!--中间输入框-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:layout_gravity="center"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="10dp"
                android:background="@drawable/bg_edit"
                android:gravity="center"
                android:orientation="horizontal"
                android:visibility="gone">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@null"
                    android:hint="请输入分类"
                    android:paddingLeft="15dp"
                    android:textColor="#333333"
                    android:textSize="14sp" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginRight="10dp"
                    android:src="@drawable/shanchu" />
            </LinearLayout>

        </FrameLayout>

        <!--左侧返回-->
        <LinearLayout
            android:id="@+id/ll_title_left_view"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerVertical="true"
            android:orientation="horizontal">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/transparent">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:layout_marginLeft="15dp"
                    android:background="@drawable/back_balck" />
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/layout_head"
        android:layout_width="match_parent"
        android:layout_height="48dip"
        android:visibility="gone"
        android:background="@color/de_title_bg"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_left"
            android:layout_width="48dp"
            android:layout_height="match_parent"
            android:background="@drawable/selector_btn_back"
            android:drawableLeft="@drawable/ac_back_icon"
            android:gravity="center_vertical"
            android:onClick="onHeadLeftButtonClick"
            android:textColor="@drawable/selector_btn_top" />

        <View
            android:layout_width="1dp"
            android:layout_height="24dp"
            android:layout_marginBottom="12dp"
            android:layout_marginTop="12dp"
            android:background="#0083e0" />


        <TextView
            android:id="@+id/tv_title"
            android:gravity="center_vertical|left"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:maxLength="20"
            android:layout_marginLeft="12dp"
            android:maxLines="1"
            android:textColor="@color/white"
            android:textSize="18sp" />

        <Button
            android:id="@+id/btn_right"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="15dp"
            android:background="@null"
            android:onClick="onHeadRightButtonClick"
            android:maxLines="1"
            android:textColor="@drawable/selector_btn_top" />

        <TextView
            android:id="@+id/text_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="15dp"
            android:clickable="true"
            android:maxLines="1"
            android:textColor="#fff"
            android:textSize="18sp"
            android:visibility="gone" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:id="@+id/titleLine"
        android:layout_alignParentBottom="true"
        android:background="#f1f1f1"></View>

</RelativeLayout>

5.实体类：

CrystalPriceBean

package com.iruiyou.pet.bean;

/**
 * 作者：sgf
 * 水晶价格
 */
public class CrystalPriceBean {

    private String rmbPrice;
    private String crystalPrice;

    public CrystalPriceBean(String rmbPrice, String crystalPrice) {
        this.rmbPrice = rmbPrice;
        this.crystalPrice = crystalPrice;
    }

    public String getRmbPrice() {
        return rmbPrice;
    }

    public void setRmbPrice(String rmbPrice) {
        this.rmbPrice = rmbPrice;
    }

    public String getCrystalPrice() {
        return crystalPrice;
    }

    public void setCrystalPrice(String crystalPrice) {
        this.crystalPrice = crystalPrice;
    }
}

5.相关代码：

public static final String CURRENY = "≈¥";//currency
    public static final String CURRENY2 = "¥";//currency

以上是完整代码，请放心使用。