自定义View（一）-ViewGroup实现优酷菜单

自定义View的第一个学习案例

　　ViewGroup是自动以View中比较常用也比较简单的一种方式，通过组合现有的UI控件，绘制出一个全新的View

效果如下：

主类实现如下：

package com.demo.youku;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v7.widget.Toolbar;

import android.view.KeyEvent;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.RelativeLayout;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    /**

     * False: hide

     * 是否显示圆环 默认显示

     * true:显示

     * false:隐藏

     */

    private Boolean showLevel1 = true;

    private Boolean showLevel2 = true;

    private Boolean showLevel3 = true;

    private ImageView iconHome;

    private ImageView iconMenu;

    private RelativeLayout level1;//第一层

    private RelativeLayout level2;//第二层

    private RelativeLayout level3;//第三层

    private Toolbar toolbar;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);

        toolbar.setTitle("优酷菜单");

        //设置导航图标要在setSupportActionBar方法之后

        setSupportActionBar(toolbar);

        toolbar.setNavigationIcon(R.mipmap.icon_menu);

        iconHome = (ImageView) findViewById(R.id.home);

        iconMenu = (ImageView) findViewById(R.id.icon_menu);

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

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

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

        MyOnclickListener myOnclickListener = new MyOnclickListener();

        iconHome.setOnClickListener(myOnclickListener);

        iconMenu.setOnClickListener(myOnclickListener);

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                //如果一级二级三级菜单显示 则关闭

                if (showLevel1 || showLevel2 || showLevel3) {

                    showLevel1 = false;

                    showLevel2 = false;

                    if (showLevel3) {

                        showLevel3 = false;

                        Tools.hideView(level3);

                        Tools.hideView(level2, 400);

                        Tools.hideView(level1, 800);

                    } else {

                        Tools.hideView(level2);

                        Tools.hideView(level1, 300);

                    }

                } else {

                    //如果都未显示 则显示一级二级菜单

                    showLevel1 = true;

                    showLevel2 = true;

                    Tools.showView(level1);

                    Tools.showView(level2);

                }

            }

        });

    }

    class MyOnclickListener implements View.OnClickListener {

        @Override

        public void onClick(View view) {

            //

            switch (view.getId()) {

                case R.id.home:

                    if (showLevel2) {

                        showLevel2 = false;

                        Tools.hideView(level2);

                        if (showLevel3) {

                            showLevel3 = false;

                            Tools.hideView(level3, 400);

                        }

                    } else {

                        showLevel2 = true;

                        Tools.showView(level2);

                    }

                    break;

                case R.id.icon_menu:

                    if (showLevel3) {

                        showLevel3 = false;

                        Tools.hideView(level3);

                    } else {

                        showLevel3 = true;

                        Tools.showView(level3);

                    }

                    break;

            }

        }

    }

}

Tools类主要用于控制View的显示和隐藏动画，提供了属性动画，不补间动画两种实现方式

package com.demo.youku;

import android.animation.ObjectAnimator;

import android.view.View;

import android.view.ViewGroup;

import android.view.animation.RotateAnimation;

import android.widget.RelativeLayout;

public class Tools {

    /**

     * 顺时针旋转0-180度隐藏view

     *

     * @param view

     */

    public static void hideView(ViewGroup view) {

        hideView(view, 0);

    }

    /**

     * 顺时针旋转180-360度显示view

     *

     * @param view

     */

    public static void showView(ViewGroup view) {

/*        RotateAnimation ra = new RotateAnimation(180, 360, view.getWidth() / 2, view.getHeight());

        ra.setDuration(500);

        ra.setFillAfter(true);

        view.startAnimation(ra);

        //启动ViewGroup中所有子元素的点击事件

        for (int i = 0; i < view.getChildCount(); i++) {

            View childView = view.getChildAt(i);

            childView.setEnabled(true);

        }*/

        ObjectAnimator animator = ObjectAnimator.ofFloat(view, "Rotation", 180, 360);

        animator.setDuration(500);

        animator.start();

        view.setPivotX(view.getWidth() / 2);

        view.setPivotX(view.getHeight());

    }

    /**

     * 延迟旋转

     *

     * @param view       需要旋转的view

     * @param setTimeOut 动画延迟时间

     */

    public static void hideView(ViewGroup view, int setTimeOut) {

        /*RotateAnimation ra = new RotateAnimation(0, 180, view.getWidth() / 2, view.getHeight());

        ra.setDuration(500);//动画时间

        ra.setFillAfter(true);//是否保留动画结束状态

        ra.setStartOffset(setTimeOut);//设置延迟时间

        view.startAnimation(ra);

        //禁用ViewGroup中错有元素的点击事件

        for (int i = 0; i < view.getChildCount(); i++) {

            View childView = view.getChildAt(i);

            childView.setEnabled(false);

        }*/

<?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"

    tools:context="com.demo.youku.MainActivity">

    <android.support.v7.widget.Toolbar

        android:background="?attr/colorPrimary"

        android:id="@+id/toolbar"

        android:layout_width="match_parent"

        android:layout_height="?attr/actionBarSize">

    </android.support.v7.widget.Toolbar>

    <RelativeLayout

        android:id="@+id/level3"

        android:layout_width="280dp"

        android:layout_height="140dp"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:background="@mipmap/level3">

        <ImageView

            android:id="@+id/chanel1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentBottom="true"

            android:layout_marginBottom="8dp"

            android:layout_marginLeft="8dp"

            android:background="@mipmap/channel1" />

        <ImageView

            android:id="@+id/chanel2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_above="@+id/chanel1"

            android:layout_marginBottom="8dp"

            android:layout_marginLeft="30dp"

            android:background="@mipmap/channel2" />

        <ImageView

            android:id="@+id/chanel3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_above="@+id/chanel2"

            android:layout_marginBottom="8dp"

            android:layout_marginLeft="60dp"

            android:background="@mipmap/channel3" />

        <ImageView

            android:id="@+id/chanel4"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_centerHorizontal="true"

            android:layout_marginTop="8dp"

            android:background="@mipmap/channel4" />

        <ImageView

            android:id="@+id/chanel5"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentBottom="true"

            android:layout_alignParentRight="true"

            android:layout_marginBottom="8dp"

            android:layout_marginRight="8dp"

            android:background="@mipmap/channel5" />

        <ImageView

            android:id="@+id/chanel6"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_above="@+id/chanel5"

            android:layout_alignParentRight="true"

            android:layout_marginBottom="8dp"

            android:layout_marginRight="30dp"

            android:background="@mipmap/channel6" />

        <ImageView

            android:id="@+id/chanel7"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_above="@+id/chanel6"

            android:layout_alignParentRight="true"

            android:layout_marginBottom="8dp"

            android:layout_marginRight="60dp"

            android:background="@mipmap/channel7" />

    </RelativeLayout>

    <RelativeLayout

        android:id="@+id/level2"

        android:layout_width="180dp"

        android:layout_height="90dp"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:background="@mipmap/level2">

        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentBottom="true"

            android:layout_marginBottom="8dp"

            android:layout_marginLeft="8dp"

            android:background="@mipmap/icon_search" />

        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentBottom="true"

            android:layout_alignParentRight="true"

            android:layout_marginBottom="8dp"

            android:layout_marginRight="8dp"

            android:background="@mipmap/icon_myyouku" />

        <ImageView

            android:id="@+id/icon_menu"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentTop="true"

            android:layout_centerHorizontal="true"

            android:layout_marginTop="4dp"

            android:background="@mipmap/icon_menu" />

    </RelativeLayout>

    <RelativeLayout

        android:id="@+id/level1"

        android:layout_width="100dp"

        android:layout_height="50dp"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:background="@mipmap/level1">

        <ImageView

            android:id="@+id/home"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_centerInParent="true"

            android:background="@mipmap/icon_home" />

    </RelativeLayout>

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:text="ViewGrou之优酷菜单"

        android:textSize="24sp" />

</RelativeLayout>

        animator.setStartDelay(setTimeOut);

        animator.start();

        view.setPivotX(view.getWidth() / 2);

        view.setPivotY(view.getHeight());

    }

}

页面布局如下，布局中使用Toolbar代替ActionBar:主要需要更换默认主题：Theme.AppCompat.Light.NoActionBar

自定义View（一）-ViewGroup实现优酷菜单的更多相关文章

android自定义控件之模仿优酷菜单
去年的优酷HD版有过这样一种菜单,如下图: 应用打开之后,先是三个弧形的三级菜单,点击实体键menu之后,这三个菜单依次旋转退出,再点击实体键menu之后,一级菜单会旋转进入,点击一级菜单,二级菜单旋 ...
自定义View和ViewGroup
为了扫除学习中的盲点,尽可能多的覆盖Android知识的边边角角,决定对自定义View做一个稍微全面一点的使用方法总结,在内容上面并没有什么独特的地方,其他大神们的博客上面基本上都有讲这方面的内容,如 ...
android 自定义 view 和 ViewGroup
---恢复内容开始--- ViewGroup的职能为:给childView计算出建议的宽和高和测量模式 :决定childView的位置:为什么只是建议的宽和高,而不是直接确定呢,别忘了childVie ...
【Android 应用开发】自定义View 和 ViewGroup
一. 自定义View介绍自定义View时, 继承View基类, 并实现其中的一些方法. (1) ~ (2) 方法与构造相关 (3) ~ (5) 方法与组件大小位置相关 (6) ~ (9) 方法与触摸 ...
自定义View和ViewGroup（有这一篇就够了）
为了扫除学习中的盲点,尽可能多的覆盖Android知识的边边角角,决定对自定义View做一个稍微全面一点的使用方法总结,在内容上面并没有什么独特的地方,其他大神们的博客上面基本上都有讲这方面的内容,如 ...
自定义View 和 ViewGroup
一. 自定义View介绍自定义View时, 继承View基类, 并实现其中的一些方法. (1) ~ (2) 方法与构造相关 (3) ~ (5) 方法与组件大小位置相关 (6) ~ (9) 方法与触摸 ...
Android自定义View（RollWeekView－炫酷的星期日期选择控件）
转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义Cus ...
Android自定义组件系列【1】——自定义View及ViewGroup
View类是ViewGroup的父类,ViewGroup具有View的所有特性,ViewGroup主要用来充当View的容器,将其中的View作为自己孩子,并对其进行管理,当然孩子也可以是ViewGr ...
自定义View总结2
自定义控件: 1.组合控件:将系统原生控件组合起来,加上动画效果,形成一种特殊的UI效果 2.纯粹自定义控件:继承自系统的View,自己去实现view效果优酷菜单: 1.系统原生的旋转和位置动画并没 ...

随机推荐

负margin使用权威指南
自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...
word wrap 解惑
源起我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
【转】selenium及webdriver的原理
主要内容转自:http://blog.csdn.net/ant_ren/article/details/7968582和http://blog.csdn.net/ant_ren/article/det ...
【M35】让自己习惯于标准C++语言
1.最近一些年C++语言增加的特性有: a.RTTI,namespace,bool,关键字mutable和explicit,enums,以及const static int可以直接初始化. b.扩充了 ...
.net+mssql制作抽奖程序思路及源码
近期一直在研究数据库,刚好有个项目要做抽奖程序,恩,拿来练练手吧. 抽奖程序: 思路整理,无非就是点一个按钮,然后一个图片旋转一会就出来个结果就行了,可这个程序的要求不是这样的,是需要从数据库中随机抽 ...
CircleWaveProgressBar
https://github.com/eltld/CircleWaveProgressBar
Testin云測公布首份国内应用质量报告:半数APP平均启动时间不合格
Testin云測公布首份国内应用质量报告:半数APP平均启动时间不合格 2014/10/23 · Testin · 实验室报告日前,Testin云測旗下质量管家Master通过随机取样1605款国内 ...
C# 中传递多个参数给多线程
1.方式一:使用ParameterizedThreadStart委托如果使用了ParameterizedThreadStart委托,线程的入口必须有一个object类型的参数,且返回类型为void. ...
Java再学习——sleep(), wait(), notify(), notifyAll()
首先一点就是Thread.sleep(long millis)方法是Thread类的静态方法,其他三个wait(), notify()和notifyAll()都是Object类的方法. sleep(l ...
数据分析之sql篇
刚才在琢磨客户分析的时候,突然想到一个假设,如果某个客户的续约率很高,那么证明他在产品的使用上效果是很好的,如果这些些产品的组合十分有效,那么查看其他类似的客户的续约率,做一次论证应该是有意义的.于是 ...

自定义View（一）-ViewGroup实现优酷菜单

自定义View（一）-ViewGroup实现优酷菜单的更多相关文章

随机推荐

热门专题