欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-02 14:32:58
自定义view的第三篇,模仿的是微博运动界面的个人出生日期设置view,先看看我的效果图: 支持设置初始年份,左右滑动选择出生年份,对应的textview的值也...

自定义view的第三篇,模仿的是微博运动界面的个人出生日期设置view,先看看我的效果图:

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

支持设置初始年份,左右滑动选择出生年份,对应的textview的值也会改变。这个动画效果弄了好久,感觉还是比较生硬,与微博那个还是有点区别。大家有改进的方案,欢迎一起交流。

自定义view四部曲,这里依旧是这个套路,看看怎么实现的。

1.自定义view的属性:
在res/values/ 下建立一个attrs.xml , 在里面定义我们的属性以及声明我们的整个样式。

<?xml version="1.0" encoding="utf-8"?>
<resources>
 //自定义属性名,定义公共属性
 <attr name="titlesize" format="dimension"></attr>
 <attr name="titletext" format="string"></attr>
 <attr name="titlecolor" format="color"></attr>
 <attr name="outcirclecolor" format="color"></attr>
 <attr name="incirclecolor" format="color"></attr>
 <attr name="linecolor" format="color"></attr>

 <declare-styleable name="myscrollview">
  <attr name="titlesize"></attr>
  <attr name="titlecolor"></attr>
  <attr name="linecolor"></attr>
 </declare-styleable>

</resources>

依次定义了字体大小,字体颜色,线的颜色3个属性,format是值该属性的取值类型。
然后就是在布局文件中申明我们的自定义view:

 <textview
  android:id="@+id/year_txt"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_margin="30dp"
  android:text="出生年份 (年)"
  android:textsize="20dp" />

 <com.example.tangyangkai.myview.myscrollview
  android:id="@+id/scroll_view"
  android:layout_width="match_parent"
  android:layout_height="70dp"
  myscroll:linecolor="@color/font_text"
  myscroll:titlecolor="@color/strong"
  myscroll:titlesize="30dp">
 </com.example.tangyangkai.myview.myscrollview>

自定义view的属性我们可以自己进行设置,记得最后要引入我们的命名空间,
xmlns:app=”http://schemas.android.com/apk/res-auto”

2.获取自定义view的属性:

 public myscrollview(context context) {
  this(context, null);
 }

 public myscrollview(context context, attributeset attrs) {
  this(context, attrs, 0);
 }

 public myscrollview(final context context, attributeset attrs, int defstyleattr) {
  super(context, attrs, defstyleattr);
  //获取我们自定义的样式属性
  typedarray array = context.gettheme().obtainstyledattributes(attrs, r.styleable.myscrollview, defstyleattr, 0);
  int n = array.getindexcount();
  for (int i = 0; i < n; i++) {
   int attr = array.getindex(i);
   switch (attr) {
    case r.styleable.myscrollview_linecolor:
     // 默认颜色设置为黑色
     linecolor = array.getcolor(attr, color.black);
     break;
    case r.styleable.myscrollview_titlecolor:
     textcolor = array.getcolor(attr, color.black);
     break;
    case r.styleable.myscrollview_titlesize:
     // 默认设置为16sp,typevalue也可以把sp转化为px
     textsize = array.getdimensionpixelsize(attr, (int) typedvalue.applydimension(
       typedvalue.complex_unit_sp, 16, getresources().getdisplaymetrics()));
     break;

   }

  }
  array.recycle();
  init();
 }

 private void init() {
  //初始化
  mpaint = new paint();
  mpaint.setantialias(true);
  mbound = new rect();
  mtxtbound = new rect();
  bigtxtsize = textsize;
  onesize = textsize - 15;
  thirdsize = textsize - 15;
 }

自定义view一般需要实现一下三个构造方法,这三个构造方法是一层调用一层的,属于递进关系。因此,我们只需要在最后一个构造方法中来获得view的属性以及进行一些必要的初始化操作。尽量不要在ondraw的过程中去实例化对象,因为这是一个频繁重复执行的过程,new是需要分配内存空间的,如果在一个频繁重复的过程中去大量地new对象会造成内存浪费的情况。

3.重写onmesure方法确定view大小:

上一篇自定义view的文章介绍的很详细,这里就不重复了,重点放在ondraw方法里面:
android自定义view仿微博运动积分动画效果

4.重写ondraw方法进行绘画:

之前说过对于比较复杂的自定义view,重写ondraw方法之前,首先在草稿本上将大致的样子画出来,坐标,起始点都可以简单标注一下。这个方法很实用,思路很清晰。

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

a点的位置就是绘制数字的初始位置,b点的位置就是绘制竖线的起始位置。确定好这两个初始位置,我们只要写一个循环,找到规律,依次绘制出后面的线与字即可。因为涉及左右滑动的事件处理,所以需要android事件分发的知识来进行处理。

 @override
 public boolean dispatchtouchevent(motionevent ev) {

  int action = ev.getaction();
  int x = (int) ev.getx();
  int y = (int) ev.gety();
  switch (action) {
   case motionevent.action_down:
    xdown = x;
    ydown = y;
    break;
   case motionevent.action_move:
    xmove = x;
    ymove = y;
    dx = xmove - xdown;
    int dy = ymove - ydown;
    //如果是从左向右滑动
    if (xmove > xdown && math.abs(dx) > mtouchslop * 2 && math.abs(dy) < mtouchslop) {
     state = 1;
    }
    //如果是从右向左滑动
    if (xmove < xdown && math.abs(dx) > mtouchslop * 2 && math.abs(dy) < mtouchslop) {
     state = 2;

    }
    break;
   case motionevent.action_up:
    break;
  }
  return super.dispatchtouchevent(ev);
 }

重写view的dispatchtouchevent方法来区别左右滑动,mtouchslop是android默认的滑动最小距离,如果水平方向滑动的距离大于竖直方向滑动的距离,就判断为水平滑动。这里为了不让滑动那么明显,我让水平滑动的距离大于默认距离的两倍才判定左右滑动。state是记录滑动的状态。

 

 @override
 public boolean ontouchevent(motionevent ev) {

  int action = ev.getaction();
  switch (action) {
   case motionevent.action_down:
    break;
   case motionevent.action_move:
    if (state == 1 && bigtxtsize - onesize > -15) {
     bigtxtsize = bigtxtsize - 1;
     onesize = onesize + 1;
     postinvalidate();
    }
    if (state == 2 && bigtxtsize - thirdsize > -15) {
     bigtxtsize = bigtxtsize - 1;
     thirdsize = thirdsize + 1;
     postinvalidate();
    }
    break;
   case motionevent.action_up:
    if (state == 1) {
     size = size - 1;
     bigtxtsize = textsize;
     onesize = textsize - 15;
     postinvalidate();
     listener.onscroll(size);
     state = 0;
    }
    if (state == 2) {
     size = size + 1;
     bigtxtsize = textsize;
     thirdsize = textsize - 15;
     postinvalidate();
     listener.onscroll(size);
     state = 0;
    }
    break;
  }
  return true;
 }

重写view的ontouchevent方法来处理view的点击事件。
(1)演示动态图中,左右滑动的过程中,中间数字会从大变小,左右的数字会从小变大,bigtxtsize代表中间的数字大小,onesize代表从左到右第二个数字的大小,thirdsize代表从左到右第四个数字的大小。在滑动过程中再使用postinvalidate()方法来一直调用ondraw方法来重新进行绘制,达到数字大小变化的效果。
(2)滑动结束以后进行判断,如果是从左向右滑动,就会将数字减一;如果是从右向左滑动,就会将数字加一。最后将数字大小,滑动状态恢复到默认值。
(3)最后一定要返回true,表示消费当前滑动事件,不然滑动没反应

滑动的操作已经全部处理好,接下来就是绘制:

 @override
 protected void ondraw(canvas canvas) {
  txtsize = size - 2;
  bigtext = string.valueof(size);
  smalltext = string.valueof(txtsize);
  mpaint.setcolor(linecolor);
  canvas.drawline(0, 0, getwidth(), 0, mpaint);
  canvas.drawline(0, getheight(), getwidth(), getheight(), mpaint);
  linex = getwidth() / 10;
  for (int i = 0; i < 5; i++) {
   if (i == 2) {
    mpaint.settextsize(bigtxtsize);
    if (bigtxtsize == textsize - 15) {
     mpaint.setcolor(linecolor);
     canvas.drawline(linex, 0, linex, getheight() / 5, mpaint);
    } else {
     mpaint.setcolor(textcolor);
     canvas.drawline(linex, 0, linex, getheight() / 3, mpaint);
    }
    mpaint.gettextbounds(bigtext, 0, bigtext.length(), mbound);
    canvas.drawtext(bigtext, linex - mbound.width() / 2, getheight() / 2 + mbound.height() * 3 / 4, mpaint);
   } else if (i == 0 || i == 4) {
    mpaint.setcolor(linecolor);
    mpaint.settextsize(textsize - 15);
    mpaint.gettextbounds(smalltext, 0, smalltext.length(), mtxtbound);
    canvas.drawline(linex, 0, linex, getheight() / 5, mpaint);
    canvas.drawtext(string.valueof(txtsize), linex - mtxtbound.width() / 2, getheight() / 2 + mtxtbound.height() * 3 / 4, mpaint);
   } else if (i == 1) {
    mpaint.settextsize(onesize);
    if (onesize == textsize) {
     mpaint.setcolor(textcolor);
     canvas.drawline(linex, 0, linex, getheight() / 3, mpaint);
    } else {
     mpaint.setcolor(linecolor);
     canvas.drawline(linex, 0, linex, getheight() / 5, mpaint);
    }
    mpaint.gettextbounds(smalltext, 0, smalltext.length(), mtxtbound);
    canvas.drawtext(string.valueof(txtsize), linex - mtxtbound.width() / 2, getheight() / 2 + mtxtbound.height() * 3 / 4, mpaint);
   } else {
    mpaint.settextsize(thirdsize);
    if (thirdsize == textsize) {
     mpaint.setcolor(textcolor);
     canvas.drawline(linex, 0, linex, getheight() / 3, mpaint);

    } else {
     mpaint.setcolor(linecolor);
     canvas.drawline(linex, 0, linex, getheight() / 5, mpaint);
    }
    mpaint.gettextbounds(smalltext, 0, smalltext.length(), mtxtbound);
    canvas.drawtext(string.valueof(txtsize), linex - mtxtbound.width() / 2, getheight() / 2 + mtxtbound.height() * 3 / 4, mpaint);
   }
   txtsize++;
   linex += getwidth() / 5;
  }

 }

这里其实就是得到滑动操作的数字尺寸大小,然后进行绘制,最后将数字每次加一,linex是b点的初始位置,每次加上宽度的五分之一。

5.得到当前的设置值
可以看到view上面的textview也会跟着下面设置的值改变,所以这里我们需要单独处理一下。接口回调,简单暴力的方式。

在ontouchevent的case motionevent.action_up中,得到最后设置的值

  listener.onscroll(size);

然后就是对应的activity了:

public class secondactivity extends appcompatactivity implements myscrollview.onscrolllistener {

 private myscrollview scrollview;
 private textview txt;

 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.activity_second);
  initview();
 }

 private void initview() {
  scrollview = (myscrollview) findviewbyid(r.id.scroll_view);
  scrollview.setsize(1992);
  scrollview.setlistener(this);
  txt = (textview) findviewbyid(r.id.year_txt);
  txt.settext("出生年份" + scrollview.getsize() + " (年)");
 }

 @override
 public void onscroll(int size) {
  txt.settext("出生年份" + size + " (年)");
 }
}

实现接口的方法,进行初始化,设置初始值,然后就是在接口的方法更新数据即可。

自定义view的第一篇:android自定义view实现bmi指数条

自定义view的第二篇:android自定义view仿微博运动积分动画效果

ok,下一篇自定义view再见。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。