QQ For Android 的布局 原理介绍
2010-08-11 10:45:00 来源:WEB开发网偷了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里设置一个接口,由下面的视图实现接口,来切换...
更多精彩
赞助商链接