组合控件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一文中，我们对拓展控件进行一个简单的博文描述。

本篇完。