Android编程实现仿优酷旋转菜单效果(附demo源码)

前端技术 2023/09/03 Android

本文实例讲述了Android编程实现仿优酷旋转菜单效果。分享给大家供大家参考，具体如下：

首先，看下效果：

不好意思，不会制作动态图片，只好上传静态的了，如果谁会，请教教我吧。

首先，看下xml文件：

<?xml version=\"1.0\" encoding=\"utf-8\"?> 
<RelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\" 
  android:layout_width=\"fill_parent\" 
  android:layout_height=\"fill_parent\" 
  android:background=\"#c9c9c9\" > 
  <RelativeLayout 
    android:id=\"@+id/relate_level3\" 
    android:layout_width=\"280dp\" 
    android:layout_height=\"140dp\" 
    android:layout_alignParentBottom=\"true\" 
    android:layout_centerHorizontal=\"true\" 
    android:background=\"@drawable/level3\" > 
    <ImageButton 
     android:id=\"@+id/c1\" 
     android:layout_width=\"wrap_content\" 
     android:layout_height=\"wrap_content\" 
     android:layout_alignParentBottom=\"true\" 
     android:layout_marginBottom=\"6dip\" 
     android:layout_marginLeft=\"12dip\" 
     android:background=\"@drawable/channel1\" /> 
    <ImageButton 
     android:id=\"@+id/c2\" 
     android:layout_width=\"wrap_content\" 
     android:layout_height=\"wrap_content\" 
     android:layout_above=\"@+id/c1\" 
     android:layout_marginBottom=\"12dip\" 
     android:layout_marginLeft=\"28dip\" 
     android:background=\"@drawable/channel2\" /> 
    <ImageButton 
     android:id=\"@+id/c3\" 
     android:layout_width=\"wrap_content\" 
     android:layout_height=\"wrap_content\" 
     android:layout_above=\"@+id/c2\" 
     android:layout_marginBottom=\"8dip\" 
     android:layout_marginLeft=\"6dip\" 
     android:layout_toRightOf=\"@+id/c2\" 
     android:background=\"@drawable/channel3\" /> 
    <ImageButton 
     android:id=\"@+id/c4\" 
     android:layout_width=\"wrap_content\" 
     android:layout_height=\"wrap_content\" 
     android:layout_centerHorizontal=\"true\" 
     android:layout_margin=\"6dip\" 
     android:background=\"@drawable/channel4\" /> 
    <ImageButton 
     android:id=\"@+id/c5\" 
     android:layout_width=\"wrap_content\" 
     android:layout_height=\"wrap_content\" 
     android:layout_above=\"@+id/c6\" 
     android:layout_marginBottom=\"8dip\" 
     android:layout_marginRight=\"6dip\" 
     android:layout_toLeftOf=\"@+id/c6\" 
     android:background=\"@drawable/channel5\" /> 
    <ImageButton 
     android:id=\"@+id/c6\" 
     android:layout_width=\"wrap_content\" 
     android:layout_height=\"wrap_content\" 
     android:layout_above=\"@+id/c7\" 
     android:layout_alignParentRight=\"true\" 
     android:layout_marginBottom=\"12dip\" 
     android:layout_marginRight=\"28dip\" 
     android:background=\"@drawable/channel6\" /> 
    <ImageButton 
     android:id=\"@+id/c7\" 
     android:layout_width=\"wrap_content\" 
     android:layout_height=\"wrap_content\" 
     android:layout_alignParentBottom=\"true\" 
     android:layout_alignParentRight=\"true\" 
     android:layout_marginBottom=\"6dip\" 
     android:layout_marginRight=\"12dip\" 
     android:background=\"@drawable/channel7\" /> 
  </RelativeLayout> 
  <RelativeLayout 
    android:id=\"@+id/relate_level2\" 
    android:layout_width=\"180dp\" 
    android:layout_height=\"90dp\" 
    android:layout_alignParentBottom=\"true\" 
    android:layout_centerHorizontal=\"true\" 
    android:background=\"@drawable/level2\" > 
    <ImageButton 
     android:id=\"@+id/menu\" 
     android:layout_width=\"wrap_content\" 
     android:layout_height=\"wrap_content\" 
     android:layout_centerHorizontal=\"true\" 
     android:layout_margin=\"6dip\" 
     android:background=\"@drawable/icon_menu\" /> 
    <ImageButton 
     android:id=\"@+id/search\" 
     android:layout_width=\"wrap_content\" 
     android:layout_height=\"wrap_content\" 
     android:layout_alignParentBottom=\"true\" 
     android:layout_margin=\"10dip\" 
     android:background=\"@drawable/icon_search\" /> 
    <ImageButton 
     android:id=\"@+id/myyouku\" 
     android:layout_width=\"wrap_content\" 
     android:layout_height=\"wrap_content\" 
     android:layout_alignParentBottom=\"true\" 
     android:layout_alignParentRight=\"true\" 
     android:layout_margin=\"10dip\" 
     android:background=\"@drawable/icon_myyouku\" /> 
  </RelativeLayout> 
  <RelativeLayout 
    android:id=\"@+id/relate_level1\" 
    android:layout_width=\"100dp\" 
    android:layout_height=\"50dp\" 
    android:layout_alignParentBottom=\"true\" 
    android:layout_centerHorizontal=\"true\" 
    android:background=\"@drawable/level1\" > 
    <ImageButton 
     android:id=\"@+id/home\" 
     android:layout_width=\"wrap_content\" 
     android:layout_height=\"wrap_content\" 
     android:layout_alignParentBottom=\"true\" 
     android:layout_centerHorizontal=\"true\" 
     android:layout_marginBottom=\"10dp\" 
     android:background=\"@drawable/icon_home\" /> 
  </RelativeLayout> 
</RelativeLayout>

大家看到主要有三个RalativeLayout，就是大家看到的三层，但是关于图片的倾斜 是怎样实现的呢？实际上是个假象，图片是正放的，里面图像是倾斜的。如下图：

这样大概能明白，下面就是开始动画效果了，先看下主Activity：

public class TestYoukuActivity extends Activity { 
  /** Called when the activity is first created. */ 
  private boolean areLevel2Showing = true, areLevel3Showing = true; 
  private RelativeLayout relate_level2, relate_level3; 
  private ImageButton home, menu; 
  @Override 
  public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main); 
    findViews(); 
    setListener();  
  } 
  private void findViews() { 
    relate_level2 = (RelativeLayout) findViewById(R.id.relate_level2); 
    relate_level3 = (RelativeLayout) findViewById(R.id.relate_level3); 
    home = (ImageButton) findViewById(R.id.home); 
    menu = (ImageButton) findViewById(R.id.menu); 
  } 
  private void setListener() { 
    // 给大按钮设置点击事件 
    home.setOnClickListener(new OnClickListener() { 
     @Override 
     public void onClick(View v) { 
       if (!areLevel2Showing) { 
        MyAnimation.startAnimationsIn(relate_level2, 500); 
       } else { 
        if (areLevel3Showing) { 
          MyAnimation.startAnimationsOut(relate_level2, 500, 500); 
          MyAnimation.startAnimationsOut(relate_level3, 500, 0); 
          areLevel3Showing = !areLevel3Showing; 
        } else { 
          MyAnimation.startAnimationsOut(relate_level2, 500, 0); 
        } 
       } 
       areLevel2Showing = !areLevel2Showing; 
     } 
    }); 
    menu.setOnClickListener(new OnClickListener() { 
     @Override 
     public void onClick(View v) { 
       if (!areLevel3Showing) { 
        MyAnimation.startAnimationsIn(relate_level3, 500); 
       } else { 
        MyAnimation.startAnimationsOut(relate_level3, 500, 0); 
       } 
       areLevel3Showing = !areLevel3Showing; 
     } 
    }); 
  } 
}

应该注意到了：

本站下载。

希望本文所述对大家Android程序设计有所帮助。

本文地址：https://www.stayed.cn/item/8365

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案