网易新闻控件的创建,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>