组合控件2——海贼王选项菜单

之前的自定义控件——初识自定义控件，我们了解到了自定义控件分为三种，自制控件，组合控件，拓展控件。

而我们在自制控件1 开关按钮自制控件2 —— 自制控件 仿qq侧滑菜单

在组合控件1—— 设置框一文中，我们也对设置框（组合控件）完成了demo编写

接下来，还是进行组合控件的编写。

一、弄出界面

先准备一个项目xml布局文件

后把这个xml填充进当前的自定义控件

diy_op_view

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="170dp"
android:layout_height="170dp"
android:padding="10dp"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mRlOutLayout"
android:layout_width="150dp"
android:layout_height="150dp"
>
<ImageView
android:id="@+id/mIvLeftTop"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/op_hkk"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
/>
<ImageView
android:id="@+id/mIvTop"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/op_qb"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
/>
<ImageView
android:id="@+id/mIvRightTop"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/op_xj"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
/>
<ImageView
android:id="@+id/mIvLeft"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/op_sl"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
/>
<ImageView
android:id="@+id/mIvRight"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/op_nm"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
/>
<ImageView
android:id="@+id/mIvLfetBottom"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/op_lb"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
/>
<ImageView
android:id="@+id/mIvBottom"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/op_wsp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
/>
<ImageView
android:id="@+id/mIvRightBottom"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/op_blk"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<ImageView
android:id="@+id/mIvcCenter"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/op_lf"
android:layout_centerInParent="true"
/>
</RelativeLayout>

OpExpandView

public class OpExpandView extends RelativeLayout {
public OpExpandView(Context context) {
super(context);
initUI(context);
}
public OpExpandView(Context context, AttributeSet attrs) {
super(context, attrs);
initUI(context);
}
public OpExpandView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initUI(context);
}
private void initUI(Context context){
View.inflate(context, R.layout.diy_op_view,this);
}
}

activity_main

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#66c9bcbc"
tools:context="com.amqr.diyviewone.MainActivity">
<com.amqr.diyviewone.View.OpExpandView
android:id="@+id/mOpExpand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
</RelativeLayout>

MainActivity

public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

.

.

二、做一些动画

接下来我们来做一个简单的缩放动画，从展开状态，切换到只显示最中间一个ImageView的状态。

我们这里采用属性动画做,为了让动画缩放过程明显，我们播放动画的时间设定为2000毫秒。（原生自带android3.0以才可以使用属性动画，有兴趣的可以切换为补间动画或者采用开源库）

附上代码：

二.1、简单缩放

public class OpExpandView extends RelativeLayout implements View.OnClickListener {

private RelativeLayout mRlOut;

private ImageView mIvcCenter;

public OpExpandView(Context context) {

super(context);

initUI(context);

}

public OpExpandView(Context context, AttributeSet attrs) {

super(context, attrs);

initUI(context);

}

public OpExpandView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

initUI(context);

}

private void initUI(Context context){

View.inflate(context, R.layout.diy_op_view,this);

// 因为父视图是this，也就是OpExpandView，所以直接findViewById

mRlOut = (RelativeLayout) findViewById(R.id.mRlOut);

mIvcCenter = (ImageView) findViewById(R.id.mIvcCenter);

mIvcCenter.setOnClickListener(this);

}

@Override

public void onClick(View v) {

switch (v.getId()){

// 点击中间的ImageView

case R.id.mIvcCenter:

scaleGeneral(mIvcCenter,2000,"scaleX",1.0f,0.0f);

scaleGeneral(mIvcCenter,2000,"scaleY",1.0f,0.0f);

break;

}

}

/**

* 缩放属性动画

* @param view  要做缩放动画的View

* @param time  毫秒值

* @param objectName   缩放的类型，按照X还是Y

* @param start  开始的比例

* @param end 结束的比例

*/

private void scaleGeneral(View view,int time,String objectName,float start,float end){

ObjectAnimator scale = ObjectAnimator.ofFloat(mRlOut,objectName,start,end);

// 属性动画android 3.0 api 11才支持。这里就不做版本兼容了。有兴趣可换成补间动画

scale.setDuration(time);

scale.start();

}

}

二.2、加上渐变，旋转，已经boolean展示判断，定义子选项的回调

public class OpExpandView extends RelativeLayout implements View.OnClickListener {
private RelativeLayout mRlOut;
private ImageView mIvcCenter;
private ImageView mIvLeftTop;
private ImageView mIvTop;
private ImageView mIvRightTop;
private ImageView mIvLeft;
private ImageView mIvRight;
private ImageView mIvLfetBottom;
private ImageView mIvBottom;
private ImageView mIvRightBottom;
private boolean isHide = false;
private ItemClickListener itemClickListener;
public void setItemClickListener(ItemClickListener itemClickListener){
this.itemClickListener = itemClickListener;
}
public OpExpandView(Context context) {
super(context);
initUI(context);
}
public OpExpandView(Context context, AttributeSet attrs) {
super(context, attrs);
initUI(context);
}
public OpExpandView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initUI(context);
}
private void initUI(Context context){
View.inflate(context, R.layout.diy_op_view, this);
// 因为父视图是this，也就是OpExpandView，所以直接findViewById
mRlOut = (RelativeLayout) findViewById(R.id.mRlOut);
mIvcCenter = (ImageView) findViewById(R.id.mIvcCenter);
mIvcCenter.setOnClickListener(this);
//子项
mIvTop = (ImageView) findViewById(R.id.mIvTop);mIvTop.setOnClickListener(this);
mIvLeft = (ImageView) findViewById(R.id.mIvLeft);mIvLeft.setOnClickListener(this);
mIvRight = (ImageView) findViewById(R.id.mIvRight);mIvRight.setOnClickListener(this);
mIvBottom = (ImageView) findViewById(R.id.mIvBottom);mIvBottom.setOnClickListener(this);
mIvLfetBottom = (ImageView) findViewById(R.id.mIvLfetBottom);mIvLfetBottom.setOnClickListener(this);
mIvLeftTop = (ImageView) findViewById(R.id.mIvLeftTop);mIvLeftTop.setOnClickListener(this);
mIvRightTop = (ImageView) findViewById(R.id.mIvRightTop);mIvRightTop.setOnClickListener(this);
mIvRightBottom = (ImageView) findViewById(R.id.mIvRightBottom);mIvRightBottom.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()){
// 点击中间的ImageView
case R.id.mIvcCenter:
if(isHide){
scaleGeneral(mRlOut,2000,"scaleX",1.0f,0.0f);
scaleGeneral(mRlOut, 2000, "scaleY", 1.0f, 0.0f);
rotateGeneral(mRlOut, 2000, "rotationX", 1.0f, 180f);
rotateGeneral(mRlOut,2000,"rotationY",1.0f,180f);
alphaGeneral(mRlOut, 2000, "alpha", 1.0f, 0.0f);
}else{
scaleGeneral(mRlOut,2000,"scaleX",0.0f,1.0f);
scaleGeneral(mRlOut, 2000, "scaleY", 0.0f, 1.0f);
rotateGeneral(mRlOut, 2000, "rotationX", 180f, 1.0f);
rotateGeneral(mRlOut,2000,"rotationY",180f,1.0f);
alphaGeneral(mRlOut, 2000, "alpha", 0.0f, 1.0f);
}
isHide = !isHide;
break;
case R.id.mIvRight:
itemClickListener.rightClick(mIvRight);
break;
case R.id.mIvTop:
itemClickListener.topClick(mIvTop);
break;
case R.id.mIvLeft:
itemClickListener.leftClick(mIvLeft);
break;
case R.id.mIvBottom:
itemClickListener.bottomClick(mIvBottom);
break;
case R.id.mIvLeftTop:
itemClickListener.leftTopClick(mIvLeftTop);
break;
case R.id.mIvRightTop:
itemClickListener.rightTopClick(mIvRightTop);
break;
case R.id.mIvLfetBottom:
itemClickListener.leftBottomClick(mIvLfetBottom);
break;
case R.id.mIvRightBottom:
itemClickListener.rightBottomClick(mIvRightBottom);
break;
}
}
/**
* 缩放属性动画
* @param view  要做缩放动画的View
* @param time  毫秒值
* @param objectName   缩放的类型，按照X还是Y
* @param start  开始的比例
* @param end 结束的比例
*/
private void scaleGeneral(View view,int time,String objectName,float start,float end){
ObjectAnimator scale = ObjectAnimator.ofFloat(view,objectName,start,end);
// 属性动画android 3.0 api 11才支持。这里就不做版本兼容了。有兴趣可换成补间动画
scale.setDuration(time);
scale.start();
}
/**
* 旋转动画
* @param view
* @param time
* @param objectName
* @param start
* @param end
*/
private void rotateGeneral(View view,int time,String objectName,float start,float end){
ObjectAnimator rotate = ObjectAnimator.ofFloat(view,objectName,start,end);
rotate.setDuration(time);
rotate.start();
}
/**
* 透明度动画
* @param view
* @param time
* @param objectName
* @param start
* @param end
*/
private void alphaGeneral(View view,int time,String objectName,float start,float end){
ObjectAnimator alpha = ObjectAnimator.ofFloat(view,objectName,start,end);
alpha.setDuration(time);
alpha.start();
}
// 造一个回调接口
public interface ItemClickListener{
void topClick(ImageView imageView);
void leftClick(ImageView imageView);
void rightClick(ImageView imageView);
void bottomClick(ImageView imageView);
void leftTopClick(ImageView imageView);
void leftBottomClick(ImageView imageView);
void rightTopClick(ImageView imageView);
void rightBottomClick(ImageView imageView);
}

}

MainActivity

public class MainActivity extends Activity {
private OpExpandView opExpandView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
opExpandView = (OpExpandView) findViewById(R.id.mOpExpand);
// 利用自定义控件的 setItemClickListener 方法实现接口，让调用者自己决定点击事件做什么事。
opExpandView.setItemClickListener(new OpExpandView.ItemClickListener() {
@Override
public void topClick(ImageView imageView) {
Toast.makeText(MainActivity.this,"顶部Top",Toast.LENGTH_SHORT).show();
}
@Override
public void leftClick(ImageView imageView) {
Toast.makeText(MainActivity.this,"左边",Toast.LENGTH_SHORT).show();
}
@Override
public void rightClick(ImageView imageView) {
Toast.makeText(MainActivity.this,"右",Toast.LENGTH_SHORT).show();
}
@Override
public void bottomClick(ImageView imageView) {
Toast.makeText(MainActivity.this,"底部",Toast.LENGTH_SHORT).show();
}
@Override
public void leftTopClick(ImageView imageView) {
Toast.makeText(MainActivity.this,"左上",Toast.LENGTH_SHORT).show();
}
@Override
public void leftBottomClick(ImageView imageView) {
Toast.makeText(MainActivity.this,"左下",Toast.LENGTH_SHORT).show();
}
@Override
public void rightTopClick(ImageView imageView) {
Toast.makeText(MainActivity.this,"右上",Toast.LENGTH_SHORT).show();
}
@Override
public void rightBottomClick(ImageView imageView) {
Toast.makeText(MainActivity.this,"右下",Toast.LENGTH_SHORT).show();
}
});
}
}

本文的描述到此为止，在拓展控件——拓展TextView一文中，我们对拓展控件进行一个简单的博文描述。

本篇完。