Android5.0多種側(cè)滑欄效果實(shí)例代碼
1.普通側(cè)滑
效果圖:
思路:通過自定義View繼承HorizontalScrollView,然后重寫onMeasure(),onLayout(),onTouchEvent()
方法并設(shè)置menu(通過動(dòng)畫使menu開始時(shí)處于隱藏狀態(tài))布局和content布局。(注意:使用ViewHelper類需要導(dǎo)入nineoldandroids-2.4.0.jar包)
menu(left_menu)布局代碼:
<?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:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_centerInParent="true"> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/id_img1" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:layout_centerVertical="true" android:src="@mipmap/img_1"/> <TextView android:id="@+id/iv_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第一個(gè)item" android:textSize="21sp" android:textColor="#ffffff" android:layout_toRightOf="@+id/id_img1" android:layout_marginLeft="20dp" android:layout_centerVertical="true"/> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/id_img2" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:layout_centerVertical="true" android:src="@mipmap/img_2"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第二個(gè)item" android:textSize="21sp" android:textColor="#ffffff" android:layout_toRightOf="@+id/id_img2" android:layout_marginLeft="20dp" android:layout_centerVertical="true"/> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/id_img3" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:layout_centerVertical="true" android:src="@mipmap/img_3"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第三個(gè)item" android:textSize="21sp" android:textColor="#ffffff" android:layout_toRightOf="@+id/id_img3" android:layout_marginLeft="20dp" android:layout_centerVertical="true"/> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/id_img4" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:layout_centerVertical="true" android:src="@mipmap/img_4"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第四個(gè)item" android:textSize="21sp" android:textColor="#ffffff" android:layout_toRightOf="@+id/id_img4" android:layout_marginLeft="20dp" android:layout_centerVertical="true"/> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/id_img5" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:layout_centerVertical="true" android:src="@mipmap/img_5"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第五個(gè)item" android:textSize="21sp" android:textColor="#ffffff" android:layout_toRightOf="@+id/id_img5" android:layout_marginLeft="20dp" android:layout_centerVertical="true"/> </RelativeLayout> </LinearLayout> </RelativeLayout>
content(activity_main)布局代碼:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:hyname="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/img_frame_background"> <com.imooc.view.SlidingMenu android:id="@+id/id_menu" android:layout_width="match_parent" android:layout_height="match_parent" hyname: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:orientation="vertical" android:background="@mipmap/qq"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="切換菜單" android:onClick="toogleMenu" android:textSize="21sp"/> </LinearLayout> </LinearLayout> </com.imooc.view.SlidingMenu> </LinearLayout>
自定義attr.xml文件代碼:
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="rightPadding" format="dimension"/> <declare-styleable name="SlidingMenu"> <attr name="rightPadding"></attr> </declare-styleable> </resources>
自定義SlidingMenu代碼:
public class SlidingMenu extends HorizontalScrollView { private LinearLayout mWapper; private ViewGroup mMenu;//菜單布局 private ViewGroup mContent;//內(nèi)容布局 private int mScreenWidth;//屏幕寬度 private int mMenuRightPadding=50; private boolean once; private int mMenuWidth; private boolean isOpen; public SlidingMenu(Context context) { this(context, null); } /** * 未使用自定義屬性時(shí),調(diào)用 * @param context * @param attrs */ public SlidingMenu(Context context, AttributeSet attrs) { this(context, attrs,0); } /** * 自定義了屬性且使用時(shí),調(diào)用次構(gòu)造方法 * @param context * @param attrs * @param defStyleAttr */ public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); //獲取定義的屬性的數(shù)組 TypedArray typedValue=context.getTheme().obtainStyledAttributes(attrs, R.styleable.SlidingMenu, defStyleAttr, 0); int n=typedValue.getIndexCount(); for (int i=0;i<n;i++){ int attr=typedValue.getIndex(i); switch (attr){ case R.styleable.SlidingMenu_rightPadding: mMenuRightPadding=typedValue.getDimensionPixelSize(attr,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,50,context.getResources().getDisplayMetrics())); break; } } typedValue.recycle(); WindowManager mg= (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); //初始化屏幕信息對(duì)象 DisplayMetrics outMetrics=new DisplayMetrics(); //把屏幕的信息存儲(chǔ)到DisplayMetrics中 mg.getDefaultDisplay().getMetrics(outMetrics); //獲取屏幕寬度賦值給mScreenWidth mScreenWidth=outMetrics.widthPixels; } /** * 設(shè)置子view的寬和高 * 設(shè)置自己的寬和高 * @param widthMeasureSpec * @param heightMeasureSpec */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { if(!once){ //獲取SlidingMenu中的Linearlayout布局 mWapper= (LinearLayout) getChildAt(0); //獲取LinearLayout中的menu布局 mMenu= (ViewGroup) mWapper.getChildAt(0); //獲取LinearLayout中的Content布局 mContent= (ViewGroup) mWapper.getChildAt(1); //獲取menu寬度 mMenuWidth= mMenu.getLayoutParams().width=mScreenWidth-mMenuRightPadding; //設(shè)置content的寬度 mContent.getLayoutParams().width=mScreenWidth; mWapper.getLayoutParams().width=mScreenWidth; once=true; } super.onMeasure(widthMeasureSpec, heightMeasureSpec); } /** * 通過設(shè)置偏移量,將menu隱藏 * @param changed * @param l * @param t * @param r * @param b */ @Override protected void 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 public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()){ case MotionEvent.ACTION_UP: //隱藏在左邊的寬度 int scrollX=getScrollX(); if (scrollX>=mMenuWidth/2){ this.smoothScrollTo(mMenuWidth,0); isOpen=false; }else { this.smoothScrollTo(0,0); isOpen=true; } return true; } return super.onTouchEvent(ev); } public void openMenu(){ if(isOpen)return; this.smoothScrollTo(0,0); isOpen=true; } public void closeMenu(){ if(!isOpen)return; this.smoothScrollTo(mMenuWidth,0); isOpen=false; } //切換菜單 public void toggle(){ if(isOpen){ closeMenu(); }else { openMenu(); } } }
主文件代碼:
public class MainActivity extends AppCompatActivity { private SlidingMenu mleftMenu; private TextView textView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mleftMenu= (SlidingMenu) findViewById(R.id.id_menu); textView= (TextView) findViewById(R.id.iv_text); //menu的第一個(gè)Item的點(diǎn)擊事件,可不寫 textView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mleftMenu.toggle(); } }); } public void toogleMenu(View view){ mleftMenu.toggle(); } }
2.抽屜式側(cè)滑(一)
效果圖:
思路:在原來(lái)的基礎(chǔ)上,在自定義View文件中重寫onScrollChanged()方法
添加代碼:
/** * 滾動(dòng)時(shí)發(fā)生 * @param l * @param t * @param oldl * @param oldt */ @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); //調(diào)用屬性動(dòng)畫,設(shè)置TranslateX,l值為menu隱藏的寬度,menu由完全隱藏變?yōu)橥耆梢姡兓荻?scale由1~0,menu偏移量由大到??; float scale=l*1.0f/mMenuWidth; //1~0 ViewHelper.setTranslationX(mMenu, mMenuWidth * scale); }
3.抽屜式側(cè)滑(二)
效果圖:
思路:在一的基礎(chǔ)上通過設(shè)置menu的縮放效果,content的縮放效果和縮放中心實(shí)現(xiàn)。
實(shí)現(xiàn)代碼:
/** * 滾動(dòng)發(fā)生 * @param l * @param t * @param oldl * @param oldt */ @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); //調(diào)用屬性動(dòng)畫,設(shè)置TranslateX,l值為menu隱藏的寬度,menu由完全隱藏變?yōu)橥耆梢?,變化梯度scale由1~0,menu偏移量由大到小; float scale=l*1.0f/mMenuWidth; //1~0 // ViewHelper.setTranslationX(mMenu, mMenuWidth * scale); float leftScale=1.0f-scale*0.3f; //0.7~1.0 float leftAlpha=0.6f+0.4f*(1-scale); //0.6~1.0 float rightScale=0.7f+0.3f*scale; //1.0~0.7 //縮放動(dòng)畫0.7~1.0 ViewHelper.setScaleX(mMenu, leftScale); ViewHelper.setScaleY(mMenu, leftScale); //透明度變化0.6~1.0 ViewHelper.setAlpha(mMenu, leftAlpha); ViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.7f); ViewHelper.setPivotX(mContent, 0); ViewHelper.setPivotY(mContent, mContent.getHeight() / 2); //縮放動(dòng)畫1.0~0.7 ViewHelper.setScaleX(mContent, rightScale); ViewHelper.setScaleY(mContent,rightScale); }
以上所述是小編給大家介紹的Android5.0多種側(cè)滑欄效果實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Android使用Spinner控件實(shí)現(xiàn)下拉列表的案例
今天小編就為大家分享一篇關(guān)于Android使用Spinner控件實(shí)現(xiàn)下拉列表的案例,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-03-03Android實(shí)現(xiàn)環(huán)信修改頭像和昵稱
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)環(huán)信修改頭像和昵稱,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02淺談Android手機(jī)聯(lián)系人開發(fā)之增刪查改功能
這篇文章主要介紹了Android手機(jī)聯(lián)系人開發(fā)之增刪查改功能,需要的朋友可以參考下2017-05-05Android開發(fā)Compose remember原理解析
這篇文章主要為大家介紹了Android開發(fā)Compose remember原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Android自定義View實(shí)現(xiàn)漸變色儀表盤
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)漸變色儀表盤,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11Android?手寫RecyclerView實(shí)現(xiàn)列表加載
這篇文章主要介紹了Android?手寫RecyclerView實(shí)現(xiàn)列表加載,涉及到列表的需求,肯定第一時(shí)間想到RecyclerView,即便是自定義View,那么RecyclerView也會(huì)是首選,為什么會(huì)選擇RecyclerView而不是ListView,主要就是RecyclerView的內(nèi)存復(fù)用機(jī)制,這也是RecyclerView的核心?2022-08-08Android實(shí)現(xiàn)房貸計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)房貸計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01Flutter實(shí)現(xiàn)抽屜動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了Flutter實(shí)現(xiàn)抽屜動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03