[size=medium] 完成了底部导航栏,再来顶部导航栏(叫什么?菜单栏?有脚没头显得不协调)。软件顶部默认是有一个ActionBar,为了使各自顶部的事件处理放到各自的Fragment中,将顶部自带的ActionBar给去掉(res/values下styles.xml中把style改为一个带.NoTitleBar的Theme即可),自己加一块布局在上面,一个假的ActionBar。布局内容左侧一个TextView,显示当前页名字(主页、列表、消息、我的),右侧一个搜索或刷新的图标。[/size]
[img]http://dl2.iteye.com/upload/attachment/0124/2490/cd1c8dd1-da9b-33dd-8bd8-8b237eba8146.jpg[/img]
[size=medium] 先来,主页,新建布局文件header_home.xml,布局较简单:[/size]
[size=medium] 左侧LinearLayout水平,包含“首页”和一个展开的图标,右侧LinearLayout包含一个刷新的图标,图标,字体大小,边距根据情况设定。ImageView有个属性android:tint,可以设置纯色图标的颜色(如,下载的图标是黑色的,不用PS成想要的颜色,android:tint设置想要的颜色即可)。为什么都用LinearLayout包含 ,之后说。
fragment_home.xml中引用header_home.xml,如下:[/size]
[size=medium] <include的使用,layout即为要引入的布局。下面给了一条线。
类似,将其他fragment加上header,运行。[/size]
[img]http://dl2.iteye.com/upload/attachment/0124/2492/d9f6034b-742c-333f-8422-3b68895aac71.gif[/img]
[color=gray][size=medium]注:这是一个.gif动图,ctrl点击图片查看。[/size][/color]
[size=medium] 想让顶部的图标点击实现和底部一样的效果,想用animation(安卓自带的一种动画实现方法)来实现,发现并不容易(实现不了?不会。)。决定还是用自定义View来实现。不同于底部的QendBar,这次继承自LinearLayout,方法还是和底部的QendBar类似。新建一个类,继承自LinearLayout,取名QLinearLayout,还是获取一下长宽,触摸事件中设置一些标志,onDraw中画圆,不在啰嗦。遇到点问题,onMeasure获取长宽没问题,onTouchEvent处理触摸事件也没问题(注意return super.onTouchEvent(ev),否则会影响正常当LinearLayout使用时的点击事件等)onDraw有点问题,画的东西显示不了,百度了下,说ViewGroup(LinearLayout继承自ViewGroup)要使用dispatchDraw,改为dispatchDraw,正常。[/size]
[size=medium] 把需要实现点击效果的LinearLayout改为QLinearLayout(写完整com.zdphpn.dpnotes.qview. QLinearLayout),代码里不添加点击事件想看出点击效果xml中加上android:clickable="true"。[/size]
[img]http://dl2.iteye.com/upload/attachment/0124/2494/22553939-1033-3a51-85ff-f2ce9e115a7b.gif[/img]
[color=gray][size=medium]注:这是一个.gif动图,ctrl点击图片查看。[/size][/color]
[align=right][size=medium]不忘初心——2016/10/31[/size][/align]
[img]http://dl2.iteye.com/upload/attachment/0124/2490/cd1c8dd1-da9b-33dd-8bd8-8b237eba8146.jpg[/img]
[size=medium] 先来,主页,新建布局文件header_home.xml,布局较简单:[/size]
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/header_h"
android:background="@color/white_dark" >
<LinearLayout
android:layout_width="@dimen/item_w_l"
android:layout_height="match_parent"
android:gravity="center_vertical|left"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_ll"
android:text="首页"
android:textColor="@color/app_theme"
android:textSize="@dimen/header_h_3" />
<ImageView
android:layout_width="@dimen/header_h_2"
android:layout_height="@dimen/header_h_2"
android:src="@drawable/launch"
android:tint="@color/app_theme" />
</LinearLayout>
<LinearLayout
android:layout_width="@dimen/item_w_s"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center_vertical|right"
android:orientation="horizontal" >
<ImageView
android:layout_width="@dimen/header_h_2"
android:layout_height="@dimen/header_h_2"
android:layout_marginRight="@dimen/margin_ll"
android:src="@drawable/refresh"
android:tint="@color/app_theme" />
</LinearLayout>
</RelativeLayout>
[size=medium] 左侧LinearLayout水平,包含“首页”和一个展开的图标,右侧LinearLayout包含一个刷新的图标,图标,字体大小,边距根据情况设定。ImageView有个属性android:tint,可以设置纯色图标的颜色(如,下载的图标是黑色的,不用PS成想要的颜色,android:tint设置想要的颜色即可)。为什么都用LinearLayout包含 ,之后说。
fragment_home.xml中引用header_home.xml,如下:[/size]
<include
android:id="@+id/header_home"
android:layout_width="match_parent"
android:layout_height="@dimen/header_h"
android:layout_alignParentTop="true"
layout="@layout/header_home" />
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_below="@+id/header_home"
android:background="@color/gray_dark_88"/>
[size=medium] <include的使用,layout即为要引入的布局。下面给了一条线。
类似,将其他fragment加上header,运行。[/size]
[img]http://dl2.iteye.com/upload/attachment/0124/2492/d9f6034b-742c-333f-8422-3b68895aac71.gif[/img]
[color=gray][size=medium]注:这是一个.gif动图,ctrl点击图片查看。[/size][/color]
[size=medium] 想让顶部的图标点击实现和底部一样的效果,想用animation(安卓自带的一种动画实现方法)来实现,发现并不容易(实现不了?不会。)。决定还是用自定义View来实现。不同于底部的QendBar,这次继承自LinearLayout,方法还是和底部的QendBar类似。新建一个类,继承自LinearLayout,取名QLinearLayout,还是获取一下长宽,触摸事件中设置一些标志,onDraw中画圆,不在啰嗦。遇到点问题,onMeasure获取长宽没问题,onTouchEvent处理触摸事件也没问题(注意return super.onTouchEvent(ev),否则会影响正常当LinearLayout使用时的点击事件等)onDraw有点问题,画的东西显示不了,百度了下,说ViewGroup(LinearLayout继承自ViewGroup)要使用dispatchDraw,改为dispatchDraw,正常。[/size]
private int widthAll,heightAll; //总宽度,总高度
boolean isDown,isUp,isMax; //状态
float radius=0;//半径
private int colorItemDown; //几个颜色值
private Paint paintOther; //画笔
public QLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
colorItemDown=getResources().getColor(R.color.black_normal_22);
paintOther=new Paint();
paintOther.setAntiAlias(true);
}
@Override
protected void dispatchDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.dispatchDraw(canvas);
if(widthAll<=0||heightAll<=0){
widthAll=getWidth();//获取宽度
heightAll=getHeight();//获取高度
if(widthAll>0&&heightAll>0){
;
}
else{
postInvalidate();
}
}
paintOther.setColor(colorItemDown);
int alpha=colorItemDown>>24;
paintOther.setAlpha((int)(alpha*radius/widthAll*2));
if(isDown){
if(radius<widthAll/2){
canvas.drawCircle(widthAll/2, heightAll/2, radius, paintOther);
radius+=widthAll/4/10;
postInvalidateDelayed(10);
}
else{
isMax=true;
canvas.drawCircle(widthAll/2, heightAll/2, radius, paintOther);
}
}
else if(isUp){
if(!isMax){
canvas.drawCircle(widthAll/2, heightAll/2, radius, paintOther);
radius+=widthAll/4/5;
postInvalidateDelayed(5);
if(radius<widthAll/2){
isMax=false;
}
else{
isMax=true;
}
}
else{
if(radius>widthAll/3){
canvas.drawCircle(widthAll/2, heightAll/2, radius, paintOther);
radius-=widthAll/4/5;
postInvalidateDelayed(10);
}
else{
isUp=false;
isMax=false;
postInvalidateDelayed(10);
}
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
widthAll=getWidth();//获取宽度
heightAll=getHeight();//获取高度
if(widthAll>0&&heightAll>0){
;
}
else{
postInvalidate();
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
// TODO Auto-generated method stub
switch(ev.getAction()){
case MotionEvent.ACTION_DOWN:
isDown=true;
radius=widthAll/3;
isUp=false;
break;
case MotionEvent.ACTION_UP:
isDown=false;
isUp=true;
break;
default:
break;
}
postInvalidate();
return super.onTouchEvent(ev);
}
[size=medium] 把需要实现点击效果的LinearLayout改为QLinearLayout(写完整com.zdphpn.dpnotes.qview. QLinearLayout),代码里不添加点击事件想看出点击效果xml中加上android:clickable="true"。[/size]
[img]http://dl2.iteye.com/upload/attachment/0124/2494/22553939-1033-3a51-85ff-f2ce9e115a7b.gif[/img]
[color=gray][size=medium]注:这是一个.gif动图,ctrl点击图片查看。[/size][/color]
[align=right][size=medium]不忘初心——2016/10/31[/size][/align]