详谈自定义View之GridView单选 金额选择Layout-ChooseMoneyLayout

思路:

外层控件用的是GridView,里面每个item放一个FrameLayout,FrameLayout里面有Checkbox和ImageView,chechBox添加background实现选中效果,选中背景为透明,显示item的勾勾图标,不选中checkbox就有背景,挡住选中的勾勾。。重写GridView,实现监听和数据适配,用一个接口返回选中的数据。

代码:

ChooseMoneyLayout.java

public class ChooseMoneyLayout extends GridView {

  private int[] moneyList = {};  //数据源

  private LayoutInflater mInflater; 

  private MyAdapter adapter;  //适配器

  int defaultChoose = 0;   //默认选中项

  public ChooseMoneyLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
    setData();
  }

  public void setData() {
    mInflater = LayoutInflater.from(getContext());
    //配置适配器
    adapter = new MyAdapter();
    setAdapter(adapter);
  }

  /**
   * 设置默认选择项目,
   * @param defaultChoose
   */
  public void setDefaultPositon(int defaultChoose) {
    this.defaultChoose = defaultChoose;
    adapter.notifyDataSetChanged();
  }

  /**
   * 设置数据源
   * @param moneyData
   */
  public void setMoneyData(int[] moneyData){
    this.moneyList = moneyData;
  }

  class MyAdapter extends BaseAdapter {

    private CheckBox checkBox;

    @Override
    public int getCount() {
      return moneyList.length;
    }

    @Override
    public Object getItem(int position) {
      return moneyList[position];
    }

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

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
      MyViewHolder holder;
      if (convertView == null) {
        holder = new MyViewHolder();
        convertView = mInflater.inflate(R.layout.item_money_pay, parent, false);
        holder.moneyPayCb = (CheckBox) convertView.findViewById(R.id.money_pay_cb);
        convertView.setTag(holder);
      } else {
        holder = (MyViewHolder) convertView.getTag();
      }

      holder.moneyPayCb.setText(getItem(position) + "元");

      holder.moneyPayCb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
          if (isChecked) {
            //设置选中文字颜色
            buttonView.setTextColor(getResources().getColor(R.color.light_color_blue));

            //取消上一个选择
            if (checkBox != null) {
              checkBox.setChecked(false);
            }
            checkBox = (CheckBox) buttonView;
          } else {
            checkBox = null;
            //设置不选中文字颜色
            buttonView.setTextColor(getResources().getColor(R.color.darkgray));
          }
          //回调
          listener.chooseMoney(position, isChecked, (Integer) getItem(position));
        }
      });

      if (position == defaultChoose) {
        defaultChoose = -1;
        holder.moneyPayCb.setChecked(true);
        checkBox = holder.moneyPayCb;
      }

      return convertView;
    }

    private class MyViewHolder {
      private CheckBox moneyPayCb;
    }
  }

  /**
   * 解决嵌套显示不完
   * @param widthMeasureSpec
   * @param heightMeasureSpec
   */
  @Override
  public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
        MeasureSpec.AT_MOST);
    super.onMeasure(widthMeasureSpec, expandSpec);
  }

  private onChoseMoneyListener listener;

  public void setOnChoseMoneyListener(onChoseMoneyListener listener) {
    this.listener = listener;
  }

  public interface onChoseMoneyListener {
    /**
     * 选择金额返回
     *
     * @param position gridView的位置
     * @param isCheck 是否选中
     * @param moneyNum 钱数
     */
    void chooseMoney(int position, boolean isCheck, int moneyNum);
  }
}

item_money_pay.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="80dp"
  android:descendantFocusability="blocksDescendants">

<!-- 选中时候的图片 -->
  <ImageView
    android:layout_width="15dp"
    android:layout_height="15dp"
    android:layout_gravity="right|bottom"
    android:layout_marginBottom="3dp"
    android:layout_marginRight="3dp"
    android:maxHeight="9dp"
    android:maxWidth="9dp"
    android:scaleType="fitCenter"
    android:src="@drawable/money_pay_type_choose" />

  <CheckBox
    android:id="@+id/money_pay_cb"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:background="@drawable/money_pay_selector"
    android:button="@null"
    android:gravity="center"
    android:paddingBottom="2.5dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:paddingTop="2.5dp"
    android:textSize="20sp"
    android:textColor="#ff777777"
    />

</FrameLayout>

CheckBox的background: money_pay_selector.xml

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

  <item android:state_pressed="true" android:drawable="@drawable/blue_border_noback_drawable"/>
  <item android:state_selected="true" android:drawable="@drawable/blue_border_noback_drawable"/>
  <item android:state_checked="true" android:drawable="@drawable/blue_border_noback_drawable"/>

  <item >

    <shape>
      <solid android:color="#ffffffff"/>
      <corners android:radius="5dp"/>
      <stroke android:color="#ffbfbfbf"
        android:width="1dp"/>
    </shape>

  </item>

</selector>

activity xml:

<com.minstone.view.ChooseMoneyLayout
      android:id="@+id/money_chose_money"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="10dp"
      android:horizontalSpacing="17dp"
      android:numColumns="3"
      android:verticalSpacing="20dp" />

activity里面代码:

private ChooseMoneyLayout moneyChoseMoney;
  private int money; //当前选择的金额

  private void initData() {
    //获取控件
    moneyChoseMoney = (ChooseMoneyLayout)findViewById(R.id.money_chose_money);
    //数设置据源
    moneyChoseMoney.setMoneyData(new int[]{30, 50, 100, 200, 300, 500,1000});
    //设置默认选中项
    moneyChoseMoney.setDefaultPositon(3);
    //金额选择监听
    moneyChoseMoney.setOnChoseMoneyListener(new ChooseMoneyLayout.onChoseMoneyListener() {
      @Override
      public void chooseMoney(int position,boolean isCheck, int moneyNum) {
        if(isCheck){
          money = moneyNum;
          ToastUtil.showCustomToast(PayActivity.this,money+"");
        }else{
          money = 0;
        }
      }
    });

  }

以上这篇详谈自定义View之GridView单选 金额选择Layout-ChooseMoneyLayout就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Android利用GridView实现单选功能

    先看看GridView实现单选效果 如果是你需要的,你可以继续往下看了 实现起来比较简单,直接上代码 主Activity的布局,一个Button用来跳转到筛选Activity一个TextView用来显示筛选后的到的结果 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/androi

  • Android利用GridView实现单选效果

    1.实现如图所示的单选效果 由于Android提供的单选按钮radiobutton只能单行或单列显示,且样式并不美观,故可用GridView进行改造,实现单选效果,而要实现这样的效果重点就在GridView的适配器这块了. 首先是GridView的item的XML: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical&

  • 详谈自定义View之GridView单选 金额选择Layout-ChooseMoneyLayout

    思路: 外层控件用的是GridView,里面每个item放一个FrameLayout,FrameLayout里面有Checkbox和ImageView,chechBox添加background实现选中效果,选中背景为透明,显示item的勾勾图标,不选中checkbox就有背景,挡住选中的勾勾..重写GridView,实现监听和数据适配,用一个接口返回选中的数据. 代码: ChooseMoneyLayout.java public class ChooseMoneyLayout extends G

  • Android自定义View实现左右滑动选择出生年份

    自定义view的第三篇,模仿的是微博运动界面的个人出生日期设置view,先看看我的效果图: 支持设置初始年份,左右滑动选择出生年份,对应的TextView的值也会改变.这个动画效果弄了好久,感觉还是比较生硬,与微博那个还是有点区别.大家有改进的方案,欢迎一起交流. 自定义View四部曲,这里依旧是这个套路,看看怎么实现的. 1.自定义view的属性: 在res/values/ 下建立一个attrs.xml , 在里面定义我们的属性以及声明我们的整个样式. <?xml version="1.

  • Kotlin自定义View系列教程之标尺控件(选择身高、体重等)的实现

    前言 本篇文章讲的是Kotlin 自定义view之实现标尺控件Ruler,以选择身高.体重等.开发中,当我们需要获取用户的身高和体重等信息时,如果直接让他们输入,显然体验不够好.像类似于唯品会.好轻等APP都是使用了类似于刻度尺的控件让用户滑动选择身高体重,觉得很棒.网上已有人使用Java语言实现这样的功能,但不影响我对其的学习.和往常一样,主要还是想总结一下自定义view之实现标尺控件的开发过程以及一些需要注意的地方. 按照惯例,我们先来看看效果图 一.先总结下自定义View的步骤: 1.自定

  • Android自定义view实现滚动选择控件详解

    目录 前言 需求 编写代码 主要问题 前言 上篇文章通过一个有header和footer的滚动控件(Viewgroup)学了下MeasureSpec.onMeasure以及onLayout,接下来就用一个滚动选择的控件(View)来学一下onDraw的使用,并且了解下在XML自定义控件参数. 需求 这里就是一个滚动选择文字的控件,还是挺常见的,之前用别人的,现在选择手撕一个,核心思想如下: 1.有三层不同大小及透明度的选项,选中项放在中间 2.接受一个列表的数据,静态时显示三个值,滚动时显示四个

  • Android自定义View仿支付宝输入六位密码功能

    跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义view布局效果图及代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android自定义View绘制四位数随机码

    现在有这样一个需求,实现显示随机随机数可能在代码中直接很简单的就实现了,但是现在我们直接自定义View来实现这个效果,那么我们来分析一波吧,我们允许开发者自己设置这个textview的大小,颜色,和初始四位随机数的文字,那么我们需要提供自定义属性,好吧,首先把自定义属性的简单使用介绍一下吧: 首先在res/values文件夹下建利attrs.xml文件,由于这次我们功能决定我们要提供三个自定义属性,分别是textTitle String类型的,textColor是color类型的,textSiz

  • Android自定义View实现照片裁剪框与照片裁剪功能

    本文所需要实现的就是这样一种有逼格的效果: 右上角加了个图片框,按下确定可以裁剪正方形区域里的图片并显示在右上角. 实现思路: 1:首先需要自定义一个ZoomImageView来显示我们需要的图片,这个View需要让图片能够以合适的位置展现在当前布局的图片展示区域内(合适的位置值的是:如果图片长度大于屏幕,则压缩图片长度至屏幕宽度,高度等比压缩并居中显示,如果图片高度大于屏幕,则压缩图片高度至屏幕高度,长度等比压缩并居中显示.): 2:然后需要实现这个拖动的框框,该框框实现的功能有四点:拖动.扩

  • Android App开发中自定义View和ViewGroup的实例教程

    View Android所有的控件都是View或者View的子类,它其实表示的就是屏幕上的一块矩形区域,用一个Rect来表示,left,top表示View相对于它的parent View的起点,width,height表示View自己的宽高,通过这4个字段就能确定View在屏幕上的位置,确定位置后就可以开始绘制View的内容了. View绘制过程 View的绘制可以分为下面三个过程: Measure View会先做一次测量,算出自己需要占用多大的面积.View的Measure过程给我们暴露了一个

  • Android自定义View播放Gif动画的示例

    前言 GIF是一种很常见的动态图片格式,在Android中它的使用场景非常多,大到启动页动画.小到一个Loading展示,都可以用GIF动画来完成,使用也很方便,直接从美工那边拿过来用就成.如果项目赶时间或者自定义原生动画太麻烦,GIF都是一个很好的选择,相比于最新的WEBP格式的动画,也有更好的兼容性(毕竟已经出现很多年了). 关于图片加载我一直用的是Google推荐的 Glide,图片加载和缓存都做的很好,同样也支持GIF动画.不过Glide默认就是循环播放Gif,没有开放相关的接口来控制G

  • Android自定义View实现通讯录字母索引(仿微信通讯录)

    一.效果:我们看到很多软件的通讯录在右侧都有一个字母索引功能,像微信,小米通讯录,QQ,还有美团选择地区等等.这里我截了一张美团选择城市的图片来看看: 我们今天就来实现图片中右侧模块的索引功能,包括触摸显示以选中的索引字母.这里我的UI界面主要是参照微信的界面来实现,所以各位也可以对照微信来看看效果,什么都不说了,只有效果图最具有说服力! 二.分析: 我们看到这样的效果我们心理都回去琢磨,他是如何实现的: 首先,它肯定是通过自定义 View 来实现的,因为 Android 没有提供类似这样的控件

随机推荐