android自定义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。

源代码下载