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

看看UI吧

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSmFja19LaW5nMDA3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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

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

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSmFja19LaW5nMDA3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSmFja19LaW5nMDA3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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

点击下载源代码

UI复习练习_优酷布局的更多相关文章

  1. [android] 优酷环形菜单-相对布局练习

    优酷环形菜单 布局文件,使用<RelativeLayout/>控件作为第一级菜单,相对布局,位于父控件的底部,水平居中,因为图片不是特别的标准,因此宽度和高度都钉死,宽度是高度的两倍 二次 ...

  2. 自定义View(一)-ViewGroup实现优酷菜单

    自定义View的第一个学习案例 ViewGroup是自动以View中比较常用也比较简单的一种方式,通过组合现有的UI控件,绘制出一个全新的View 效果如下: 主类实现如下: package com. ...

  3. 高仿优酷Android客户端图片左右滑动(自动切换)

    本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现: 具体思路: 1. 工程中需要添加android-support-v4.jar,才能 ...

  4. 仿优酷Android客户端图片左右滑动(自动滑动)

    最终效果: 页面布局main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayou ...

  5. JavaScript使用DeviceOne开发实战(四)仿优酷视频应用

    开发之前需要考虑系统的差异性,比如ios手机没有回退键,所以在开发时一定要考虑二级界面需要有回退键,否则ios的手机就会陷入到这个页面出不去了.安卓系统有回退键,针对这个情况需要要求用户在3秒钟之内连 ...

  6. php 解析 视频 信息 封面 标题 图片 支持 优酷, 土豆 酷6 56 新浪 qq播客 乐视 乐视

    原文地址:http://www.lianyue.org/2013/2497/ <?php /** * 解析 视频信息 类 * * 支持 优酷, 土豆 酷6 56 新浪 qq播客 乐视 乐视 ** ...

  7. 优酷、YouTube、Twitter及JustinTV视频网站架构设计笔记

    本文是整理的关于优酷.YouTube.Twitter及JustinTV几个视频网站的架构或笔记,对于不管是视频网站.门户网站或者其它的网站,在架构上都有一定的参考意义,毕竟成功者的背后总有值得学习的地 ...

  8. android 使用WebView 支持播放优酷视频,土豆视频

    看了很多文章和所谓的解决android WebView播放优酷,土豆等视频的办法,都是什么 setPluginsEnabled,在android 4.x之后都不好使,压根就没这函数,因为android ...

  9. android自定义控件之模仿优酷菜单

    去年的优酷HD版有过这样一种菜单,如下图: 应用打开之后,先是三个弧形的三级菜单,点击实体键menu之后,这三个菜单依次旋转退出,再点击实体键menu之后,一级菜单会旋转进入,点击一级菜单,二级菜单旋 ...

随机推荐

  1. .NET:CLR via C#:CLR Hosting And AppDomains

    AppDomain Unloading To unload an AppDomain, you call AppDomain’s Unload static method.This call caus ...

  2. 对只转发结果集的无效操作:last

    调用时候发生这样一个错误: SQLException: 对只转发结果集的无效操作:last 原因是按照缺省方式打开的ResultSet不支持结果集cursor的回滚 如果想要完成上述操作,要在生成St ...

  3. C++迭代器失效的几种情况总结

    一.序列式容器(数组式容器) 对于序列式容器(如vector,deque),序列式容器就是数组式容器,删除当前的iterator会使后面所有元素的iterator都失效.这是因为vetor,deque ...

  4. linux编程合并多个静态库.a为一个.a

    .a 文件的结构和.tar文件就没有什么区别. x 命令解出来, a 命令添加, t命令列表 假设A.a, B.a C.a 在/usr/local/lib目录下 mkdir /tmp/libABC c ...

  5. C语言数字与字符串转换 atoi()函数、itoa()函数、sprintf()函数

    在编程中经常需要用到数字与字符串的转换,下面就总结一下. 1.atoi() C/C++标准库函数,用于字符串到整数的转换. 函数原型:int atoi (const char * str); #inc ...

  6. Byedance AI Camp-笔试题目

    最小m段和问题:给定n个整数组成的序列,现在要求将序列分割为m段,每段子序列中的数在原序列中连续排列.如何分割才能使这m段子序列的和的最大值达到最小? Input 第一行输入一个整数t,代表有t组测试 ...

  7. 如果不用jQuery,Ajax你还能写出多少?

    许久之前发过一篇关于Ajax的博客,通篇讲的都是通过jQuery编写Ajax,可能因为jQuery在这方面做的实在太好,以至于突然发现不用jQuery的话自己都模糊了Ajax的写法,这里重温一下. F ...

  8. JavaScript中将html字符串转化为Jquery对象或者Dom对象

    实例代码: $('<a href="javascript:void(0);" onclick="showUI(this,"4028f65d5d1bb627 ...

  9. GO语言基础之reflect反射

    反射reflection 1. 反射可以大大的提高程序的灵活性,使得 interface{} 有更大的发挥余地 2. 反射使用 TypeOf 和 ValueOf 函数从接口中获取目标对象信息 3. 反 ...

  10. 【UI设计】扁平化设计之流行色值

    收集了一些颜色值 顏色表示方法: 以命名方式定义经常使用的顏色,如color="green".可是自由度较低,何况单词量...... 以RGB值表示.如#FF0000表示red(红 ...