QQ For Android 的布局 原理介绍

核心提示：偷了QQ的布局资源文件,也来搞一个,向来这类型的外观还是比较容易让人接受 的..上面是导航栏,下面是菜单栏,UC也是类似这种的.先上几张图,来瞧瞧.这样不会造成侵权吧?现在说下原理,估计高手早就会了,我就随便现丑了.在顶部的三个控件,其实是一个LinearLayout,然后里面放三张ImageView,你也许会问,这三

偷了QQ的布局资源文件,也来搞一个,向来这类型的外观还是比较容易让人接受 的..上面是导航栏,下面是菜单栏,UC也是类似这种的.

先上几张图,来瞧瞧.

这样不会造成侵权吧?

现在说下原理,估计高手早就会了,我就随便现丑了.

在顶部的三个控件,其实是一个LinearLayout,然后里面放三张ImageView,你也许会问,这三个如何平分宽度呢?

Java代码

< ImageView

android:id="@+id/ImageView1" android:paddingTop="3.0dip"

android:paddingBottom="2.0dip" android:focusable="false"

android:layout_width="fill_parent" android:layout_height="fill_parent"

android:layout_marginTop="0.0dip" android:layout_marginBottom="0.0dip"

android:src="@drawable/tab3" android:layout_weight="1.0" />

就是android:layout_weight起作用了, 使用了android:layout_width="fill_parent" ,它默认会占全部的宽,当设置比重,就不一样了,如果不知道是干什么的,可以去查下.

三张图片的Weight值我设置了一样的.

如果只是一个LinearLayout的话,点击就不会有效果了,所以这个实现自定义组件:

并且背景设为 android:background="@color/transparent"

public class CustomedTab extends LinearLayout {

}

然后在onLayout里对它的子元素监听Click事件.

事件的处理结果呢:OnClick:

setFocus(View view1, View view2) {

view1.getHitRect(rect1);就可以得到View1的显示区域了.

然后

rect1.intersect(0,0,0,2);

再设置空的rect2区域为rect1的边界,就是Left,top,right,bottom.

最后让View1选中状态.

动画效果,当已经确定了,当前焦点,要当前点击的ImageView,然后就将两个Rect进行对比,不重合,就每次减少距离,这就产生动画了.

}

view1就是当前点击的,view2就是原来聚焦的.当然前面的OnLayout里先设置好开始时是哪个聚焦了.

这样只能处理当前哪个ImageView被选中了,如果处理上面的背景呢?

设置一个Rect,然后一个Bitmap这是个透明的图片,在OnDraw里画

bitmap.setBounds(rect);

bitmap.draw(canvas);

画完了,点击,也会变化,不过除了头部会变,下面的视图都没有反应,所以在这个CustomTab里设置一个接口,由下面的视图实现接口,来切换...