标签:
自定义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
标签:
原文地址:http://www.cnblogs.com/chenyangqi/p/5777422.html