UI復(fù)習(xí)練習(xí)_優(yōu)酷布局

還記得前一周，細(xì)致看了一下我自己的代碼，特意看了下代碼規(guī)范，一個(gè)好的代碼習(xí)慣就應(yīng)該慢慢增加自己尋常練習(xí)中。

看看UI吧?

我是想特意今天復(fù)習(xí)下曾經(jīng)忽視的UI知識(shí)，事實(shí)上作為一個(gè)開發(fā)者要習(xí)慣相對(duì)布局，第一呢。能夠拖拉成布局，第二呢 從安卓性能來說相對(duì)布局。遠(yuǎn)遠(yuǎn)好于線性布局。

這個(gè)布局呢 是通過三個(gè)相對(duì)布局 和圖片形成了。

一個(gè)相對(duì)布局。背景是一張圖片，和一個(gè)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：用于相對(duì)布局（RelativeLayout）的子控件居中。

這兩個(gè)屬性在后面也會(huì)經(jīng)經(jīng)常使用到.

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

一個(gè)相對(duì)布局? 三個(gè)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" 則是站在自己的角度描寫敘述問題，規(guī)定自己和其它（上下左右）的view之間的距離

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

所有代碼~~~~

<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" ><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><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><RelativeLayoutandroid:id="@+id/level3"android:layout_width="280dp"android:layout_height="140dp"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:background="@drawable/level3" ><ImageViewandroid:id="@+id/channel1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginBottom="10dp"android:layout_marginLeft="10dp"android:background="@drawable/channel1" /><ImageViewandroid:id="@+id/channel2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@id/channel1"android:layout_alignLeft="@id/channel1"android:layout_marginBottom="6dp"android:layout_marginLeft="20dp"android:background="@drawable/channel2" /><ImageViewandroid:id="@+id/channel3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@id/channel2"android:layout_alignLeft="@id/channel2"android:layout_marginBottom="6dp"android:layout_marginLeft="30dp"android:background="@drawable/channel3" /><ImageViewandroid:id="@+id/channel4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_marginTop="5dp"android:background="@drawable/channel4" /><ImageView android:id="@+id/channel7"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/channel7"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"android:layout_marginBottom="10dp"android:layout_marginRight="10dp"/><ImageViewandroid:id="@+id/channel6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@id/channel7"android:layout_alignRight="@id/channel7"android:layout_marginBottom="6dp"android:layout_marginRight="20dp"android:background="@drawable/channel6" /><ImageViewandroid:id="@+id/channel5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@id/channel6"android:layout_alignRight="@id/channel6"android:layout_marginBottom="6dp"android:layout_marginRight="30dp"android:background="@drawable/channel5" /></RelativeLayout></RelativeLayout>

好啦。 UI實(shí)現(xiàn)了以后再看java 代碼吧

思路 通過 點(diǎn)擊Imageview 顯示下一級(jí)菜單 SO， 出來和隱藏式通過動(dòng)畫效果實(shí)現(xiàn)的。

------------------------------第一步實(shí)例化控件-----------------------------------------

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

/*** 初始化控件并增加點(diǎn)擊事件*/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);}
最重要的就是點(diǎn)擊事件處理了。

第二步，通過標(biāo)識(shí)符 。推斷是否顯示下一級(jí)列表

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

----------------------------第三步，制作動(dòng)畫工具類-------------------------

動(dòng)畫旋轉(zhuǎn)有一個(gè)類? RotateAnimation 我就用它 進(jìn)行將相對(duì)布局的旋轉(zhuǎn)實(shí)現(xiàn) 是否顯示

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

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

------------------最后一步添加人性化操作，將菜單鍵進(jìn)行監(jiān)控 激發(fā)顯示菜單和隱藏菜單的功能

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

點(diǎn)擊下載源代碼

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

轉(zhuǎn)載于:https://www.cnblogs.com/mthoutai/p/6738111.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。