android自定义view之---组合view

时间:2023-03-08 18:57:35

最近工作比较轻松,没有什么事情干,于是进入高产模式(呃。。。。高产似xx)。

应该很多童鞋对自定义view这个东西比较抵触,可能是听网上说view比较难吧,其实自定义view并没有很难

自定义view分为三种

1.自绘view

2.组合控件view

3.重写系统view

今天我们就来以一个小例子讲一下自定义view中的组合控件view,所谓的组合控件view就是使用系统预设的view来进行组合成一个新的view。并不进行图形的绘制操作。好了,今天的目标是把之前用Animation实现的loading动画做成一个view来使用,如果你还不了解Animation动画 可以去开开这篇博客:动画介绍--Animation
实现loading动画效果

老规矩,先上效果图:

android自定义view之---组合view

可以看到效果跟上篇博客差不多,但是现在他可是一个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。

源代码下载