組合控制元件的基本使用
阿新 • • 發佈：2018-12-15
1、此篇文章不適合大家閱讀，只是自己做的摘記
2、組合控制元件：將系統原生態的控制元件組合效果，加上動畫效果，形成特殊UI效果
3、此次程式碼主要實現優酷選單
注意點：
1、邏輯一定要準確，if else 一般同時出現，並做好備註，以及條件轉化；
2、系統原生的動畫旋轉和位置動畫並沒有真正改變View的位置，所以在旋轉過程中，我們必須做進一步處理，旋轉時，將內部元件設定不可點選
3、一步一步慢慢寫，並修改bug ，更多的瞭解Animation ；
介面佈局：
<RelativeLayout主程式碼：xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:showIn="@layout/activity_main" tools:context=".MainActivity"> <RelativeLayout android:layout_width="100dp" android:layout_height="50dp" android:id="@+id/level1" android:background="@drawable/level1" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true"> <ImageView android:id="@+id/iv_home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_home" android:layout_centerInParent="true"/> </RelativeLayout> <RelativeLayout android:layout_width="173dp" android:layout_height="85dp" android:background="@drawable/level2" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:id="@+id/level2" > <ImageView android:layout_width="38dp" android:layout_height="wrap_content" android:src="@drawable/icon_search" android:layout_marginLeft="5dp" android:layout_alignParentBottom="true" /> <ImageView android:layout_width="38dp" android:layout_height="wrap_content" android:src="@drawable/icon_myyouku" android:layout_marginLeft="5dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true"/> <ImageView android:id="@+id/iv_menu" android:layout_width="38dp" android:layout_height="wrap_content" android:src="@drawable/icon_menu" android:layout_centerHorizontal="true"/> </RelativeLayout> <RelativeLayout android:id="@+id/level3" android:layout_width="258dp" android:layout_height="129dp" android:background="@drawable/level3" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" > <ImageView android:layout_width="38dp" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:src="@drawable/channel1" android:layout_marginLeft="5dp" /> <ImageView android:layout_width="38dp" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:src="@drawable/channel2" android:layout_marginLeft="2dp" /> <ImageView android:layout_width="38dp" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="40dp" android:src="@drawable/channel3" android:layout_marginLeft="25dp" android:id="@+id/imageView2" /> <ImageView android:layout_width="38dp" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="40dp" android:src="@drawable/channel4" android:layout_marginRight="20dp" /> <ImageView android:layout_width="38dp" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="70dp" android:src="@drawable/channel5" android:layout_marginRight="60dp" android:id="@+id/imageView" /> <ImageView android:layout_width="38dp" android:layout_height="wrap_content" android:src="@drawable/channel6" android:layout_alignTop="@+id/imageView" android:layout_toEndOf="@+id/imageView2" /> <ImageView android:layout_width="38dp" android:layout_height="wrap_content" android:src="@drawable/channel7" android:layout_centerHorizontal="true"/> </RelativeLayout> </RelativeLayout>
public class MainActivity extends AppCompatActivity implements View.OnClickListener{ ImageView imageViewHome,imageViewMenu; boolean isShow2=true;//是否顯示二級選單 boolean isShow3=true;//是否顯示三級選單 boolean isShowMenu=true;//顯示主選單變化，包括一級二級三級選單,如果有一樣在，全顯示，如果都不在，則都顯示 RelativeLayout level2,level1,level3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //執行控制鍵初始化，和介面初始化操作 initView(); //如果，介面較多元件，執行監聽操作，更為方便 initListner(); } public void initView(){ setContentView(R.layout.activity_main); imageViewHome= (ImageView) findViewById(R.id.iv_home); imageViewMenu= (ImageView) findViewById(R.id.iv_menu); level2= (RelativeLayout) findViewById(R.id.level2); level1= (RelativeLayout) findViewById(R.id.level1); level3= (RelativeLayout) findViewById(R.id.level3); } public void initListner() { imageViewHome.setOnClickListener(this); imageViewMenu.setOnClickListener(this); } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode==KeyEvent.KEYCODE_MENU){ //程式設計的時候一定要注意邏輯，一個判斷值，代表一種狀態，一旦狀態改變，則判斷值必須改變 //編碼養成習慣，一開一閉，同時將狀態值設為改變，以便怕忘記，還有邏輯結構 if(AnimationUtil.animationCount!=0){ //如果動畫在執行的半途中，則不執行 return true; }else{ if (isShowMenu){ //只要有在前臺介面的元件全部隱藏 if (isShow3){ AnimationUtil.closeMenu(level3,530); isShow3=false; } if (isShow2){ AnimationUtil.closeMenu(level2,500); isShow2=false; } AnimationUtil.closeMenu(level1,480); }else{ //反之，全部顯示 AnimationUtil.openMenu(level3,530); isShow2=true; isShow3=true; AnimationUtil.openMenu(level2,500); AnimationUtil.openMenu(level1,480); } isShowMenu=!isShowMenu; //返回後，也就是說Menu鍵，點選被改變 return true; } } return super.onKeyDown(keyCode,event); } @Override public void onClick(View v) { switch (v.getId()){ case R.id.iv_home: if(AnimationUtil.animationCount!=0){ //說明還有動畫未執行完，不執行 return; } if(isShow2){ if(isShow3){ AnimationUtil.closeMenu(level3,530); isShow3=false; } //消失二級選單 ，Log.e("tag","11"); AnimationUtil.closeMenu(level2,500); }else{ //顯示二級選單// Log.e("tag","12"); AnimationUtil.openMenu(level2,500); } isShow2=!isShow2; break; case R.id.iv_menu: if(AnimationUtil.animationCount!=0){ //說明還有動畫未執行完 return; } if(isShow3){ //關閉三級選單欄 AnimationUtil.closeMenu(level3,500); }else{ //顯示三級選單欄 AnimationUtil.openMenu(level3,500); } isShow3=!isShow3; break; default: break; } } }
動畫隱藏和出現程式碼：
public class AnimationUtil { public static int animationCount=0; //記錄一個動畫是否完成 public static void closeMenu(RelativeLayout relativeLayout,int duration){ //移動選單時，執行子控制元件無法點選（常識） for (int i=0;i<relativeLayout.getChildCount();i++){ relativeLayout.getChildAt(i).setEnabled(false); } //建立旋轉動畫物件，相對自身的中心點旋轉 RotateAnimation rotateAnimation=new RotateAnimation(0,-180, RELATIVE_TO_SELF,0.5f, RELATIVE_TO_SELF,1); //設定延遲時間，更好的展示旋轉效果 rotateAnimation.setDuration(duration); relativeLayout.startAnimation(rotateAnimation); //動畫結束後，保持結束的狀態 rotateAnimation.setFillAfter(true); //建立動畫監聽器，此程式碼旨在記錄動畫是否完成 rotateAnimation.setAnimationListener(new MyAnimationListener()); } public static void openMenu(RelativeLayout relativeLayout,int duration){ //保證在控制元件重新顯示出來的時候，又可以被點選（常識） for (int i=0;i<relativeLayout.getChildCount();i++){ relativeLayout.getChildAt(i).setEnabled(true); } RotateAnimation rotateAnimation=new RotateAnimation(-180,0, RELATIVE_TO_SELF,0.5f, RELATIVE_TO_SELF,1); rotateAnimation.setDuration(duration); relativeLayout.startAnimation(rotateAnimation); rotateAnimation.setAnimationListener(new MyAnimationListener()); //動畫結束後，保持當時的狀態 rotateAnimation.setFillAfter(true); } static class MyAnimationListener implements Animation.AnimationListener{ @Override public void onAnimationStart(Animation animation) { animationCount++; } @Override public void onAnimationEnd(Animation animation) { animationCount--; } @Override public void onAnimationRepeat(Animation animation) { } } }