Android:MaterialTextField(TextInputLayout之另一种实现)

ת·¢Çë×¢Ã÷Ô­´´£ºhttp://blog.csdn.net/snailbaby_soko/article/details/53893047

Google ÔÚ 2015 µÄ IO ´ó»áÉÏ£¬¸øÎÒÃÇ´øÀ´Á˸ü¼ÓÏêϸµÄ Material Design Éè¼Æ¹æ·¶£¬Í¬Ê±£¬Ò²¸øÎÒÃÇ´øÀ´ÁËÈ«Ð嵀 Android Design Support Library£¬ÔÚÕâ¸ö support ¿âÀïÃ棬Google ¸øÎÒÃÇÌṩÁ˸ü¼Ó¹æ·¶µÄMD Éè¼Æ·ç¸ñµÄ¿Ø¼þ£¬Õâ²»µÃ²»ËµÊÇÒ»¸öÁ¼ÐÄÖ®×÷¡£ÏàÐźܶàС»ï×ÓÒѾ­ÌåÑé¹ýÆäÖеÄһЩ¿Ø¼þÁË£¬µ« FRANCE µÄһλÉè¼Æʦ Florent Champigny È´·¢ÏÖÁ˸üÓÐȤµÄʵÏÖ[MaterialTextField]¡£¿´Í¼

±È Google ÍƼöµÄ TextInputLayout ¶¯¸Ð°É£¬×÷Ϊ×ßÔÚ½ø½×µÀ·ÉϵĿà±Æ³ÌÐòÔ±£¬²»ÄÜ˵ÄÃÀ´ÄÜÓþÍÐУ¬±ØÐëÖªÆäȻ֪ÆäËùÒÔÈ»£¬ÓÚÊÇ fork ÏÂÀ´Ò»²½Ò»²½½âÆÊ´úÂë¡£

ÎÒ´òËãÕ¾ÔÚ×÷ÕßµÄλÖÃÉÏ˼¿¼£¬ÒªÊµÏÖÕâ¸ö MaterialTextField ¾ßÌå»áÔõôȥ¿¼ÂÇ¡£

---

ÐèÇó·ÖÎö£º

¼ÈÈ» Google ÍƼöÁË TextInputLayout£¬ÄÇÊ×ÏÈ¿´¿´ËüÊǼ̳ÐÁËʲôÀ´ÍØÕ¹£¬ÀïÃ滹ÓÐʲô¿ÉÒÔÈÃÎÒÃǶ¨ÒåµÄ¡£·ÖÎöÁËÒ»·¬´úÂëºó£¬¾¡¹ÜÄÜÍØÕ¹µÄµØ·½Óкܶ࣬ÈçÊäÈë´íÎóÄÜÉèÖôíÎóÌáʾ£¬¿ò¿ò±äÑÕÉ«µÈµÈ£¬µ«Ëü¼Ì³ÐÁË LinearLayout £¬Ò²¾ÍÊÇ˵²¼¾ÖÉÏÏÞÖÆÁËÄÜÍØÕ¹µÄ·½Ïò£¬ÏëÔÚËüµÄÉíÉÏʵÏÖÕâ¸ö¶¯¸ÐµÄÊäÈë¿òЧ¹û£¬¿ÉÄÜ»áºÜ¼¬ÊÖ¡£

ÔÚ·ÖÎö´úÂëµÄʱºò£¬ÓÐÒâ˼µØ·¢ÏÖ TextInputLayout Õ¹¿ªµÄʱºòÓõ½ÁË ValueAnimatorCompat À´×ö¶¯»­£¬ÄǾͼòµ¥ÁË¡£Ö»ÒªÎÒŪ¸öÈÝÆ÷·Å label¡¢editText¡¢icon ÕâЩС¿Ø¼þ£¬ÔÙÈÃËûÃÇÓö¯»­Õ¹¿ªºÍÊÕËõ¾ÍÐÐÁË°É¡£Ë¼Â·ÉÏûÎÊÌâÖ®ºó£¬¾Í¸Ã¿¼ÂÇÈÝÆ÷ÒªÔõôÑù¶¨Òå²Å·½±ãʹÓÃÁË¡£

³¡¾°Ê¹Óãº

ÎÒÃÇÊÇÕë¶Ô¿ª·¢ÕߵĽǶÈÀ´¶¨Òå°É£¬ÄÇôÔõÑù²ÅÄܼõÇῪ·¢ÕߵŤ×÷À´¿ìËÙʵÏÖÕâ¸öЧ¹û¡£ÔÚÒµÎñÉÏ£¬¿ª·¢Õß³ýÁËÒª´¦Àí editText µÄÄÚÈÝÊÇ·ñÂú×ãijЩÌõ¼þÍ⣬ÆäËüòËÆÒ²²»ÐèÒªËûÃÇÈ¥´¦Àí¡£ÄÇôÎÒÃǾͿÉÒÔ°ÑÕâЩ label¡¢icon µ±×÷³É MaterialTextField µÄÒ»¸öÊôÐÔ£¬¿ÉÒÔÖ±½ÓÔÚ xml µÄ¿Ø¼þÉÏÌí¼ÓµÄÊôÐÔ¡£

ÏÂÃæÊǼûÖ¤Ææ¼£µÄʱºò

°ÑÃλñä³ÉÏÖʵ£º

µÚÒ»²½×Ô¶¨ÒåÊôÐÔ£º

mtf_cardCollapsedHeight Ϊδչ¿ª×´Ì¬Ï label ÏÂÃæ°×É«ÄÇÏßÌõµÄ¸ß¶È£»

mtf_hasFocus ÊÇ·ñ»ñµÃ½¹µã£»

mtf_openKeyboardOnFocus չʾÊÇÊÇ·ñÐèÒª´ò¿ªÈí¼üÅÌ£»

mtf_animationDuration Õ¹¿ªºÍÊÕËõʱ¶¯»­Ö´ÐеÄʱ¼ä£»

ÕâЩ·Ç±ØÐëÊôÐÔ²¢·ÇÔÚµÚһʱ¼ä¾ÍÏëµ½£¬¶øÊÇÔÚÖð²½±àÂë¹ý³ÌÖÐÏëµ½£¬ËùÒÔ˵²»ÒªµÚһʱ¼ä°ÑÊÂÇ鿼ÂǵÄÌ«¸´ÔÓ²ÅÊÇ×îÖØÒªµÄ¡£

```xml

   

       

       

       

       

       

       

   

```

µÚ¶þ²½´¦Àí×Ô¶¨ÒåµÄÊôÐÔ£º

```java

TypedArray styledAttrs = context.obtainStyledAttributes(attrs, R.styleable.MaterialTextField);

ANIMATION_DURATION = styledAttrs.getInteger(R.styleable.MaterialTextField_mtf_animationDuration, 400);

.

.

.```

ÖîÈç´ËÀà»ñÈ¡×Ô¶¨ÒåµÄÊôÐԾͲ»Ò»Ò»Ìù´úÂëÁË£¬´ó¼Ò¿ÉÒÔ fork ÏîÄ¿ÏÂÀ´ÂýÂý¿´¡£

ÔÙÏÂÀ´¾ÍÖØд onFinishInflate() À´»ñµÃ×ӿؼþÀ´³õʼ»¯Ò»Ð©²ÎÊýºÍÉèÖÃÁË£¨¾ßÌå¿´¿´ÏîÄ¿Ô´Â룩£¬ÏàÐÅÓÐЩͬѧ²»Ì«Á˽âÕâ¸öº¯ÊýÔÚʲôʱºòµ÷Ó㬹ٷ½¶ÔÕâ¸öÖÜÆÚ·½·¨µÄ½âÊÍΪ£º

**onFinishInflate()**£º µ±ViewÖÐËùÓеÄ×ӿؼþ ¾ù±»Ó³Éä³Éxmlºó´¥·¢¡£

ÆäʵÎÒÃÇÒ»°ãʹÓà View µÄÁ÷³ÌÊÇÔÚ onCreate ÖÐʹÓà setContentView À´ÉèÖÃÒªÏÔʾ Layout Îļþ»òÖ±½Ó´´½¨Ò»¸ö View£¬ÔÚµ±ÉèÖÃÁË ContentView Ö®ºóϵͳ»á¶ÔÕâ¸ö View ½øÐнâÎö£¬È»ºó»Øµ÷µ±Ç°ÊÓͼ View ÖеÄonFinishInflate ·½·¨¡£Ö»ÓнâÎöÁËÕâ¸ö View ÎÒÃDzÅÄÜÔÚÕâ¸öViewÈÝÆ÷ÖлñÈ¡µ½ÓµÓÐIdµÄ×é¼þ£¬Í¬ÑùÒòΪϵͳ½âÎöÍê View Ö®ºó²Å»áµ÷Óà onFinishInflate ·½·¨£¬ËùÒÔÎÒÃÇ×Ô¶¨Òå×é¼þʱ¿ÉÒÔ onFinishInflate ·½·¨ÖлñÈ¡Ö¸¶¨×ÓViewµÄÒýÓá£

µÚÈý²½´¦ÀíÂß¼­£ºÕ¹¿ªµÄ¶¯»­¡¢ÊÕËõµÄ¶¯»­£¬Æäʵ¶¼ÓÃÁËv4°üµÄ ViewCompat À´ÖÆ×÷¶¯»­¡£Ö÷ÒªÊǹý³ÌÖжÔÄÇЩ×ӿؼþ×öһЩλÒÆ¡¢½¥±äµÄЧ¹û£¬ÔÙÓоÍÊǶԻñµÃ½¹µãÊÇ·ñµ¯³öÈí¼üÅÌ£¨×÷ÕßµÄÏîÄ¿¶ÔÈí¼üÅ̵¯³öÊջصÄÂß¼­´¦Àí²»Ì«Í×µ±£¬ÌåÑéÉϲ»Ì«ÓѺã©¡£

```java

public void expand() {//Õ¹¿ªµÄ¶¯»­´¦Àí        

if (!expanded) {        

 ViewCompat.animate(editText).alpha(1f).setDuration(ANIMATION_DURATION);          ViewCompat.animate(card).scaleY(1f).setDuration(ANIMATION_DURATION);  ViewCompat.animate(label).alpha(0.4f).scaleX(0.7f).scaleY(0.7f)  

    .translationY(-labelTopMargin).setDuration(ANIMATION_DURATION);                                            ViewCompat.animate(image).alpha(1f).scaleX(1f).scaleY(1f)  

    .setDuration(ANIMATION_DURATION);

           if (editText != null) {

               editText.requestFocus();

           }

           if (OPEN_KEYBOARD_ON_FOCUS) {

               ((InputMethodManager) getContext().getSystemService(Context.INPUT_METHOD_SERVICE)).showSoftInput(editText, InputMethodManager.SHOW_IMPLICIT);

           }

           expanded = true;

       }

   }

``````java  

public void reduce() {//ÊÕËõµÄ¶¯»­´¦Àí

       if (expanded) {

           final int heightInitial = getContext().getResources().getDimensionPixelOffset(R.dimen.mtf_cardHeight_final);                        ViewCompat.animate(label).alpha(1).scaleX(1).scaleY(1)                .translationY(0).setDuration(ANIMATION_DURATION);

           ViewCompat.animate(image).alpha(0).scaleX(0.4f).scaleY(0.4f)                .setDuration(ANIMATION_DURATION);            ViewCompat.animate(editText).alpha(1f)                .setUpdateListener(new ViewPropertyAnimatorUpdateListener() {

                   @Override

                   public void onAnimationUpdate(View view) {

                       float value = ViewCompat.getAlpha(view); //percentage                        card.getLayoutParams().height = (int) (value * (heightInitial - cardCollapsedHeight) + cardCollapsedHeight);                        card.requestLayout();

                   }                })

               .setDuration(ANIMATION_DURATION);            ViewCompat.animate(card).scaleY(reducedScale).setDuration(ANIMATION_DURATION);

           if (OPEN_KEYBOARD_ON_FOCUS) {

               ((InputMethodManager) getContext().getSystemService(Context.INPUT_METHOD_SERVICE)).toggleSoftInput(InputMethodManager.HIDE_IMPLICIT_ONLY, 0);            }

           editText.clearFocus();

           expanded = false;

       }

   }

```

ÉÏÎę̀£º

ÆäʵÈí¼üÅ̵ĵ¯³öÊÕËõÂß¼­»»³É£¬ÌåÑé»á±È½ÏºÃ¡£µ«ÊÇ»¹ÊÇ»á³öÏÖ£¬µ±ÊÕËõ״̬Èí¼üÅÌ»¹ÊDz»ÏûʧµÄСbug£¬Èç¹ûÔÙ¼ÓÉÏһЩ±ê¼ÇÀ´¼Ç¼Èí¼üÅ̵Ä״̬À´¿ØÖÆÊÇ·ñ¸Ãµ¯³ö»¹ÊÇÒþ²Ø»áºÃÒ»µã¡£

```java

imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);

```

Èç¹ûÓÐʲô˵µÄ²»ºÃ£¬¿ÉÒÔÌá³öÀ´¡£À´»¥ÏàÉ˺¦°É...