안 드 로 이 드 모방 유쿠 원형 메뉴 학습 노트 공유

23699 단어 Android유쿠 하 다메뉴
본 논문 의 사례 는 안 드 로 이 드 유쿠 원형 메뉴 의 구체 적 인 코드 를 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같다.
먼저 효과 보기:

먼저 분석 해 보 겠 습 니 다.
이 메뉴 는 세 개의 메뉴 로 나 눌 수 있다.
1.1 단계 메뉴(즉,가장 안쪽 에 있 는 메뉴)
2.2 단계 메뉴(즉,중간 에 있 는 메뉴)
3.3 급 메뉴(즉,가장 바깥쪽 메뉴)
우선,이 세 메뉴 를 상대 적 으로 배치 할 수 있 습 니 다.
1 급 메뉴 는 단추(즉 홈)만 있 고 2 급 과 3 급 메뉴 를 제어 할 수 있 습 니 다.
2 급 메뉴 에는 세 개의 단추(즉 menu)가 있 습 니 다.중간 에 있 는 단 추 는 3 급 메뉴 를 제어 할 수 있 습 니 다.
3 급 메뉴 에 7 개의 버튼 이 있 습 니 다.
그러면 먼저 레이아웃 파일 을 먼저 쓰 고 세 개의 상대 적 인 레이아웃 을 사용 합 니 다.(즉,메뉴 마다 상대 적 인 레이아웃 을 사용 합 니 다)

<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>
좋 습 니 다.레이아웃 을 잘 쓰 면 이런 효 과 를 볼 수 있 습 니 다.다만 지금 은 정적 일 뿐 논리 적 이지 않 을 뿐 입 니 다.

다음은 논 리 를 분석 해 야 합 니 다.먼저 홈(즉,1 급 메뉴 중간 에 있 는 버튼)을 보 겠 습 니 다.
홈 을 클릭 하면 세 가지 상황 이 있 습 니 다.다음 상황 에 따라 고려 하 겠 습 니 다.
상황 1.2 급,3 급 메뉴 가 모두 표시 되면 2,3 급 메뉴 를 숨 깁 니 다.
상황 2.2,3 단계 메뉴 가 표시 되 지 않 을 때 2 단계 메뉴 를 표시 합 니 다.
상황 3.2 단계 메뉴 가 표시 되 고 3 단계 메뉴 가 표시 되 지 않 을 때 2 단계 메뉴 를 숨 깁 니 다.
물론 메뉴 가 숨 기거 나 표시 되 는 것 을 알 기 위해 서 는 표시 자 리 를 설정 하면 된다 는 것 을 알 고 있 습 니 다.
메뉴 를 숨 기거 나 표시 하 는 방법 은 애니메이션 을 사용 하 는 것 입 니 다.추가 애니메이션 과
속성 애니메이션
다음은 논 리 를 분석 해 야 합 니 다.먼저 menu(즉,2 급 메뉴 중간 에 있 는 버튼)를 보 겠 습 니 다.
menu 를 누 르 면 세 가지 상황 이 있 습 니 다.다음 상황 에 따라 고려 하 겠 습 니 다.
상황 1.3 단계 표시 시 3 단계 메뉴 숨 기기
상황 2.3 단계 숨 길 때 3 단계 메뉴 보이 기
이것 은 비교적 간단 하 다.단지 두 가지 상황 이다.

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 를 발견 할 수 있 을 것 같 습 니 다.
첫 번 째:1 급 메뉴 홈 단추 나 2 급 메뉴 menu 단 추 를 빠르게 클릭 하면 2 급 메뉴 나 3 급 메뉴 의 첫 번 째 애니메이션 이 아직 실행 되 지 않 았 고 두 번 째 애니메이션 을 실행 하면 흔 들 리 는 것 처럼 보 입 니 다.(원인:실 행 된 애니메이션 은 모두 일정한 시간 을 설정 하고 애니메이션 이 실 행 된 시간 보다 빨리 클릭 합 니 다)
해결 방법:
애니메이션 을 감청 합 니 다.애니메이션 이 실행 되 고 끝 날 때 이 를 감청 합 니 다.여러분 들 은 하나의 태그 비트 로 판단 할 생각 을 하 실 것 입 니 다.그러나 우 리 는 두 가지 상태 만 판단 할 수 있다 는 것 을 알 고 있 습 니 다.그런데 여기 에는 두 가지 애니메이션(보 여 주 는 애니메이션 과 숨겨 진 애니메이션)이 있 습 니 다.하나의 태그 비트 는 안 되 고 하나의 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 ;
  }
두 번 째:2 급 메뉴 가 숨 어 있 을 때 2 급 메뉴 에서 menu 단 추 를 누 르 면 3 급 메뉴 가 나타 나 는 것 을 놀 라 게 발견 할 수 있 습 니 다.(원인:추가 애니메이션 은 구성 요소 의 속성 을 진정 으로 바 꾸 지 않 았 고 속성 애니메이션 은 다 릅 니 다.여러분 은 시간 이 있 으 면 속성 애니메이션 을 해 볼 수 있 습 니 다)
해결 방법:
2 급 메뉴 가 숨겨 지면 2 급 메뉴 의 모든 옵션 단 추 를 누 르 지 못 하 게 합 니 다.2 급 메뉴 에 여러 개의 단추 가 있 기 때문에 부모 용 기 를 가 져 와 하위 컨트롤 에 초점 을 잃 으 면 됩 니 다.

//       ，              
  //            
  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>
이상 은 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저희 의 더 많은 멋 진 내용 에 관심 을 가 져 주 셨 으 면 좋 겠 습 니 다!
Ajax 클릭 하여 데이터 목록 계속 불 러 오기
Ajax 기초 상세 설명 튜 토리 얼(2)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage