11、Dp Notes顶部导航栏

完成了底部导航栏，再来顶部导航栏（叫什么？菜单栏？有脚没头显得不协调）。软件顶部默认是有一个ActionBar，为了使各自顶部的事件处理放到各自的Fragment中，将顶部自带的ActionBar给去掉（res/values下styles.xml中把style改为一个带.NoTitleBar的Theme即可），自己加一块布局在上面，一个假的ActionBar。布局内容左侧一个TextView，显示当前页名字（主页、列表、消息、我的），右侧一个搜索或刷新的图标。

先来，主页，新建布局文件header_home.xml，布局较简单：

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

左侧LinearLayout水平，包含“首页”和一个展开的图标，右侧LinearLayout包含一个刷新的图标，图标，字体大小，边距根据情况设定。ImageView有个属性android:tint，可以设置纯色图标的颜色(如，下载的图标是黑色的，不用PS成想要的颜色，android:tint设置想要的颜色即可)。为什么都用LinearLayout包含，之后说。

fragment_home.xml中引用header_home.xml，如下：

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

<include的使用，layout即为要引入的布局。下面给了一条线。

类似，将其他fragment加上header，运行。

注：这是一个.gif动图，ctrl点击图片查看。

想让顶部的图标点击实现和底部一样的效果，想用animation（安卓自带的一种动画实现方法）来实现，发现并不容易（实现不了？不会。）。决定还是用自定义View来实现。不同于底部的QendBar，这次继承自LinearLayout，方法还是和底部的QendBar类似。新建一个类，继承自LinearLayout，取名QLinearLayout，还是获取一下长宽，触摸事件中设置一些标志，onDraw中画圆，不在啰嗦。遇到点问题，onMeasure获取长宽没问题，onTouchEvent处理触摸事件也没问题（注意return super.onTouchEvent(ev)，否则会影响正常当LinearLayout使用时的点击事件等）onDraw有点问题，画的东西显示不了，百度了下，说ViewGroup（LinearLayout继承自ViewGroup）要使用dispatchDraw，改为dispatchDraw，正常。

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);
}

把需要实现点击效果的LinearLayout改为QLinearLayout（写完整com.zdphpn.dpnotes.qview. QLinearLayout），代码里不添加点击事件想看出点击效果xml中加上android:clickable="true"。

注：这是一个.gif动图，ctrl点击图片查看。

不忘初心——2016/10/31

11、Dp Notes顶部导航栏

猜你喜欢