android自訂view之---組合view

標籤：控制項   安卓   自訂view   

最近工作比較輕鬆，沒有什麼事情幹，於是進入高產模式(呃。。。。高產似xx)。

應該很多童鞋對自訂view這個東西比較抵觸，可能是聽網上說view比較難吧，其實自訂view並沒有很難

自訂view分為三種

1.自繪view

2.群組控制項view

3.重寫系統view

今天我們就來以一個小例子講一下自訂view中的群組控制項view，所謂的群組控制項view就是使用系統預設的view來進行組合成一個新的view。並不進行圖形的繪製操作。好了，今天的目標是把之前用Animation實現的loading動畫做成一個view來使用，如果你還不瞭解Animation動畫 可以去開開這篇部落格：動畫介紹--Animation 實現loading動畫效果

老規矩，先上：

可以看到效果跟上篇部落格差不多，但是現在他可是一個view。我們首先來看一下布局檔案：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent" android:layout_height="match_parent"><com.wingsoft.loadinganimation.LoadingView    android:id="@+id/loading"    android:layout_width="300dp"    android:layout_centerInParent="true"    android:layout_height="300dp"></com.wingsoft.loadinganimation.LoadingView>    <Button        android:id="@+id/button_cancel"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="cancel"/></RelativeLayout>

這是主布局檔案， 一個相對布局，一個按鈕。 看到其中一個控制項是帶包名的，說明這個控制項是我們自訂的控制項。

由於我們今天介紹的是控制群組合view，所以建立一個類讓他繼承於FrameLayout

public class LoadingView extends FrameLayout {    private ImageView mImageView;    private TextView mTextView;    private AnimationSet mImageAni = new AnimationSet(true);    private AnimationSet mTextAni = new AnimationSet(true);    public LoadingView(Context context, AttributeSet attrs) {        super(context, attrs);        LayoutInflater.from(context).inflate(R.layout.loading_view,this);        mImageAni = new AnimationSet(true);        mTextAni = new AnimationSet(true);        mImageView = (ImageView) findViewById(R.id.loadingView_point);        mTextView = (TextView) findViewById(R.id.loadingView_loading);        TranslateAnimation ta = new TranslateAnimation(100, 0, 200, 0);        ta.setDuration(5000);        RotateAnimation ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);        ra.setDuration(5000);        mImageAni.addAnimation(ta);        mImageAni.addAnimation(ra);        ScaleAnimation sa = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);        sa.setDuration(5000);        AlphaAnimation aa = new AlphaAnimation(0, 1);        aa.setDuration(5000);        mTextAni.addAnimation(sa);        mTextAni.addAnimation(aa);        aa.setAnimationListener(new Animation.AnimationListener() {            @Override            public void onAnimationStart(Animation animation) {            }            @Override            public void onAnimationEnd(Animation animation) {                mTextView.startAnimation(mTextAni);                mImageView.startAnimation(mImageAni);            }            @Override            public void onAnimationRepeat(Animation animation) {            }        });    }    public void start(){        mTextView.startAnimation(mTextAni);        mImageView.startAnimation(mImageAni);    }    public void stop(){        mTextView.clearAnimation();        mImageView.clearAnimation();    }}

關鍵點在於 實現一個兩個參數的構造器。在構造器裡面調用LayoutInflater 將布局檔案轉換成view； 之後再給我們的view 添加兩個方法 一個是start()，一個是stop() 用來控制動畫是否播放。這樣便完成了view的編寫。下面在MainActivity中對他進行操作。

public class MainActivity extends ActionBarActivity {    private LoadingView mLoadingView;    private Button mButton;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mLoadingView = (LoadingView) findViewById(R.id.loading);        mButton = (Button)findViewById(R.id.button_cancel);        mLoadingView.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                mLoadingView.start();            }        });        mButton.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                mLoadingView.stop();            }        });    }}

可以看到，我們可以像使用系統控制項一樣使用這個view了，怎麼樣，很神奇吧。你也快試試！之後我們會介紹自繪view。

原始碼下載

著作權聲明：本文為博主原創文章，歡迎註明出處後轉載。

android自訂view之---組合view