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