QQ 5.0侧滑HorizontalScrollView以及自定义ViewGroup
生活随笔
收集整理的這篇文章主要介紹了
QQ 5.0侧滑HorizontalScrollView以及自定义ViewGroup
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? 一般側滑的實現: 自定義的ViewGroup(menu+content) ouTouchEvent事件改變ViewGroup的LeftMargin。 大于菜單的一半顯示,小于則隱藏(使用Scroller或者LeftMargin加Thread)。 新的方法: 繼承HorizontalScrollView,由于menu+content一定是大于屏幕的寬度,那么水平滾動條會自動進行拖動, 我們只要做偏移的距離還顯示或隱藏menu或content。 1.最簡單的側滑
自定義ViewGroup即HorizontalScrollView。并復寫其中的三個主要方法: 1.onMeasure:即決定內部的View的寬和高,以及自己的寬和高; 2.onLayout:決定子View的放置位置; 3.onTouchEvent:判斷用戶的狀態,控制內部View效果。 scrollTo和scrollBy方法:是scrollView的方法,因為view和Canvas是沒有邊界的。 <com.example.kevin.myapplication.SlidingMenu
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:orientation="horizontal"><include layout="@layout/left_menu"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/qq"></LinearLayout>
</LinearLayout>
</com.example.kevin.myapplication.SlidingMenu> ? 1.1自定義屬性 自定義屬性:允許用戶設置菜單離屏幕右側屬性,常用在view和viewGroup。資源所定義的屬性發揮作用取決于自定義組件的代碼實現。 ? ? ? ?1.書寫XML文件value/attr.xml; 放在values目錄下,屬性資源文件的根元素是<resources../>,包含兩個元素。 attr子元素:定義一個屬性值。 declare-styleable:定義一個styleable對象,每個styleable對象就是一組attr屬性的集合。 <?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="rightPadding" format="dimension"/>
<declare-styleable name="SlidingMenu">
<attr name="rightPadding"/>
</declare-styleable>
</resources> ? ?2.在布局文件進行使用,xmlns定義命名空間。 <com.example.kevin.myapplication.SlidingMenu
android:id="@+id/id_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/img_frame_background"
my:rightPadding="100dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<include layout="@layout/left_menu"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/qq">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="toggleMenu"
android:text="切換菜單"/>
</LinearLayout>
</LinearLayout>
</com.example.kevin.myapplication.SlidingMenu> ? ? ? ? ?更改menu距離右邊距離100dp。 ? ? ? 3.在構造方法中(3個參數的構造方法)中獲得我們設置的值 接著使用TypeArray。它是一個存放恢復obtainStyledAttributes(AttributeSet, int[], int, int)或 obtainAttributes(AttributeSet, int[]) ?值的一個 數組容器 。當操作完成以后,一定要調用recycle()方法。 //獲取定義的屬性
TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.SlidingMenu);
int n = a.getIndexCount();//拿到自定義屬性個數
for(int i=0;i<n;i++){
int attr = a.getIndex(i);
switch(attr){
case R.styleable.SlidingMenu_rightPadding:mMenuRightPadding = a.getDimensionPixelSize(attr,(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,50,context.getResources().getDisplayMetrics()));
break;}
} 2.抽屜式側滑 菜單仿佛在內容區域以下:當左邊content拉出多少,左邊menu就設置menuWidth-拉出距離的偏移量。 這里需要設置屬性動畫(3.0引入的):TranslationX。為了往下兼容必須引入com.nineoldandroids:library:2.4.0這個jar。 選擇調用動畫的時機可用?onScrollChanged。 /*
*滾動發生時
*/
@Override
protectedvoid onScrollChanged(int l,int t,int oldl,int oldt){super.onScrollChanged(l, t, oldl, oldt);float scale = l*1.0f/mMenuWidth;//1~0//調用屬性動畫設置anslationX。ViewHelper.setTranslationX(mMenu, mMenuWidth * scale);
} l相當于就是getScrillX()。 3.QQ式側滑
區別在于:scale:1~0 1.內容區域縮放1~0.7縮放效果, 0.7+0.3*scale; 2.菜單的偏移量需要修改; 3.菜單的顯示有縮放以及透明度0.7~1,1.0?- 0.3*scale。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?0.6~1,0.6 + 0.4*(1-scale)。 protectedvoid onScrollChanged(int l,int t,int oldl,int oldt){super.onScrollChanged(l, t, oldl, oldt);
float scale = l*1.0f/mMenuWidth;//1~0
//調用屬性動畫設置anslationX。ViewHelper.setTranslationX(mMenu, mMenuWidth * scale);
float rightScale =0.7f+0.3f* scale;
float leftScale =1.0f- scale *0.3f;
float leftAlpha =0.6f+0.4f*(1- scale);ViewHelper.setScaleX(mMenu, leftScale);ViewHelper.setScaleY(mMenu, leftScale);ViewHelper.setAlpha(mMenu, leftAlpha);
// 設置content的縮放的中心點ViewHelper.setPivotX(mContent,0);ViewHelper.setPivotY(mContent, mContent.getHeight()/2);ViewHelper.setScaleX(mContent, rightScale);ViewHelper.setScaleY(mContent, rightScale);
} 慕課網學習筆記:http://www.imooc.com/learn/211 參考: http://blog.csdn.net/qinjuning/article/details/7247126? ?scrollTo 以及 scrollBy方法使用說明 http://blog.csdn.net/qinjuning/article/details/7419207? ? 側滑實現 http://my.oschina.net/banxi/blog/56421? ? ? ? ? ? ? ? ? ? ? ??motionevent
自定義ViewGroup即HorizontalScrollView。并復寫其中的三個主要方法: 1.onMeasure:即決定內部的View的寬和高,以及自己的寬和高; 2.onLayout:決定子View的放置位置; 3.onTouchEvent:判斷用戶的狀態,控制內部View效果。
public void?scrollTo(int x, int y)
????????????? 說明:在當前視圖內容偏移至(x , y)坐標處,即顯示(可視)區域位于(x , y)坐標處。
?
public void?scrollBy(int x, int y)? ??
? ? ? ? ? ? ? 說明:在當前視圖內容繼續偏移(x , y)個單位,顯示(可視)區域也跟著偏移(x,y)個單位。顯示部分在大的view中也偏移了位置。
onTouchEvent事件類型:
? ? ACTION_DOWN: 表示用戶開始觸摸.
? ? ACTION_MOVE: 表示用戶在移動(手指或者其他)
? ? ACTION_UP:表示用戶抬起了手指
? ? ACTION_CANCEL:表示手勢被取消了
publicclassSlidingMenuextendsHorizontalScrollView{privateLinearLayout mWapper;privateViewGroup mMenu;privateViewGroup mContent;privateint mScreenWidth;privateint mMenuWidth;privateint mMenuRightPadding =50;//menu與屏幕右側的間距 、privateboolean once =false;publicSlidingMenu(Context context,AttributeSet attrs){super(context, attrs);WindowManager wm = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE);DisplayMetrics outMetrics =newDisplayMetrics();wm.getDefaultDisplay().getMetrics(outMetrics);mScreenWidth = outMetrics.widthPixels;//把dp轉換為pxmMenuRightPadding =(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,50,context.getResources().getDisplayMetrics()); } /* *設置子view的寬和高,和自己的寬和高(子view確定好之后就確定自己的了) */ @Override protectedvoid onMeasure(int widthMeasureSpec,int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);if(!once){mWapper =(LinearLayout)getChildAt(0);mMenu =(ViewGroup)mWapper.getChildAt(0);mContent =(ViewGroup)mWapper.getChildAt(1);mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;mContent.getLayoutParams().width = mScreenWidth;//子view寬度決定之后,本身也就決定了once =true;} } /* *通過設置偏移量,將menu隱藏 */ @Override protectedvoid onLayout(boolean changed,int l,int t,int r,int b){ super.onLayout(changed, l, t, r, b);if(changed){this.scrollTo(mMenuWidth,0);} } @Override publicboolean onTouchEvent(MotionEvent ev){int action = ev.getAction();switch(action){caseMotionEvent.ACTION_UP:int scrollX = getScrollX();//scrollX是隱藏是在左邊的寬度if(scrollX >= mMenuWidth/2){this.smoothScrollTo(mMenuWidth,0);}else{this.smoothScrollTo(0,0);}returntrue;}returnsuper.onTouchEvent(ev);} } 接著在XML中使用,要使用完整包名,只能放一個子控件,因為是FrameLayout。區別在于:scale:1~0 1.內容區域縮放1~0.7縮放效果, 0.7+0.3*scale; 2.菜單的偏移量需要修改; 3.菜單的顯示有縮放以及透明度0.7~1,1.0?- 0.3*scale。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?0.6~1,0.6 + 0.4*(1-scale)。
?
轉載于:https://www.cnblogs.com/fruitbolgs/p/4232002.html
總結
以上是生活随笔為你收集整理的QQ 5.0侧滑HorizontalScrollView以及自定义ViewGroup的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: rpm包制作
- 下一篇: MSDN、RTM、OEM、VOL四大版本