网易新闻控件的创建,scrollView和viewGroup的学习,和up事件后模拟页面回到固定位置

1、viewGroup可以添加控件,也可以用<include layout="@layout/name">添加xml布局文件,在本次实验中将新闻的menu(scrollView布局文件)和正文(mainnews)加入到继承ViewGroup的控件中,但不明白为什么scrollview的宽度设置为240dp无效,最终通过计算显示宽度为屏幕3/5达到的效果。

  一旦发现空间几部分组成就继承viewgroup ,然后重写onmeasure方法,在里面测量所有的孩子,然后重写layout方法布局这些孩子view的位置。

2了解了groupView的原理,并且根据源码模拟当离开屏幕时候屏幕回到主页面或者menu页面的过程。(其实menu文件里的textview和imageview可以合成一个textview的)

3注意viewgroup里在ontouchEvent 前面还有onInterceptTouchEvent,它默认的返回为false。其实触摸事件的传递是先通过activity的dispatchTouchEvent调用return super.dispatchTouchEvent(ev)往View里传递,通过view往view的子视图传递,若中途被父view拦截了下面的view就收到不到touch事件,子view收到后就继续回传给父view的onTouchEvent最后到activity的onTouchEvent(),因此若在view里拦截了事件,在activity的ontouchEvent是收不到事件的。以下两种情况:

事件->onInterceptTouchEvent返回true,就让自己的ontouhEvent来处理这个事件,下面的只收到Action_CAVCLE。若返回false就不拦截。

事件->onInterceptTouchEvent返回false ->命中view(收到MOVE和UP)如果我处理了事件(即ontouchEvent返回true)-则父view的onInterceptTouchEvent返回true,这样在activity里就收不到事件,否则返回false,传回activity里。

 

具体可以看:http://blog.csdn.net/xyz_lmn/article/details/12517911,文章下面的几张图画的很清楚。

下面直接看代码和注释学习:

public class MyViewGroup extends ViewGroup {
	private Context context;
	private int menuX;
	private Scroller mScroller;
	
	public MyViewGroup(Context context) {
		super(context);
		mScroller=new Scroller(getContext());
		this.context=context;
		// TODO Auto-generated constructor stub
	}
	
	public MyViewGroup(Context context, AttributeSet attrs) {
		super(context, attrs);this.context=context;
		mScroller=new Scroller(getContext());
		// TODO Auto-generated constructor stub
	}

	public MyViewGroup(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);this.context=context;
		mScroller=new Scroller(getContext());
	}
	
	int downx2;
		//这里可以拦截touch事件,viewgroup这里默认返回 的是false,导致后面的touchevent接收不到数据,
		@Override//这里可以拦截事件
	public boolean onInterceptTouchEvent(MotionEvent ev) {
			switch (ev.getAction()) {
			case MotionEvent.ACTION_DOWN:
				downx2=(int) ev.getX();
				break;
			case MotionEvent.ACTION_MOVE:
				int dis=(int) ev.getX()-downX;
				if(dis>10)
					return true;
				break;
			case MotionEvent.ACTION_UP:
				int dis2=(int) ev.getX()-downX;
				if(dis2<10)
					return false;
				break;
			default:
				break;
			}
			return true;
			
	}

		int downX;
		@Override
public boolean onTouchEvent(MotionEvent event) {
			switch (event.getAction()) {
			case MotionEvent.ACTION_DOWN:
				downX=(int) event.getX();
				break;
			case MotionEvent.ACTION_MOVE:
				int dis=(int) event.getX()-downX;
//				scrollTo(-240-dis, 0);
				if(dis>0)
				{
					int sx=(int)getScrollX();
					if(sx>-3*menuX/5)
						scrollBy(-dis, 0);
				}
				else{
					int sx=(int)getScrollX();;
					if(sx<0)
					scrollBy(-dis, 0);
					
					}
					downX=(int) event.getX();
				break;
				
				
			case MotionEvent.ACTION_UP:
				int sx=(int)getScrollX();
				
				//下面是不模拟直接回到固定位置,速度很快
//				if(sx>-3*menuX/10)
//					scrollTo(0, 0);
//				else
//					{
//					scrollTo(-menuX*3/5, 0);
//					end=-menuX*3/5;
//					}
				
				//下面计算模拟屏幕滑动到终止位置的偏移量,为正时向左划
				int end=0;
				if(sx>-3*menuX/10)
				{
				end=-sx;
				}
				else
					end=-3*menuX/5-sx;
				
//				这里可以利用scroller模拟屏幕滑动,最后个参数是up事件后屏幕话当到稳定点的时间
				/*
				 * 4个参数非别为x、y的起始量和偏移量
				 */
				mScroller.startScroll(sx, 0, end, 0, Math.abs(end)*10);
//					while(mScroller.computeScrollOffset())
//					{
//						int currtX=mScroller.getCurrX();//通过打印x值就清楚屏幕如何滑动的
//						System.out.println(currtX);
//					}
				
				//如果在模拟时候采用刷新后,它也会去画它的孩子,然后计算偏移量,若计算偏移量的时候再递归调用刷新,直到固定位置停止刷新,就可以让屏幕跟随模拟的运动达到控制手离开屏幕后的                                // 移动速度了
				invalidate();//刷新操作invalidate->drawchlid->chid.draw->computscroll这几个步骤来更新这个view的,因此我们通过覆写computscroll,
//							
				
				break;
			default:
				break;
			}
			return true;
		}
		//覆写computeScroll方法,在方法里继续调用invalidate,这样循环偏移计算,就可以模拟和控制手离开屏幕后窗口移动的操作
		@Override
		public void computeScroll() {
				super.computeScroll();
				if(mScroller.computeScrollOffset())
				{
					int cx=mScroller.getCurrX();
					scrollTo(cx, 0);
					invalidate();
				}
				
			}
	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		
		View menu=getChildAt(0);
		menu.measure(widthMeasureSpec, heightMeasureSpec);
		View news=getChildAt(1);
		news.measure(widthMeasureSpec, heightMeasureSpec);
	
	}

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		
		View menu=getChildAt(0);
		menuX=menu.getMeasuredWidth();
		menu.layout(-3*menuX/5, t, 0, b);
		View news=getChildAt(1);
		news.layout(l, t, r, b);
	}
	
}

  

activity.xml文件

<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"
    tools:context="com.example.buju.MainActivity$PlaceholderFragment" >

         
    <com.example.buju.MyViewGroup.MyViewGroup
         android:layout_width="wrap_content"
         android:layout_height="wrap_content">
         <!-- 添加菜单 -->
        <include layout="@layout/menu" />
        <!-- 新闻主界面 -->
     <include layout="@layout/maninew"/>      
   		 
   		 
</com.example.buju.MyViewGroup.MyViewGroup>
</RelativeLayout>

  

menu.xml文件:

 

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="240dp"
    android:layout_height="wrap_content" 
   >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="980dp"
        android:orientation="vertical"
         android:background="@drawable/menu_bg"
         >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:orientation="horizontal" 
            >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:background="@drawable/tab_news"
                android:paddingBottom="10dp"
                android:paddingLeft="5dp"
                android:paddingTop="10dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:paddingTop="20dp"
                android:text="新闻条目2"
                android:textSize="20dp" 
                android:textColor="@android:color/white" 
                />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@drawable/menu_bg"
            android:orientation="horizontal" >

            <ImageView
                style="@style/menuimagestyle"
                android:background="@drawable/tab_news" />

            <TextView
                style="@style/menutextstyle"
                android:text="新闻条目3" />
        </LinearLayout>
            
         <LinearLayout
             android:layout_width="match_parent"
        	 android:layout_height="60dp"
        	 android:background="@drawable/menu_bg"
        	 android:orientation="horizontal"
        >
		<ImageView 
		    style="@style/menuimagestyle"
		    android:background="@drawable/tab_news"
		    />            
          <TextView 
             style="@style/menutextstyle"
		     android:text="新闻条目4"
              />
        </LinearLayout>
        
         
         <LinearLayout
             android:layout_width="match_parent"
        	 android:layout_height="60dp"
        	 android:background="@drawable/menu_bg"
        	 android:orientation="horizontal"
        >
		<ImageView 
		    style="@style/menuimagestyle"
		    android:background="@drawable/tab_news"
		    />            
          <TextView 
             style="@style/menutextstyle"
		     android:text="新闻条目5"
              />
        </LinearLayout>
        
          <LinearLayout
             android:layout_width="match_parent"
        	 android:layout_height="60dp"
        	 android:background="@drawable/menu_bg"
        	 android:orientation="horizontal"
        >
		<ImageView 
		    style="@style/menuimagestyle"
		    android:background="@drawable/tab_news"
		    />            
          <TextView 
             style="@style/menutextstyle"
		     android:text="新闻条目6"
              />
        </LinearLayout>
        
           <LinearLayout
             android:layout_width="match_parent"
        	 android:layout_height="60dp"
        	 android:background="@drawable/menu_bg"
        	 android:orientation="horizontal"
        >
		<ImageView 
		    style="@style/menuimagestyle"
		    android:background="@drawable/tab_news"
		    />            
          <TextView 
             style="@style/menutextstyle"
		     android:text="新闻条目7"
              />
        </LinearLayout>
        
            <LinearLayout
             android:layout_width="match_parent"
        	 android:layout_height="60dp"
        	 android:background="@drawable/menu_bg"
        	 android:orientation="horizontal"
        >
		<ImageView 
		    style="@style/menuimagestyle"
		    android:background="@drawable/tab_news"
		    />            
          <TextView 
             style="@style/menutextstyle"
		     android:text="新闻条目8"
              />
        </LinearLayout>
        
             <LinearLayout
             android:layout_width="match_parent"
        	 android:layout_height="60dp"
        	 android:background="@drawable/menu_bg"
        	 android:orientation="horizontal"
        >
		<ImageView 
		    style="@style/menuimagestyle"
		    android:background="@drawable/tab_news"
		    />            
          <TextView 
             style="@style/menutextstyle"
		     android:text="新闻条目9"
              />
        </LinearLayout>
        
              <LinearLayout
             android:layout_width="match_parent"
        	 android:layout_height="60dp"
        	 android:background="@drawable/menu_bg"
        	 android:orientation="horizontal"
        >
		<ImageView 
		    style="@style/menuimagestyle"
		    android:background="@drawable/tab_news"
		    />            
          <TextView 
             style="@style/menutextstyle"
		     android:text="新闻条目10"
              />
        </LinearLayout>
        
               <LinearLayout
             android:layout_width="match_parent"
        	 android:layout_height="60dp"
        	 android:background="@drawable/menu_bg"
        	 android:orientation="horizontal"
        >
		<ImageView 
		    style="@style/menuimagestyle"
		    android:background="@drawable/tab_news"
		    />            
          <TextView 
             style="@style/menutextstyle"
		     android:text="新闻条目11"
              />
        </LinearLayout>
        
               
                <LinearLayout
             android:layout_width="match_parent"
        	 android:layout_height="60dp"
        	 android:background="@drawable/menu_bg"
        	 android:orientation="horizontal"
        >
		<ImageView 
		    style="@style/menuimagestyle"
		    android:background="@drawable/tab_news"
		    />            
          <TextView 
             style="@style/menutextstyle"
		     android:text="新闻条目12"
              />
        </LinearLayout>
        
                
                 <LinearLayout
             android:layout_width="match_parent"
        	 android:layout_height="60dp"
        	 android:background="@drawable/menu_bg"
        	 android:orientation="horizontal"
        >
		<ImageView 
		    style="@style/menuimagestyle"
		    android:background="@drawable/tab_news"
		    />            
          <TextView 
             style="@style/menutextstyle"
		     android:text="新闻条目13"
		     
              />
        </LinearLayout>
         
         
    </LinearLayout>
    

</ScrollView>

  2、mainnews.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="match_parent" >
 
    <LinearLayout 
        android:id="@+id/title1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@drawable/top_bar_bg">
    
 <ImageView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/main_back"
    android:id="@+id/back"
    />   
    
 <ImageView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/top_bar_divider"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:layout_toRightOf="@id/back"
    />

 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginBottom="25dp"
     android:layout_marginTop="25dp"
     android:layout_marginLeft="30dp"
     android:gravity="center_vertical"
     android:text="网易新闻"
     android:textColor="@android:color/white"
     android:textSize="30dp" />

    </LinearLayout>
    
    <TextView 
        android:layout_below="@id/title1"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:text="钓鱼岛是中国额,老谭是世界的!"
       android:gravity="center"
        />
    
    
</RelativeLayout>

  

posted @ 2015-08-30 22:23  Lammy  阅读(227)  评论(0编辑  收藏  举报