Android L Material Design 初探 (基于AppCompat v21)

学习 Android Developer Blog 上面的两篇文章——"Implementing Material Design in Your Android app"和"AppCompat v21 — Material Design for Pre-Lollipop Devices!"。自己动手实现，体验Material Design。

一、准备工作

1、通过SDK Manager下载最新的兼容包

2、配置Gradle，引入兼容包

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile "com.android.support:appcompat-v7:21.0.+"
    compile "com.android.support:cardview-v7:21.0.+"
    compile "com.android.support:palette-v7:21.0.+"
}

二、Shadow

Lollipop通过设置elevation属性实现阴影效果。一番周折发现，使用兼容包无法起效。不过，通过将想要设置阴影的 View 包裹在CardView中，能够实现相同效果。

三、CardView

效果图：

布局：

（adjustViewBounds属性很好用，可以方便的让ImageView紧紧包裹图片而不留白）

四、Dynamic Color

这个很赞。使用Palette类，使得图片的配字的颜色（以及背景）跟图片的颜色特征相关。

效果图：

源码：

public class TestMaterialDesignActivity extends Activity {

    private GridView gridView;
    private List<Integer> resIds;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        setContentView(R.layout.activity_test_material_design);

        gridView = (GridView) findViewById(R.id.gridView);
        resIds = new ArrayList<Integer>() {
            //static
            {
                add(R.drawable.test);
                add(R.drawable.test4);
                add(R.drawable.test5);
                add(R.drawable.test7);
            }
        };
        List<String> strs = new ArrayList<String>() {
            {
                add("cat");
                add("cat-dog");
                add("cat-dog");
                add("cat-dog");
            }
        };
        BaseAdapter adapter = new MyAdapter(this, resIds, strs);
        gridView.setAdapter(adapter);
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                startActvity(view, resIds.get(position));
            }
        });

    }


    class MyAdapter extends BaseAdapter {
        private Context context;
        private List<Integer> resIds;
        private List<String> strs;

        MyAdapter(Context context, List<Integer> resIds, List<String> strs) {
            this.context = context;
            this.resIds = resIds;
            this.strs = strs;
        }

        @Override
        public int getCount() {
            return resIds.size();
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

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

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder viewHolder = null;
            if (convertView == null) {
                convertView = LayoutInflater.from(context).inflate(R.layout.grid_item_test_material_design, parent, false);
                viewHolder = new ViewHolder();
                viewHolder.imageView = (ImageView) convertView.findViewById(R.id.imageView3);
                viewHolder.textView = (TextView) convertView.findViewById(R.id.textView3);
                convertView.setTag(viewHolder);
            } else {
                viewHolder = (ViewHolder) convertView.getTag();
            }
            viewHolder.imageView.setImageResource(resIds.get(position));
            viewHolder.textView.setText(strs.get(position));
            final ViewHolder finalViewHolder = viewHolder;
            Palette.generateAsync(BitmapFactory.decodeResource(context.getResources(), resIds.get(position)),
                    new Palette.PaletteAsyncListener() {
                        @Override
                        public void onGenerated(Palette palette) {
                            Palette.Swatch vibrant =
                                    palette.getVibrantSwatch();
                            if (vibrant != null) {
                                // If we have a vibrant color
                                // update the title TextView
                                finalViewHolder.textView.setBackgroundColor(
                                        vibrant.getRgb());
                                finalViewHolder.textView
                                        .setTextColor(
                                                vibrant.getTitleTextColor());
                            }
                        }
                    });
            return convertView;
        }

        class ViewHolder {
            private ImageView imageView;
            private TextView textView;
        }
    }
}

五、转场动画

1、经过尝试，发现最炫酷的SceneTransitionAnimation在pre Lollipop的设备上无法实现。

效果没出来，先看的文档。

public static ActivityOptions makeSceneTransitionAnimation (Activity activity, View sharedElement, String sharedElementName)

Added in  API level 21

Create an ActivityOptions to transition between Activities using cross-Activity scene animations. This method carries the position of one shared element to the started Activity. The position of sharedElement will be used as the epicenter for the exit Transition. The position of the shared element in the launched Activity will be the epicenter of its entering Transition.

This requires FEATURE_ACTIVITY_TRANSITIONS to be enabled on the calling Activity to cause an exit transition. The same must be in the called Activity to get an entering transition.

Parameters

activity	The Activity whose window contains the shared elements.
sharedElement	The View to transition to the started Activity.
sharedElementName	The shared element name as used in the target Activity. This must not be null.

Returns

• Returns a new ActivityOptions object that you can use to supply these options as the options Bundle when starting an activity.

See Also

• setEpicenterCallback(android.transition.Transition.EpicenterCallback)

以为是 FEATURE_ACTIVITY_TRANSITIONS没有enabled。设置了之后还是不行。（这里要注意，requestFeature() must be called before adding content）就看了下源码。看到源码就知道肯定无法实现了。

public static ActivityOptionsCompat makeSceneTransitionAnimation(Activity activity,
        View sharedElement, String sharedElementName) {
    if (Build.VERSION.SDK_INT >= 21) {
        return new ActivityOptionsCompat.ActivityOptionsImpl21(
                ActivityOptionsCompat21.makeSceneTransitionAnimation(activity,
                        sharedElement, sharedElementName));
    }
    return new ActivityOptionsCompat();
}

2、其它转场动画

发现 ActivityOption 提供了其他的转场动画也不错。比如下面三个。

public static ActivityOptions makeCustomAnimation (Context context, int enterResId, int exitResId)

Added in  API level 16

Create an ActivityOptions specifying a custom animation to run when the activity is displayed.

Parameters

context	Who is defining this. This is the application that the animation resources will be loaded from.
enterResId	A resource ID of the animation resource to use for the incoming activity. Use 0 for no animation.
exitResId	A resource ID of the animation resource to use for the outgoing activity. Use 0 for no animation.

Returns

• Returns a new ActivityOptions object that you can use to supply these options as the options Bundle when starting an activity.

public static ActivityOptions makeScaleUpAnimation (View source, int startX, int startY, int width, int height)

Added in  API level 16

Create an ActivityOptions specifying an animation where the new activity is scaled from a small originating area of the screen to its final full representation.

If the Intent this is being used with has not set its Intent.setSourceBounds, those bounds will be filled in for you based on the initial bounds passed in here.

Parameters

source	The View that the new activity is animating from. This defines the coordinate space for startX and startY.
startX	The x starting location of the new activity, relative to source.
startY	The y starting location of the activity, relative to source.
width	The initial width of the new activity.
height	The initial height of the new activity.

Returns

• Returns a new ActivityOptions object that you can use to supply these options as the options Bundle when starting an activity.

public static ActivityOptions makeThumbnailScaleUpAnimation (View source, Bitmap thumbnail, int startX, int startY)

Added in  API level 16

Create an ActivityOptions specifying an animation where a thumbnail is scaled from a given position to the new activity window that is being started.

If the Intent this is being used with has not set its Intent.setSourceBounds, those bounds will be filled in for you based on the initial thumbnail location and size provided here.

Parameters

source	The View that this thumbnail is animating from. This defines the coordinate space for startX and startY.
thumbnail	The bitmap that will be shown as the initial thumbnail of the animation.
startX	The x starting location of the bitmap, relative to source.
startY	The y starting location of the bitmap, relative to source.

Returns

• Returns a new ActivityOptions object that you can use to supply these options as the options Bundle when starting an activity.

六、Theme.AppCompat.Light

使用兼容包里的样式获取Android L 控件的样式，风格很统一，控制颜色也非常方便。

兼容包支持以下控件：

• Everything provided by AppCompat’s toolbar (action modes, etc)
• EditText
• Spinner
• CheckBox
• RadioButton
• Switch (use the new android.support.v7.widget.SwitchCompat)
• CheckedTextView

效果图：

注意，为了使样式生效，Activity 需继承兼容包里的ActionBarActivity。

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <!-- colorPrimary is used for the default action bar background -->
        <item name="colorPrimary">@color/my_awesome_color
        </item>

        <!-- colorPrimaryDark is used for the status bar -->
        <item name="colorPrimaryDark">@color/my_awesome_darker_color
        </item>

        <!-- colorAccent is used as the default value for colorControlActivated,
             which is used to tint widgets -->
        <item name="colorAccent">@color/accent</item>
        <item name="colorControlHighlight">@color/my_awesome_color</item>
        <item name="colorControlNormal">@color/my_awesome_color</item>
        <item name="colorControlActivated">@color/my_awesome_color</item>
        <item name="colorSwitchThumbNormal">@color/my_awesome_color</item>

        <!-- You can also set colorControlNormal, colorControlActivated
             colorControlHighlight, and colorSwitchThumbNormal. -->
    </style>

    <color name="my_awesome_color">#009688</color>
    <color name="my_awesome_darker_color">#004D40</color>
    <color name="accent">#CDDC39</color>
</resources>