Android仿优酷圆形菜单学习笔记分享

2024-04-14 16:19:50

先来看看效果：

首先来分析一下：

这个菜单可以分成三个菜单：

1.一级菜单（即最内圈那个菜单）

2.二级菜单（即中间圈那个菜单）

3.三级菜单（即最外圈那个菜单）

首先，可以将这三个菜单使用相对布局

一级菜单只有一个按钮(即home)，可以控制二级和三级菜单

二级菜单有三个按钮（即menu），中间那个按钮可以控制三级菜单

三级菜单有七个按钮

那先把布局文件先写出来，采用三个相对布局（即每个菜单采用一个相对布局）

<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.example.youkumenu.MainActivity" >

  <!-- 三级菜单 -->

  <RelativeLayout
    android:id="@+id/level3_Rl"
    android:layout_width="220dp"
    android:layout_height="110dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/level3" >

    <ImageView
      android:id="@+id/channel1"
      android:layout_marginLeft="5dp"
      android:layout_alignParentBottom="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel1"/>
    <ImageView
      android:id="@+id/channel2"
      android:layout_marginBottom="10dp"
      android:layout_marginLeft="25dp"
      android:layout_above="@id/channel1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel2"/>
    <ImageView
      android:layout_marginBottom="1dp"
      android:layout_marginLeft="52dp"
      android:layout_above="@id/channel2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel3"/>
    <ImageView
      android:layout_centerHorizontal="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel4"/>
    <ImageView
      android:id="@+id/channel7"
      android:layout_marginRight="5dp"
      android:layout_alignParentRight="true"
      android:layout_alignParentBottom="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel7"/>
    <ImageView
      android:id="@+id/channel6"
      android:layout_alignParentRight="true"
      android:layout_marginBottom="10dp"
      android:layout_marginRight="25dp"
      android:layout_above="@id/channel7"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel6"/>
    <ImageView
      android:layout_marginBottom="1dp"
      android:layout_marginRight="52dp"
      android:layout_alignParentRight="true"
      android:layout_above="@id/channel6"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel5"/>
  </RelativeLayout>

  <!-- 二级菜单 -->

  <RelativeLayout
    android:id="@+id/level2_Rl"
    android:layout_width="140dp"
    android:layout_height="70dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/level2" >
    <ImageView
      android:layout_marginLeft="3dp"
      android:layout_alignParentBottom="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/icon_search"/>
    <ImageView
      android:id="@+id/menu_Iv"
      android:layout_centerHorizontal="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/icon_menu"/>
    <ImageView
      android:id="@+id/myyouku_Iv"
      android:layout_marginRight="3dp"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/icon_myyouku"/>

  </RelativeLayout>
  <!-- 一级菜单 -->

  <RelativeLayout
    android:layout_width="80dp"
    android:layout_height="40dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/level1" >

    <ImageView
      android:id="@+id/home_Iv"
      android:layout_centerInParent="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/icon_home" />
  </RelativeLayout>

</RelativeLayout>

那好，布局写好，就能看到这样的效果，只不过现在只是静态的，没有加逻辑而已

下面就该来分析下逻辑了，先来看看home(即一级菜单中间那个按钮)

点击home，会有三种情况，下面分情况考虑：

情况1.二级、三级菜单都显示，就将二、三级菜单隐藏掉

情况2.二、三级菜单都不显示的时候，就将二级菜单显示

情况3.二级菜单显示且三级菜单不显示的时候，就将二级菜单隐藏

当然我们知道，要知道菜单隐藏或者显示，只需要设个标记位即可

那要如何隐藏或显示菜单，当然是使用动画了，可以使用补间动画和

属性动画，我这里就使用补间动画

下面就该来分析下逻辑了，先来看看menu(即二级菜单中间那个按钮)

点击menu，会有三种情况，下面分情况考虑：

情况1.三级显示的时候，就将三级菜单隐藏

情况2.三级隐藏的时候，就将三级菜单显示

这个就比较简单了，就两种情况。

public class MainActivity extends Activity implements OnClickListener{
  //一级菜单中的home按钮
  private ImageView home_Iv;
  //二级菜单中的Menu按钮
  private ImageView menu_Iv;
  //用于判断二级菜单的显示状况，true为显示，false为隐藏
  private boolean level2ListPlay = true;
  //用于判断二级菜单的显示状况，true为显示，false为隐藏
  private boolean level3ListPlay = true;
  //二级和三级菜单
  private RelativeLayout level2_Rl,level3_Rl;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initView();
  }
  //初始化组件
  private void initView() {
    home_Iv = (ImageView) findViewById(R.id.home_Iv);
    home_Iv.setOnClickListener(this);

    level2_Rl = (RelativeLayout) findViewById(R.id.level2_Rl);
    level3_Rl = (RelativeLayout) findViewById(R.id.level3_Rl);

    menu_Iv = (ImageView) findViewById(R.id.menu_Iv);
    menu_Iv.setOnClickListener(this);
  }
  @Override
  public void onClick(View v) {
    switch (v.getId()) {
    case R.id.home_Iv:   //点击home按钮的逻辑代码
      clickHomeIv();
      break;
    case R.id.menu_Iv:
      clickMenuIv();   //点击二级菜单中的menu按钮的逻辑代码
      break;
    default:
      break;
    }
  }
  //点击二级菜单中的menu按钮的逻辑代码
  private void clickMenuIv() {
    //分情况考虑
    //1.三级显示的时候，就将三级菜单隐藏
    if (level3ListPlay) {
      hideMenu(level3_Rl,0);
      level3ListPlay = false;
      return;
    }
    //2.三级隐藏的时候，就将三级菜单显示
    if (!level3ListPlay) {
      showMenu(level3_Rl);
      level3ListPlay = true;
      return;
    }
  }
  //点击一级菜单中的home按钮的逻辑代码
  private void clickHomeIv() {
    //分情况考虑
    //1.二级、三级菜单都显示，就将二、三级菜单隐藏掉
    if (level2ListPlay && level3ListPlay) {
      //将二三级菜单隐藏，并改变标记
      hideMenu(level2_Rl,300);
      hideMenu(level3_Rl,500);
      level2ListPlay = false;
      level3ListPlay = false;
      return;
    }
    //2.二、三级菜单都不显示的时候，就将二级菜单显示
    if (!level2ListPlay && !level3ListPlay) {
      showMenu(level2_Rl);
      level2ListPlay = true;
      return;
    }
    //3.二级菜单显示且三级菜单不显示的时候，就将二级菜单隐藏
    if (level2ListPlay && !level3ListPlay) {
      hideMenu(level2_Rl,0);
      level2ListPlay = false;
      return;
    }

  }
  /**
   * 显示菜单
   * @param view 要显示的菜单
   */
  private void showMenu(RelativeLayout view) {
//   view.setVisibility(View.VISIBLE);
    //旋转动画
    RotateAnimation animation = new RotateAnimation(-180, 0, Animation.RELATIVE_TO_SELF,
        0.5f, Animation.RELATIVE_TO_SELF, 1.0f);
    animation.setDuration(500);   //设置动画持续的时间
    animation.setFillAfter(true); //动画停留在动画结束的位置
    view.startAnimation(animation);
  }
  /**
   * 隐藏菜单
   * @param view 要隐藏的菜单 ,startOffset 动画延迟执行的时间
   */
  private void hideMenu(RelativeLayout view,long startOffset) {
//   view.setVisibility(View.GONE);
    /**
     * 旋转动画
     * RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue)
     * fromDegrees 开始旋转角度
     * toDegrees 旋转的结束角度
     * pivotXType X轴 参照物 （X轴的伸缩模式，可以取值为ABSOLUTE、RELATIVE_TO_SELF）
     * pivotXValue x轴 旋转的参考点（x坐标的伸缩值）
     * pivotYType Y轴 参照物 （Y轴的伸缩模式，可以取值为ABSOLUTE、RELATIVE_TO_SELF）
     * pivotYValue Y轴 旋转的参考点 (（Y坐标的伸缩值） )
     */
    RotateAnimation animation = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF,
        0.5f, Animation.RELATIVE_TO_SELF, 1.0f);
    animation.setDuration(500);
    animation.setFillAfter(true); //动画停留在动画结束的位置
    animation.setStartOffset(startOffset);   //设置动画的延迟执行
    view.startAnimation(animation);
  }
}

写到这里，应该差不多可以看到效果了，但是细心的伙伴应该会发现两个bug:

第一：当你快速点击一级菜单home按钮或二级菜单menu按钮的时候，会发现二级菜单或三级菜单的第一次动画还没执行完，又执行第二次动画，看起来就在晃一样。（原因：就是执行的动画都设定了一定时间，你点击的时间快于动画执行的时间）

解决办法：

对动画进行监听，当动画开始执行和结束的时候，对它进行监听，大家应该会想到用一个标记位来判断，可我们知道一个标记为只能判断两种状态，可这里有两种动画（显示的动画和隐藏的动画），一个标记位肯定不行，可以用一个Int值来控制

//用于记录有多少个动画在执行
  private int annimationCount = 0;
  //对动画进行监听的时候
  animation.setAnimationListener(new AnimationListener() {
      @Override
      public void onAnimationStart(Animation animation) {
//       menu_Iv.setOnClickListener(null);
//       home_Iv.setOnClickListener(null);
        annimationCount ++;
      }
      @Override
      public void onAnimationRepeat(Animation animation) {

      }
      @Override
      public void onAnimationEnd(Animation animation) {
//       menu_Iv.setOnClickListener(MainActivity.this);
//       home_Iv.setOnClickListener(MainActivity.this);
        annimationCount --;
      }
    //当点击的时候就可以进行判断，只要annimationCount值大于0，说明还有动画在执行
    if (annimationCount > 0) {
      return ;
    }

第二：当二级菜单隐藏的时候，你点击二级菜单中menu按钮(虽然现在看不见)时，你会惊奇的发现三级菜单居然显示了。（原因：补间动画，没有真正的改变组件的属性，而属性动画就不一样，大家有时间可以试试属性动画做做）

解决办法：

只要当二级菜单隐藏的时候，就让二级菜单的所有选项按钮都不可点。因为二级菜单有可以能有多个按钮，所以拿到父容器，去使它的子控件失去焦点即可。

//如果要显示菜单，那么就将相应的控件设为有焦点
    //获取父容器中有几个子控件
    int childCount = view.getChildCount();
    for (int i = 0; i < childCount; i++) {
      view.getChildAt(i).setEnabled(true);
    }

写到这里就差不多了，大家可以试试

这里把我写的完整代码贴出来：

public class MainActivity extends Activity implements OnClickListener{
  //一级菜单中的home按钮
  private ImageView home_Iv;
  //二级菜单中的Menu按钮
  private ImageView menu_Iv;
  //用于判断二级菜单的显示状况，true为显示，false为隐藏
  private boolean level2ListPlay = true;
  //用于判断二级菜单的显示状况，true为显示，false为隐藏
  private boolean level3ListPlay = true;
  //二级和三级菜单
  private RelativeLayout level2_Rl,level3_Rl;
  //用于记录有多少个动画在执行
  private int annimationCount = 0;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initView();
  }
  //初始化组件
  private void initView() {
    home_Iv = (ImageView) findViewById(R.id.home_Iv);
    home_Iv.setOnClickListener(this);

    level2_Rl = (RelativeLayout) findViewById(R.id.level2_Rl);
    level3_Rl = (RelativeLayout) findViewById(R.id.level3_Rl);

    menu_Iv = (ImageView) findViewById(R.id.menu_Iv);
    menu_Iv.setOnClickListener(this);
  }
  @Override
  public void onClick(View v) {
    switch (v.getId()) {
    case R.id.home_Iv:   //点击home按钮的逻辑代码
      clickHomeIv();
      break;
    case R.id.menu_Iv:
      clickMenuIv();   //点击二级菜单中的menu按钮的逻辑代码
      break;
    default:
      break;
    }
  }
  //点击二级菜单中的menu按钮的逻辑代码
  private void clickMenuIv() {
    //当点击的时候就可以进行判断，只要annimationCount值大于0，说明还有动画在执行
    if (annimationCount > 0) {
      return ;
    }
    //分情况考虑
    //1.三级显示的时候，就将三级菜单隐藏
    if (level3ListPlay) {
      hideMenu(level3_Rl,0);
      level3ListPlay = false;
      return;
    }
    //2.三级隐藏的时候，就将三级菜单显示
    if (!level3ListPlay) {
      showMenu(level3_Rl);
      level3ListPlay = true;
      return;
    }
  }
  //点击一级菜单中的home按钮的逻辑代码
  private void clickHomeIv() {
    //当点击的时候就可以进行判断，只要annimationCount值大于0，说明还有动画在执行
    if (annimationCount > 0) {
      return ;
    }
    //分情况考虑
    //1.二级、三级菜单都显示，就将二、三级菜单隐藏掉
    if (level2ListPlay && level3ListPlay) {
      //将二三级菜单隐藏，并改变标记
      hideMenu(level2_Rl,300);
      hideMenu(level3_Rl,500);
      level2ListPlay = false;
      level3ListPlay = false;
      return;
    }
    //2.二、三级菜单都不显示的时候，就将二级菜单显示
    if (!level2ListPlay && !level3ListPlay) {
      showMenu(level2_Rl);
      level2ListPlay = true;
      return;
    }
    //3.二级菜单显示且三级菜单不显示的时候，就将二级菜单隐藏
    if (level2ListPlay && !level3ListPlay) {
      hideMenu(level2_Rl,0);
      level2ListPlay = false;
      return;
    }

  }
  /**
   * 显示菜单
   * @param view 要显示的菜单
   */
  private void showMenu(RelativeLayout view) {
//   view.setVisibility(View.VISIBLE);
    //如果要显示菜单，那么就将相应的控件设为有焦点
    //获取父容器中有几个子控件
    int childCount = view.getChildCount();
    for (int i = 0; i < childCount; i++) {
      view.getChildAt(i).setEnabled(true);
    }
    //旋转动画
    RotateAnimation animation = new RotateAnimation(-180, 0, Animation.RELATIVE_TO_SELF,
        0.5f, Animation.RELATIVE_TO_SELF, 1.0f);
    animation.setDuration(500);   //设置动画持续的时间
    animation.setFillAfter(true); //动画停留在动画结束的位置
    view.startAnimation(animation);
    animation.setAnimationListener(new AnimationListener() {
      @Override
      public void onAnimationStart(Animation animation) {
        //动画开始的时候回调
//       menu_Iv.setOnClickListener(null);
//       home_Iv.setOnClickListener(null);
        annimationCount ++;
      }

      @Override
      public void onAnimationRepeat(Animation animation) {
        //动画执行过程调用
      }

      @Override
      public void onAnimationEnd(Animation animation) {
        //动画结束的时候调用
//       menu_Iv.setOnClickListener(MainActivity.this);
//       home_Iv.setOnClickListener(MainActivity.this);
        annimationCount --;
      }
    });
  }
  /**
   * 隐藏菜单
   * @param view 要隐藏的菜单 ,startOffset 动画延迟执行的时间
   */
  private void hideMenu(RelativeLayout view,long startOffset) {
//   view.setVisibility(View.GONE);
    //如果要隐藏菜单，那么就将相应的控件设为没有焦点
    //获取父容器中有几个子控件
    int childCount = view.getChildCount();
    for (int i = 0; i < childCount; i++) {
      view.getChildAt(i).setEnabled(false);
    }
    /**
     * 旋转动画
     * RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue)
     * fromDegrees 开始旋转角度
     * toDegrees 旋转的结束角度
     * pivotXType X轴 参照物 （X轴的伸缩模式，可以取值为ABSOLUTE、RELATIVE_TO_SELF）
     * pivotXValue x轴 旋转的参考点（x坐标的伸缩值）
     * pivotYType Y轴 参照物 （Y轴的伸缩模式，可以取值为ABSOLUTE、RELATIVE_TO_SELF）
     * pivotYValue Y轴 旋转的参考点 (（Y坐标的伸缩值） )
     */
    RotateAnimation animation = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF,
        0.5f, Animation.RELATIVE_TO_SELF, 1.0f);
    animation.setDuration(500);
    animation.setFillAfter(true); //动画停留在动画结束的位置
    animation.setStartOffset(startOffset);   //设置动画的延迟执行
    view.startAnimation(animation);
    animation.setAnimationListener(new AnimationListener() {
      @Override
      public void onAnimationStart(Animation animation) {
//       menu_Iv.setOnClickListener(null);
//       home_Iv.setOnClickListener(null);
        annimationCount ++;
      }
      @Override
      public void onAnimationRepeat(Animation animation) {

      }
      @Override
      public void onAnimationEnd(Animation animation) {
//       menu_Iv.setOnClickListener(MainActivity.this);
//       home_Iv.setOnClickListener(MainActivity.this);
        annimationCount --;
      }
    });
  }
}

布局文件：

<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.example.youkumenu.MainActivity" >

  <!-- 三级菜单 -->

  <RelativeLayout
    android:id="@+id/level3_Rl"
    android:layout_width="220dp"
    android:layout_height="110dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/level3" >

    <ImageView
      android:id="@+id/channel1"
      android:layout_marginLeft="5dp"
      android:layout_alignParentBottom="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel1"/>
    <ImageView
      android:id="@+id/channel2"
      android:layout_marginBottom="10dp"
      android:layout_marginLeft="25dp"
      android:layout_above="@id/channel1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel2"/>
    <ImageView
      android:layout_marginBottom="1dp"
      android:layout_marginLeft="52dp"
      android:layout_above="@id/channel2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel3"/>
    <ImageView
      android:layout_centerHorizontal="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel4"/>
    <ImageView
      android:id="@+id/channel7"
      android:layout_marginRight="5dp"
      android:layout_alignParentRight="true"
      android:layout_alignParentBottom="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel7"/>
    <ImageView
      android:id="@+id/channel6"
      android:layout_alignParentRight="true"
      android:layout_marginBottom="10dp"
      android:layout_marginRight="25dp"
      android:layout_above="@id/channel7"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel6"/>
    <ImageView
      android:layout_marginBottom="1dp"
      android:layout_marginRight="52dp"
      android:layout_alignParentRight="true"
      android:layout_above="@id/channel6"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/channel5"/>
  </RelativeLayout>

  <!-- 二级菜单 -->

  <RelativeLayout
    android:id="@+id/level2_Rl"
    android:layout_width="140dp"
    android:layout_height="70dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/level2" >
    <ImageView
      android:layout_marginLeft="3dp"
      android:layout_alignParentBottom="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/icon_search"/>
    <ImageView
      android:id="@+id/menu_Iv"
      android:layout_centerHorizontal="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/icon_menu"/>
    <ImageView
      android:id="@+id/myyouku_Iv"
      android:layout_marginRight="3dp"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/icon_myyouku"/>

  </RelativeLayout>
  <!-- 一级菜单 -->

  <RelativeLayout
    android:layout_width="80dp"
    android:layout_height="40dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/level1" >

    <ImageView
      android:id="@+id/home_Iv"
      android:layout_centerInParent="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/icon_home" />
  </RelativeLayout>

</RelativeLayout>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家继续关注我们的更多精彩内容！

Android实现顶部导航菜单左右滑动效果

本文给大家介绍在Android中如何实现顶部导航菜单左右滑动效果,具体内容如下第一种解决方案: 实现原理是使用android-support-v4.jar包中ViewPager控件,在ViewPager控件中设置流布局,再在流布局中设置几项TextView,给每一个TextView设置相关参数,事件等.关于ViewPager控件可以设置全屏幕滑动效果,当然也可以实现局部滑动效果,下面介绍导航菜单. 关于导航菜单,相信大家对它并不陌生,比如在新闻客户端中就经常使用左右滑动菜单来显示不同类别的新闻
Android实现下拉菜单Spinner效果

Android 中下拉菜单,即如html中的<select>,关键在于调用setDropDownViewResource方法,以XML的方式定义下拉菜单要显示的模样 1.1.activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
Android自定义控件之仿优酷菜单

去年的优酷HD版有过这样一种菜单,如下图: 应用打开之后,先是三个弧形的三级菜单,点击实体键menu之后,这三个菜单依次旋转退出,再点击实体键menu之后,一级菜单会旋转进入,点击一级菜单,二级菜单旋转进入,点击二级菜单的menu键,三级菜单旋转进入,再次点击二级菜单的旋转键,三级菜单又会旋转退出,这时再点击一级菜单,二级菜单退出,最后点击实体menu键,一级菜单退出. 总体来说实现这样的功能: (1)点击实体menu键时,如果界面上有菜单显示,不管有几个,全部依次退出,如果界面上没有菜单显示,
Android编程实现仿优酷旋转菜单效果(附demo源码)

本文实例讲述了Android编程实现仿优酷旋转菜单效果.分享给大家供大家参考,具体如下: 首先,看下效果: 不好意思,不会制作动态图片,只好上传静态的了,如果谁会,请教教我吧. 首先,看下xml文件: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" a
Android App中DrawerLayout抽屉效果的菜单编写实例

抽屉效果的导航菜单看了很多应用,觉得这种侧滑的抽屉效果的菜单很好. 不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面上一个按钮点击,菜单就滑出来,而且感觉能放很多东西. 库的引用: 首先, DrawerLayout这个类是在Support Library里的,需要加上android-support-v4.jar这个包. 然后程序中用时在前面导入import android.support.v4.widget.DrawerLayout; 如果找不到这个类,首先用SDK Manager更
Android仿微信顶/底部菜单栏效果

本文要实现仿微信微信底部菜单栏+顶部菜单栏,采用ViewPage来做,每一个page对应一个XML,当手指在ViewPage左右滑动时,就相应显示不同的page(其实就是xml)并且同时改变底部菜单按钮的图片变暗或变亮,同时如果点击底部菜单按钮,左右滑动page(其实就是xml)并且改变相应按钮的亮度. 一.布局 1.顶部菜单布局,命名为top_layout.xml <?xml version="1.0" encoding="utf-8"?> <R
Android实现自定义滑动式抽屉效果菜单

在Andoird使用Android自带的那些组件,像SlidingDrawer和DrawerLayout都是抽屉效果的菜单,但是在项目很多要实现的功能都收到Android这些自带组件的限制,导致很难完成项目的需求,自定义的组件,各方面都在自己的控制之下,从而根据需求做出调整.想要实现好的效果,基本上都的基于Android的OnTouch事件自己实现响应的功能. 首先,给大家先看一下整体的效果: 滑动的加速度效果都是有的,具体的体验,只能安装后才能查看. 接下来,看代码: 代码从MainActiv
Android仿今日头条APP实现下拉导航选择菜单效果

本文实例为大家分享了在Android中如何实现下拉导航选择菜单效果的全过程,供大家参考,具体内容如下关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单,也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果. 关于它的实现原理,其实也是挺简单的,就是使用PopupWindow来进行展现,在显示时控制其高度并配置以相应的动画效果.在PopupWindow中我使用GridView
Android编程实现仿优酷圆盘旋转菜单效果的方法详解【附demo源码下载】

本文实例讲述了Android编程实现仿优酷圆盘旋转菜单效果的方法.分享给大家供大家参考,具体如下: 目前,用户对安卓应用程序的UI设计要求越来越高,因此,掌握一些新颖的设计很有必要. 比如菜单,传统的菜单已经不能满足用户的需求. 其中优酷中圆盘旋转菜单的实现就比较优秀,这里我提供下我的思路及实现,仅供参考. 该菜单共分里外三层导航菜单.可以依次从外向里关闭三层菜单,也可以反向打开,并且伴有圆盘旋转的动画效果首先,看下效果: 以下是具体的代码及解释: 1. 菜单布局文件: 大家看到主要有三个Ra
Android仿微信滑动弹出编辑、删除菜单效果、增加下拉刷新功能

如何为不同的list item呈现不同的菜单,本文实例就为大家介绍了Android仿微信或QQ滑动弹出编辑.删除菜单效果.增加下拉刷新等功能的实现,分享给大家供大家参考,具体内容如下效果图: 1. 下载开源项目,并将其中的liberary导入到自己的项目中: 2. 使用SwipeMenuListView代替ListView,在页面中布局: <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/swipeRefresh
Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】

本文实例讲述了Android编程实现仿美团或淘宝的多级分类菜单效果.分享给大家供大家参考,具体如下: 这里要实现的是诸如美团/淘宝/百度糯米多级分类菜单效果.当分类数量非常多时可以考虑采用两级分类,而诸如美团这种表现方式是一个不错的选择. 首先上效果图: 主要代码: 1. PopupWindow初始化过程: popupWindow = new PopupWindow(this); View view = LayoutInflater.from(this).inflate(R.layout.

Android仿优酷圆形菜单学习笔记分享

相关推荐

随机推荐