MaterialDesgin之MaterialTextField

一直以来 android 的碎片化 和 种种原因 , 导致大部分的 Android App 设计起来干脆跟 ios 同步 . 在 ios 上可以轻易实现的风格和效果 在 Android 这边实现起来相当复杂 , Google 在 14年的 I/O 大会上 重磅发布的 Material Desgin , 随着近两年的发展 Material Desgin 的设计风格已经融入越来越多的 App , 也被越来越多的 Android 开发者所接受和钟爱。笔者收集收录国内外各大 Material Desgin 风格的 widget 对它们的效果和使用做分享(如果有版权或者所有权相关冲突可在下方留言或者发私信联系笔者)

---

MaterialTextField

效果:

一个 MaterialDesgin风格带动画的EditView 用在注册登陆界面 第一次看到也能给人眼前一亮的感觉

使用

code:

package com.materialdesignam.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.support.v7.widget.CardView;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;


import com.materialdesignam.R;
import com.nineoldandroids.animation.AnimatorSet;
import com.nineoldandroids.animation.ObjectAnimator;
import com.nineoldandroids.animation.ValueAnimator;
import com.nineoldandroids.view.ViewHelper;

/**
 * Copyright 2015 florent37, Inc.
 * <p/>
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * <p/>
 * http://www.apache.org/licenses/LICENSE-2.0
 * <p/>
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * https://github.com/florent37/MaterialTextField
 */

/**
 * Created by florentchampigny on 27/08/15.
 */
public class MaterialTextField extends FrameLayout {


    protected TextView label;
    protected View card;
    protected ImageView image;
    protected EditText editText;
    protected ViewGroup editTextLayout;

    protected int labelTopMargin = -1;
    protected boolean expanded = false;

    protected int ANIMATION_DURATION = -1;
    protected boolean OPEN_KEYBOARD_ON_FOCUS = true;
    protected int labelColor = -1;
    protected int cardColor = -1;
    protected int imageDrawableId = -1;
    protected int cardCollapsedHeight = -1;

    protected void handleAttributes(Context context, AttributeSet attrs) {
        try {
            TypedArray styledAttrs = context.obtainStyledAttributes(attrs, R.styleable.MaterialTextField);

            {
                ANIMATION_DURATION = styledAttrs.getInteger(R.styleable.MaterialTextField_mtf_animationDuration, 400);
            }
            {
                OPEN_KEYBOARD_ON_FOCUS = styledAttrs.getBoolean(R.styleable.MaterialTextField_mtf_openKeyboardOnFocus, false);
            }
            {
                labelColor = styledAttrs.getColor(R.styleable.MaterialTextField_mtf_labelColor, -1);
            }
            {
                cardColor = styledAttrs.getColor(R.styleable.MaterialTextField_mtf_cardColor, -1);
            }
            {
                imageDrawableId = styledAttrs.getResourceId(R.styleable.MaterialTextField_mtf_image, -1);
            }
            {
                cardCollapsedHeight = styledAttrs.getDimensionPixelOffset(R.styleable.MaterialTextField_mtf_cardCollapsedHeight, context.getResources().getDimensionPixelOffset(R.dimen.mtf_cardHeight_initial));
            }

            cardCollapsedHeight += context.getResources().getDimensionPixelOffset(R.dimen.mtf_cardview_additionnal);

            styledAttrs.recycle();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public MaterialTextField(Context context) {
        super(context);
    }

    public MaterialTextField(Context context, AttributeSet attrs) {
        super(context, attrs);
        handleAttributes(context, attrs);
    }

    public MaterialTextField(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        handleAttributes(context, attrs);
    }


    protected EditText findEditTextChild() {
        if (getChildCount() > 0 && getChildAt(0) instanceof EditText) {
            return (EditText) getChildAt(0);
        }
        return null;
    }


    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        editText = findEditTextChild();
        if (editText == null)
            return;

        addView(LayoutInflater.from(getContext()).inflate(R.layout.mtf_layout, this, false));

        editTextLayout = (ViewGroup) findViewById(R.id.mtf_editTextLayout);
        removeView(editText);
        editTextLayout.addView(editText);

        label = (TextView) findViewById(R.id.mtf_label);
        ViewHelper.setPivotX(label, 0);
        ViewHelper.setPivotY(label, 0);

        if (editText.getHint() != null) {
            label.setText(editText.getHint());
            editText.setHint("");
        }

        card = findViewById(R.id.mtf_card);
        card.getLayoutParams().height = cardCollapsedHeight;
        card.requestLayout();

        image = (ImageView) findViewById(R.id.mtf_image);
        ViewHelper.setAlpha((View) image, 0);
        ViewHelper.setScaleX(image, 0.4f);
        ViewHelper.setScaleY(image, 0.4f);

        ViewHelper.setAlpha(editText, 0f);
        editText.setBackgroundColor(Color.TRANSPARENT);

        labelTopMargin = FrameLayout.LayoutParams.class.cast(label.getLayoutParams()).topMargin;

        customizeFromAttributes();

        this.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                toggle();
            }
        });

    }

    protected void customizeFromAttributes() {
        if (labelColor != -1) {
            this.label.setTextColor(labelColor);
        }
        if (cardColor != -1) {
            if (card instanceof CardView)
                CardView.class.cast(this.card).setCardBackgroundColor(cardColor);
        }
        if (imageDrawableId != -1) {
            this.image.setImageDrawable(getContext().getResources().getDrawable(imageDrawableId));
        }
    }

    public void toggle() {
        if (expanded)
            reduce();
        else
            expand();
    }

    public void reduce() {
        if (expanded) {

            ValueAnimator expand = ValueAnimator.ofInt(card.getHeight(), cardCollapsedHeight);
            expand.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    Integer value = (Integer) animation.getAnimatedValue();
                    card.getLayoutParams().height = value.intValue();
                    card.requestLayout();
                }
            });

            AnimatorSet animatorSet = new AnimatorSet();
            animatorSet.setDuration(ANIMATION_DURATION);
            animatorSet.playTogether(
                    ObjectAnimator.ofFloat(label, "alpha", 1),
                    ObjectAnimator.ofFloat(label, "scaleX", 1),
                    ObjectAnimator.ofFloat(label, "scaleY", 1),
                    ObjectAnimator.ofFloat(label, "translationY", 0),

                    ObjectAnimator.ofFloat(image, "alpha", 0),
                    ObjectAnimator.ofFloat(image, "scaleX", 0.4f),
                    ObjectAnimator.ofFloat(image, "scaleY", 0.4f),

                    ObjectAnimator.ofFloat(editText, "alpha", 0),
                    expand
            );
            animatorSet.start();

            if (OPEN_KEYBOARD_ON_FOCUS)
                ((InputMethodManager) getContext().getSystemService(Context.INPUT_METHOD_SERVICE)).toggleSoftInput(InputMethodManager.HIDE_IMPLICIT_ONLY, 0);
            editText.clearFocus();

            expanded = false;
        }
    }

    public void expand() {
        if (!expanded) {

            ValueAnimator expand = ValueAnimator.ofInt(0, getContext().getResources().getDimensionPixelOffset(R.dimen.mtf_cardHeight_final));
            expand.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    Integer value = (Integer) animation.getAnimatedValue();
                    card.getLayoutParams().height = value.intValue();

                    card.requestLayout();
                }
            });

            AnimatorSet animatorSet = new AnimatorSet();
            animatorSet.setDuration(ANIMATION_DURATION);
            animatorSet.playTogether(
                    ObjectAnimator.ofFloat(label, "alpha", 0.4f),
                    ObjectAnimator.ofFloat(label, "scaleX", 0.7f),
                    ObjectAnimator.ofFloat(label, "scaleY", 0.7f),
                    ObjectAnimator.ofFloat(label, "translationY", -labelTopMargin),

                    ObjectAnimator.ofFloat(image, "alpha", 1),
                    ObjectAnimator.ofFloat(image, "scaleX", 1),
                    ObjectAnimator.ofFloat(image, "scaleY", 1),

                    ObjectAnimator.ofFloat(editText, "alpha", 1),
                    expand
            );
            animatorSet.start();

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

            expanded = true;
        }
    }

    public View getCard() {
        return card;
    }

    public TextView getLabel() {
        return label;
    }

    public ImageView getImage() {
        return image;
    }

    public EditText getEditText() {
        return editText;
    }

    public ViewGroup getEditTextLayout() {
        return editTextLayout;
    }

    public boolean isExpanded() {
        return expanded;
    }

}

---

属性

    <declare-styleable name="MaterialTextField">
        <attr name="mtf_cardCollapsedHeight" format="dimension" />
        <attr name="mtf_labelColor" format="color" />
        <attr name="mtf_cardColor" format="color" />
        <attr name="mtf_image" format="reference" />
        <attr name="mtf_animationDuration" format="integer" />
        <attr name="mtf_openKeyboardOnFocus" format="boolean" />
    </declare-styleable>

可以修改的宽高颜色动画速度可以自行参考上面属性

---

dependence:

 compile 'com.android.support:cardview-v7:23.1.0'
 compile 'com.nineoldandroids:library:2.4.0'

eclipse 的同学可以下载 jar 包导入

---

use:

    <com.materialdesignam.widget.MaterialTextField
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginTop="20dp"
        app:mtf_cardCollapsedHeight="4dp"
        app:mtf_image="@drawable/ic_mail_grey600_24dp">

        <!--
        app:mtf_animationDuration="1000"
        app:mtf_cardColor="@color/cardview_dark_background"
        app:mtf_labelColor="@android:color/holo_red_dark"
        app:mtf_openKeyboardOnFocus="true"
        -->

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:numeric="integer"
            android:textColor="#333"
            android:textColorHint="#666"
            android:textSize="15sp" />


    </com.materialdesignam.widget.MaterialTextField>

---

示例项目地址: https://github.com/13120241790/MaterialDesginAM