UI复习练习_优酷布局

还记得前一周，细致看了一下我自己的代码，特意看了下代码规范，一个好的代码习惯就应该慢慢增加自己寻常练习中。

看看UI吧 

我是想特意今天复习下曾经忽视的UI知识，事实上作为一个开发者要习惯相对布局，第一呢，能够拖拉成布局，第二呢 从安卓性能来说相对布局，远远好于线性布局。

这个布局呢 是通过三个相对布局 和图片形成了。

一个相对布局，背景是一张图片。和一个Imageview组成的  我将其它布局隐藏了 给大家看看

    <RelativeLayout
        android:id="@+id/level1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level1" >

        <ImageView
            android: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  只是图片做过处理 是斜着的的。

<RelativeLayout
        android:id="@+id/level2"
        android:layout_width="180dp"
        android:layout_height="90dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level2" >

        <ImageView
            android: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" />

        <ImageView
            android: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" />

        <ImageView
            android: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值 就能够攻克了。

所有代码~~~~

<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" >

    <RelativeLayout
        android:id="@+id/level1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level1" >

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

    <RelativeLayout
        android:id="@+id/level2"
        android:layout_width="180dp"
        android:layout_height="90dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level2" >

        <ImageView
            android: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" />

        <ImageView
            android: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" />

        <ImageView
            android: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>

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

        <ImageView
            android: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" />

        <ImageView
            android: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" />
         <ImageView
            android: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" />
        <ImageView
            android: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"
            />
      
            
        <ImageView
            android: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" />
        
        
        <ImageView
            android: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实现了以后再看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)
	 */
	@Override
	public 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 ------------

点击下载源代码