用android:clipChildren來實現紅心變大特效

最近在看別人技術博客（http://www.cnblogs.com/over140/p/3508335.html）的時候，發現一個屬性：android:clipChildren屬性。

翻文檔找到下面介紹

android:clipChildren	setClipChildren(boolean)	Defines whether a child is limited to draw inside of its bounds or not.
android:clipToPadding	setClipToPadding(boolean)	Defines whether the ViewGroup will clip its drawing surface so as to exclude the padding area.

翻譯就是，

1.clipChild用來定義他的子控件是否要在他應有的邊界內進行繪制。 默認情況下，clipChild被設置為true。 也就是不允許進行擴展繪制。

2. clipToPadding用來定義ViewGroup是否允許在padding中繪制。默認情況下，cliptopadding被設置為ture， 也就是把padding中的值都進行裁切了。

還有該功能是android第一個版本就已經提供的方法。 所有可以跨任意android版本使用。

 

這兩個屬性聯合起來能干什么呢？ 哈， 用來做一些類似於心形放大等點擊特效非常合適啊。    不用去更改布局， 只需加入這兩個屬相，並引入動畫效果就完成了。

按照上面的思路，做個demo吧。

先看看最后的效果吧， 點擊第三個機器人就會播放一個變大的效果（類似於心變大的效果）

廢話不多說，上關鍵代碼：

　　1.  布局代碼（核心）

　　　　主要看設的兩個關鍵屬性android:clipChildren和android:clipToPadding均為false。  這就讓點擊第三個小人時，可以跨邊界進行繪制，並且允許其在padding區域內繪制。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:clipChildren="false" 
    android:clipToPadding="false">

    <ImageView
        android:id="@+id/img1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/img3"
        android:onClick="AA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/black"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/img4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/img5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/img6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

 2. 其他輔助代碼，如動畫和act等內容

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="3.0"
    android:toYScale="3.0"
    android:duration="2000"
       android:pivotX="50%"
       android:pivotY="50%"
    >
</scale>

 

package com.example.clipchildren;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {

    //只對第三個小人做放大動作
    ImageView image3 =null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        image3 = (ImageView) findViewById(R.id.img3);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
    public void AA(View view) {
        Toast.makeText(this, "aa", Toast.LENGTH_SHORT).show();
        Animation an = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.anims);
        image3.startAnimation(an);
    }
    
}

 3. 除了這種應用，網上還有其他人對這兩個屬性的妙用：

　　用viewPaper來實現一個Gallery效果：http://www.iteye.com/topic/1129898