當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

UI复习练习_优酷布局

發布時間：2024/4/17 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 UI复习练习_优酷布局小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

UI復習練習_優酷布局

還記得前一周，細致看了一下我自己的代碼，特意看了下代碼規范，一個好的代碼習慣就應該慢慢增加自己尋常練習中。

看看UI吧?

我是想特意今天復習下曾經忽視的UI知識，事實上作為一個開發者要習慣相對布局，第一呢。能夠拖拉成布局，第二呢從安卓性能來說相對布局。遠遠好于線性布局。

這個布局呢是通過三個相對布局和圖片形成了。

一個相對布局。背景是一張圖片，和一個Imageview組成的? 我將其它布局隱藏了給大家看看

<RelativeLayoutandroid:id="@+id/level1"android:layout_width="100dp"android:layout_height="50dp"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:background="@drawable/level1" ><ImageViewandroid:id="@+id/icon_home"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:background="@drawable/icon_home" /></RelativeLayout>
?android:layout_alignParentBottom="true"? 是否顯示在容器底部?

android:layout_centerHorizontal：用于相對布局（RelativeLayout）的子控件居中。

這兩個屬性在后面也會經經常使用到.

相信大家也能知道第二層是怎么弄出來的?

一個相對布局? 三個Imageview? 只是圖片做過處理是斜著的的。

<RelativeLayoutandroid:id="@+id/level2"android:layout_width="180dp"android:layout_height="90dp"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:background="@drawable/level2" ><ImageViewandroid:id="@+id/icon_search"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_margin="10dp"android:background="@drawable/icon_search" /><ImageViewandroid:id="@+id/icon_menu"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_marginTop="5dp"android:background="@drawable/icon_menu" /><ImageViewandroid:id="@+id/icon_myyouku"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"android:layout_margin="10dp"android:background="@drawable/icon_myyouku" /></RelativeLayout>
?android:layout_margin="10dp" 則是站在自己的角度描寫敘述問題，規定自己和其它（上下左右）的view之間的距離

第三層? 主要難點在于怎么對其。解決方式就是左對齊上一個組件，然后條margin值就能夠攻克了。

所有代碼~~~~

好啦。 UI實現了以后再看java 代碼吧

思路通過點擊Imageview 顯示下一級菜單 SO，出來和隱藏式通過動畫效果實現的。

------------------------------第一步實例化控件-----------------------------------------

private ImageView icon_menu;private ImageView icon_home;private RelativeLayout level1;private RelativeLayout level2;private RelativeLayout level3;

/*** 初始化控件并增加點擊事件*/private void initView() {icon_home = (ImageView) findViewById(R.id.icon_home);icon_menu = (ImageView) findViewById(R.id.icon_menu);level1 = (RelativeLayout) findViewById(R.id.level1);level2 = (RelativeLayout) findViewById(R.id.level2);level3 = (RelativeLayout) findViewById(R.id.level3);icon_home.setOnClickListener(this);icon_menu.setOnClickListener(this);}
最重要的就是點擊事件處理了。

第二步，通過標識符。推斷是否顯示下一級列表

/* 點擊事件處理* @see android.view.View.OnClickListener#onClick(android.view.View)*/@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.icon_menu: //menu圖標的點擊事件處理// 假設第3級菜單是顯示狀態，那么將其隱藏if (isLevel3Show) {//隱藏第3級菜單AnimUtils.startAnimOut(level3);}else{// 假設第3級菜單是隱藏狀態，那么將其顯示AnimUtils.startAnimIn(level3);}//取反把狀態調整hao isLevel3Show = !isLevel3Show;break;case R.id.icon_home: //home圖標的點擊事件處理// 假設第2級菜單是顯示狀態，那么就隱藏。2。3級菜單if (isLevel2Show) {AnimUtils.startAnimOut(level2);isLevel2Show=false;if (isLevel3Show) {AnimUtils.startAnimOut(level3,300);isLevel3Show=false;}}else{// 假設第2級菜單是隱藏狀態，那么就顯示2級菜單AnimUtils.startAnimIn(level2);isLevel2Show=true;}break;default:break;}}

----------------------------第三步，制作動畫工具類-------------------------

動畫旋轉有一個類? RotateAnimation 我就用它進行將相對布局的旋轉實現是否顯示

package com.xiaoxin.youkuDemo;import android.view.animation.RotateAnimation; import android.widget.RelativeLayout;/**float fromDegrees：旋轉的開始角度。float toDegrees：旋轉的結束角度。

int pivotXType：X軸的伸縮模式，能夠取值為ABSOLUTE、RELATIVE_TO_SELF、RELATIVE_TO_PARENT。 float pivotXValue：X坐標的伸縮值。 int pivotYType：Y軸的伸縮模式，能夠取值為ABSOLUTE、RELATIVE_TO_SELF、RELATIVE_TO_PARENT。 float pivotYValue：Y坐標的伸縮值。 * @author Administrator */ public class AnimUtils { /** * 讓指定的view 運行旋轉離開的動畫 * @param view */ public static void startAnimOut(RelativeLayout view) { startAnimOut(view, 0); } public static void startAnimOut(RelativeLayout view,long offest){ //第一個參數是開始旋轉的角度， //第二個參數是結束的角度 //第三。四個參數是圓心的坐標 RotateAnimation animation=new RotateAnimation(0, 180,view.getWidth()/2,view.getHeight()); //1.設置運行的事件 animation.setDuration(500); //2.動畫運行完保存狀態 animation.setFillAfter(true); //3.設置延時運行的事件 animation.setStartOffset(offest); //4.運行 view.startAnimation(animation); } /** * 讓指定的view 運行旋轉進入的動畫 * @param view */ public static void startAnimIn(RelativeLayout view) { startAnimIn(view, 0); } /** * 讓指定的view 延時運行旋轉進入的動畫 * @param level2 * @param i 延時的時間 */ public static void startAnimIn(RelativeLayout view, int i) { /* * 默認圓為為view的左上角， * 水平向右為 0度 * 順時針旋轉度數添加 */ RotateAnimation animation =new RotateAnimation(180, 360, view.getWidth()/2, view.getHeight()); animation.setDuration(500); // 設置運行的時間 animation.setFillAfter(true); //動畫運行完以后。保持最后的狀態 animation.setStartOffset(i); //設置延時運行的時間 view.startAnimation(animation); } }

------------------最后一步添加人性化操作，將菜單鍵進行監控激發顯示菜單和隱藏菜單的功能

// -------------------------利用菜單鍵控制布局---------------------@Override/*** 響應按鍵的動作*/public boolean onKeyDown(int keyCode, KeyEvent event) {if(keyCode == KeyEvent.KEYCODE_MENU){ // 監聽 menu 按鍵changeLevel1State();}return super.onKeyDown(keyCode, event);}
private void changeLevel1State() {//假設第1級菜單是顯示狀態，那么就隱藏 1，2。3級菜單 if(isLevel1show){AnimUtils.startAnimOut(level1);isLevel1show = false;if(isLevel2Show){ // 推斷2級菜單是否顯示AnimUtils.startAnimOut(level2,100);isLevel2Show = false;if(isLevel3Show){ // 推斷3級菜單是否顯示AnimUtils.startAnimOut(level3,200);isLevel3Show = false;}}}else{//假設第1級菜單是隱藏狀態，那么就顯示 1，2級菜單 AnimUtils.startAnimIn(level1);isLevel1show = true;AnimUtils.startAnimIn(level2,200);isLevel2Show = true;}}
End ------------

點擊下載源代碼

posted on 2017-04-20 12:24 mthoutai 閱讀(...) 評論(...) 編輯收藏

轉載于:https://www.cnblogs.com/mthoutai/p/6738111.html

總結

以上是生活随笔為你收集整理的UI复习练习_优酷布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

UI
布局

上一篇：关于photoshop处理图片的自动化
下一篇： Java中的HashMap和HashTa